Richtlijnen voor verticale navigatie

Azure DevOps Services

Verticale navigatie brengt wijzigingen met zich mee die van invloed zijn op sommige extensies. Deze resultaten omvatten ondersteuning voor extensiepictogrammen, samen met wijzigingen in teamcontext.

Tip

Bekijk onze nieuwste documentatie over uitbreidingsontwikkeling met behulp van de Azure DevOps Extension SDK.

Teamcontext

In traditionele horizontale navigatie kunnen gebruikers naar een project of team gaan door een keuze te maken uit een kiezer die zich in de linkerbovenhoek van de paginakoptekst bevindt. Deze kiezer heeft een lijst met recente teams gepresenteerd en een manier om naar alle teams te bladeren. In de nieuwe verticale navigatie kan een gebruiker alleen naar een project navigeren (en niet naar een team). Deze wijziging is aangebracht om de algehele ervaring te vereenvoudigen. Maar het heeft een uitdaging geïntroduceerd voor webextensies die afhankelijk zijn van de mogelijkheid van gebruikers om van teams te wisselen met behulp van de traditionele teamkiezer in de paginakoptekst.

SDK.getWebContext() is een API aan de clientzijde die wordt geleverd door de SDK die informatie biedt over de huidige organisatie, het project en het team waarin de gebruiker werkt:

{
    "account": {
        "name": "Fabrikam",
        "id": "50e49b94-4bb6-40e7-8c85-a6d756d8a4d8"
    },
    "project": {
        "name": "Fabrikam Dev",
        "id": "049b1af2-fc87-4e50-95e4-151357f04b7f"
    },
    "team": {
        "name": "Ops Team",
        "id": "9b3a6b80-fe95-4c8c-8aa1-1e5d535d7af1"
    }
}

We raden u niet aan om te vertrouwen op SDK.getWebContext().team. Volg in plaats daarvan de onderstaande richtlijnen op basis van de categorie waarin uw extensie valt.

Hub-extensies die teambewust zijn

Als uw extensie gebruikers een manier moet bieden om een team te selecteren, kunt u de Rest API van Teams gebruiken om een lijst met teams op te halen voor het huidige project. In het volgende voorbeeld ziet u hoe u deze API aanroept vanuit uw extensie.

import { getClient } from "azure-devops-extension-api";
import { CoreRestClient } from "azure-devops-extension-api/Core";
import * as SDK from "azure-devops-extension-sdk";

private async getTeams() {
    const client = getClient(CoreRestClient);
    
    client.getTeams(SDK.getWebContext().project.id).then(
        function(teams) {
            console.log(teams);
        }
    );
}

Zie Teamagenda voor een voorbeeld van een extensie die een besturingselement voor teamkiezer biedt.

Pivots/Panels-extensies die zich in teambewuste hubs bevinden, zoals Backlogs en Dashboard

Uw extensie kan controleren of het configuratieobject is doorgegeven aan uw bijdrage. Dit object heeft verschillende eigenschappen, afhankelijk van het bijdragetype en waar de bijdrage wordt gehost. Voorbeeld toont het leesteam van de configuratie en terugvalt op het leesteam van webContext ter ondersteuning van zowel nieuwe verticale navigatie als oudere horizontale navigatie in on-premises releases.

function getCurrentTeam() {
  let webContext = SDK.getWebContext();
  let configuration = SDK.getConfiguration();

  if ("team" in configuration) {
    return configuration.team;
  } else if ("team" in webContext) {
    return webContext.team;
  } else {
    return null; // should only happen if not in a project context
  }
}

Acties-extensies die zich in teambewuste hubs bevinden, zoals Backlogs en Dashboard

Uw extensie kan het actionContext-object controleren dat is doorgegeven aan de callback die wordt aangeroepen wanneer een gebruiker het bijgedragen menu-item selecteert. In het voorbeeld ziet u het leesteam van de actionContext.

var menuContributionHandler = (function () {
        "use strict";
        return {
            // This is a callback that gets invoked when a user selects the newly contributed menu item
            // The actionContext parameter contains team information.
            execute: function (actionContext) {
                if("team" in actionContext) {
                    alert(`Team. Id is ${actionContext.team.id}, Name is ${actionContext.team.name}`);
                }
            }
        };
    }());

Hubpictogram

U kunt desgewenst een asset (zoals een .png of .jpg) instellen als pictogram voor uw hub. Dit pictogram wordt weergegeven naast de hub in de verticale navigatiebalk. Het moet worden verpakt met uw extensie.

Notitie

Deze pictogrammen worden niet weergegeven in horizontale navigatie.

Voer de volgende stappen uit om een pictogram voor uw hub in te stellen.

1. Stel de eigenschap van de iconAsset hubbijdrage in voor de volledig gekwalificeerde asset-id, die het patroon volgt: {publisher-id}.{extension-id}/{asset-path}

2. Voeg een vermelding voor deze asset toe in de includesData eigenschap Bijdrage.

3. Pak de asset in met uw extensie door deze in de eigenschap in de files hoofdmap van uw manifest weer te voegen.

Voorbeeld 1:

{
  "id": "my-extension",
  "publisherId": "my-publisher",
  ...
  "contributions": [
        {
            "id": "example-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "iconAsset": "my-publisher.my-extension/images/fabrikam-logo.png",
                "includesData": {
                    "assets": [
                        "my-publisher.my-extension/images/fabrikam-logo.png"
                    ]
                }
            }
       }
  ],
 "files": [
     {
         "path": "images/fabrikam-logo.png",
         "addressable": true
     }
 ]
}

Voorbeeld 2:

Wanneer thema's zoals licht versus donker worden toegepast, kunt u de pictogrammen in uw extensiemanifest als volgt opgeven.

{
    "id": "hub",
    "type": "ms.vss-web.hub",
    "targets": [
        "ms.vss-work-web.work-hub-group"
    ],
    "properties": {
        "name": "Hub",
        "description": "Something",
        "uri": "pages/Hub.html",
        "icon": {
            "light": "img/hub-light.png",
            "dark": "img/hub-dark.png"
        }
    }
}