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

Voor de nieuwste richtlijnen voor uitbreidingsontwikkeling, inclusief thema's en migratie van VSS. SDK raadpleegt u de ontwikkelaarsportal 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 keuze-element presenteert een lijst met recente teams en mogelijkheden om door 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.

Extensies voor teambewuste hubs

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

Voor een voorbeeld van een extensie die een teamkiezer controle biedt, zie Team Calendar.

Uitbreidingen voor draai- en deelvensters

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. Het voorbeeld toont het leesteam vanuit de configuratie en valt terug op het leesteam vanuit webContext om zowel de nieuwe verticale als de oudere horizontale navigatie te ondersteunen 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
  }
}

Actie-extensies

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 samen met uw extensie worden geleverd.

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 op de volledig gekwalificeerde asset-identificator, die het patroon volgt: {publisher-id}.{extension-id}/{asset-path}

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

3. Verpak het asset met uw extensie door het op te nemen in de eigenschap files 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"
        }
    }
}