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.

Dricks

Läs vår senaste dokumentation om tilläggsutveckling med hjälp av Azure DevOps Extension SDK.

Teamkontext

I den traditionella vågräta navigeringen kan användarna gå till ett projekt eller 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 tillägget faller under.

Hubbtillägg som är teammedvetna

Om tillägget 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 instrumentpaneler

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 lästeamet 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 instrumentpanel

Tillägget kan kontrollera det actionContext-objekt som skickas till återanropet som anropas när en användare väljer det bidragna menyalternativet. Exempel visar lästeamet 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.

Kommentar

Dessa ikoner visas inte i vågrät navigering.

Utför följande steg för att ange en ikon för hubben.

1. iconAsset Ange egenskapen för hubbbidraget 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 includesData .

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