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 het ontwikkelen van extensies met behulp van de Azure DevOps Extension SDK.

Teamcontext

In traditionele horizontale navigatie kunnen gebruikers naar een project of team gaan door een selectie te maken uit een kiezer in de linkerbovenhoek van de paginakoptekst. Deze kiezer heeft een lijst met recente teams weergegeven 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 introduceerde een uitdaging voor webextensies die afhankelijk zijn van de mogelijkheid van gebruikers om van team 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 actief is:

{
    "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 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 Teams REST API gebruiken om een lijst met teams voor het huidige project op te halen. 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 het configuratieobject controleren dat is doorgegeven aan uw bijdrage. Dit object heeft verschillende eigenschappen, afhankelijk van het type bijdrage en waar de bijdrage wordt gehost. Voorbeeld van het leesteam van de configuratie en het terugvallen op het leesteam van webContext om zowel nieuwe verticale navigatie als oudere horizontale navigatie in on-premises releases te ondersteunen.

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
  }
}

Actiesextensies die zich in teambewuste hubs bevinden, zoals backlogs en dashboards

Uw extensie kan het actionContext-object controleren dat is doorgegeven aan de callback die wordt aangeroepen wanneer een gebruiker het bijgedragen menu-item selecteert. Voorbeeld van het lezen van het team uit 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 het 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 in te stellen voor uw hub.

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

2. Voeg een vermelding voor dit activum toe aan de includesata eigenschap bijdrage.

3. Verpak de asset met uw extensie door deze op te slaan in de files eigenschap in de hoofdmap van uw manifest.

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"
        }
    }
}