Vägledning för lodrät navigering

Azure DevOps-tjänster

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.

Tips

För den senaste utvecklingsvägledningen för tillägg, inklusive teman och migrering från VSS. SDK, se utvecklarportalen för Azure DevOps Extension SDK.

Teamkontext

I traditionell vågrät navigering kan användarna gå till ett projekt eller team genom att välja från en meny som finns uppe till vänster i sidhuvudet. Den här väljaren presenterade en lista över de senaste teamen och ett sätt att bläddra bland 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.

Teammedvetna hubbtillägg

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.

Pivot- och paneltillägg

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 konfigurationenoch å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

Tillägget kan kontrollera det actionContext-objekt som skickas till återanropet som anropas när en användare väljer det tillagda menyalternativet. Exemplet visar läsgruppen 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 valfritt ange en fil (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 levereras tillsammans med ditt tillägg.

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 resursen med ditt tillägg genom att ange den i files-egenskapen i rotkatalogen av ditt manifest.

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