Panduan navigasi vertikal

Azure DevOps

Navigasi vertikal membawa perubahan yang memengaruhi beberapa ekstensi. Hasil ini mencakup dukungan untuk ikon ekstensi bersama dengan perubahan pada konteks tim.

Tip

Lihat dokumentasi terbaru kami tentang pengembangan ekstensi menggunakan Azure DevOps Extension SDK.

Konteks tim

Di navigasi horizontal tradisional, pengguna dapat masuk ke proyek atau tim dengan memilih dari pemilih yang berada di kiri atas header halaman. Pemilih ini menyajikan daftar tim terbaru dan cara untuk menelusuri semua tim. Di navigasi vertikal baru, pengguna hanya dapat menavigasi ke dalam proyek (dan bukan ke dalam tim). Perubahan ini dilakukan untuk menyederhanakan pengalaman keseluruhan. Tetapi, ini memperkenalkan tantangan untuk ekstensi web yang mengandalkan kemampuan pengguna untuk beralih tim menggunakan pemilih tim tradisional di header halaman.

SDK.getWebContext() adalah API sisi klien yang disediakan oleh SDK yang menyediakan informasi tentang organisasi, proyek, dan tim saat ini yang dioperasikan pengguna:

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

Kami tidak menyarankan untuk mengandalkan SDK.getWebContext().team. Sebagai gantinya, ikuti panduan di bawah ini, berdasarkan kategori ekstensi Anda berada di bawah.

Ekstensi hub yang sadar tim

Jika ekstensi Anda perlu memberi pengguna cara untuk memilih tim, Anda dapat menggunakan Teams REST API untuk mendapatkan daftar tim untuk proyek saat ini. Contoh berikut menunjukkan cara memanggil API ini dari ekstensi Anda.

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

Untuk contoh ekstensi yang menyediakan kontrol pemilih tim, lihat Kalender Tim.

Ekstensi Pivot/Panel yang berada di hub sadar tim seperti Backlog dan Dasbor

Ekstensi Anda dapat memeriksa objek konfigurasi yang diteruskan ke kontribusi Anda. Objek ini memiliki properti yang berbeda tergantung pada jenis kontribusi dan tempat kontribusi dihosting. Contoh menunjukkan tim baca dari konfigurasi dan kembali membaca tim dari webContext untuk mendukung navigasi vertikal baru dan navigasi horizontal yang lebih lama dalam rilis lokal.

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

Ekstensi tindakan yang ada di hub sadar tim seperti Backlog dan Dasbor

Ekstensi Anda dapat memeriksa objek actionContext yang diteruskan ke panggilan balik yang dipanggil saat pengguna memilih item menu yang dikontribusikan. Contoh menunjukkan tim baca dari 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}`);
                }
            }
        };
    }());

Ikon hub

Anda dapat secara opsional mengatur aset (seperti .png atau .jpg) sebagai ikon untuk hub Anda. Ikon ini muncul di samping hub di bilah navigasi vertikal. Ini harus dibungkus dengan ekstensi Anda.

Catatan

Ikon ini tidak muncul di navigasi horizontal.

Selesaikan langkah-langkah berikut untuk mengatur ikon untuk hub Anda.

1. Atur iconAsset properti kontribusi hub ke pengidentifikasi aset yang sepenuhnya memenuhi syarat, yang mengikuti pola: {publisher-id}.{extension-id}/{asset-path}.

2. Tambahkan entri untuk aset ini di includesData properti kontribusi.

3. Kemas aset dengan ekstensi Anda dengan mencantumkannya di files properti di akar manifes Anda.

Contoh #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
     }
 ]
}

Contoh #2:

Saat tema seperti terang versus gelap diterapkan, Anda dapat menentukan ikon dalam manifes ekstensi Anda sebagai berikut.

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