Vägledning för lodrät navigering

Azure DevOps Services

Lodrät navigering medför ändringar som påverkar vissa tillägg. Dessa resultat omfattar stöd för tilläggsikoner tillsammans med ändringar i teamkontexten.

Teamkontext

I traditionell vågrät navigering kan användarna gå till ett projekt eller ett team genom att välja från en väljare som finns längst upp till vänster i sidhuvudet. Den här väljaren presenterade en lista över de senaste teamen och ett sätt att söka efter alla team. I den nya lodräta navigeringen kan en användare bara navigera till ett projekt (och inte till ett team). Den här ändringen gjordes för att förenkla den övergripande upplevelsen. Men den introducerade en utmaning för webbtillägg som förlitar sig på användarnas förmåga att byta team med hjälp av den traditionella teamväljaren i sidhuvudet.

SDK.getWebContext() är ett API på klientsidan som tillhandahålls av SDK:n som innehåller information om den aktuella organisationen, projektet och teamet som användaren arbetar i:

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

Vi rekommenderar inte att du förlitar dig på SDK.getWebContext().team. Följ i stället vägledningen nedan, baserat på vilken kategori ditt tillägg faller under.

Hubbtillägg som är teammedvetna

Om ditt tillägg behöver ge användarna ett sätt att välja ett team kan du använda Teams REST API för att hämta en lista över team för det aktuella projektet. I följande exempel visas hur du anropar det här API:et från ditt tillägg.

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

Ett exempel på ett tillägg som tillhandahåller en teamväljarkontroll finns i Teamkalender.

Tillägg för pivoter/paneler som finns i teammedvetna hubbar som kvarvarande uppgifter och instrumentpanelen

Tillägget kan kontrollera konfigurationsobjektet som skickas till ditt bidrag. Det här objektet har olika egenskaper beroende på bidragstyp och var bidraget finns. Exempel visar hur du läser teamet från konfigurationen och återgår till lästeamet från webContext för att stödja både ny lodrät navigering och äldre horisontell navigering i lokala versioner.

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

Åtgärdstillägg som finns i teammedvetna hubbar som kvarvarande uppgifter och instrumentpanelen

Tillägget kan kontrollera det actionContext-objekt som skickas till återanropet som anropas när en användare väljer menyalternativet som har bidragit. Exempel som visar läsningsteamet från 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}`);
                }
            }
        };
    }());

Hubbikon

Du kan också ange en tillgång (till exempel en .png eller .jpg) som ikon för din hubb. Den här ikonen visas bredvid hubben i det lodräta navigeringsfältet. Det måste paketeras med tillägget.

Utför följande steg för att ange en ikon för din hubb.

1. iconAsset Ange egenskapen för hubbens bidrag till den fullständigt kvalificerade tillgångsidentifieraren, som följer mönstret: {publisher-id}.{extension-id}/{asset-path}.

2. Lägg till en post för den här tillgången i bidragsegenskapen includesata .

3. Paketera tillgången med ditt tillägg genom att visa den i files egenskapen i roten för manifestet.

Exempel nr 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
     }
 ]
}

Exempel nr 2:

När teman som ljus kontra mörk tillämpas kan du ange ikonerna i tilläggsmanifestet på följande sätt.

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