Tambah hub

Layanan Azure DevOps

Petunjuk / Saran

Untuk panduan pengembangan ekstensi terbaru, termasuk tema dan migrasi dari VSS. SDK, lihat portal pengembang Azure DevOps Extension SDK.

Dalam artikel ini, Anda membuat hub yang muncul di Azure Boards setelah hub Sprints dan Queries .

Cuplikan layar memperlihatkan lokasi hub baru di Azure Boards.

Prasyarat

  • Node.js
  • Alat pengemasan ekstensi: jalankan npm install -g tfx-cli

Membuat struktur ekstensi

  1. Buat direktori untuk ekstensi Anda dan inisialisasikan:

    mkdir my-hub-extension
cd my-hub-extension
npm init -y
npm install azure-devops-extension-sdk --save

  2. Direktori Anda akan terlihat seperti ini:

    |--- my-hub-extension
    |--- node_modules
        |--- azure-devops-extension-sdk
    |--- images
        |--- icon.png
    |--- hello-world.html
    |--- package.json
    |--- vss-extension.json

Membuat halaman hub

Buat hello-world.html di akar direktori ekstensi Anda. Halaman ini memuat SDK, menginisialisasinya, dan menampilkan nama pengguna saat ini.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            SDK.init();
            SDK.ready().then(() => {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </script>
</head>
<body>
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

Untuk daftar lengkap grup hub yang dapat Anda targetkan, lihat Referensi Poin Extensibilitas.

Membuat manifes ekstensi

Buat vss-extension.json di akar direktori ekstensi Anda:

{
    "manifestVersion": 1,
    "id": "sample-extension",
    "version": "0.1.0",
    "name": "My first sample extension",
    "description": "A sample Azure DevOps extension.",
    "publisher": "fabrikamdev",
    "public": false,
    "categories": ["Azure Boards"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "icons": {
        "default": "images/icon.png"
    },
    "contributions": [
        {
            "id": "hello-world-hub",
            "type": "ms.vss-web.hub",
            "description": "Adds a 'Hello' hub to the Work hub group.",
            "targets": [
                "ms.vss-work-web.work-hub-group"
            ],
            "properties": {
                "name": "Hello",
                "order": 99,
                "uri": "hello-world.html"
            }
        }
    ],
    "scopes": [
        "vso.work"
    ],
    "files": [
        {
            "path": "hello-world.html", "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        },
        {
            "path": "images/icon.png", "addressable": true
        }
    ]
}

Penting

Ganti penerbit dengan nama penerbit Anda. Untuk membuat penerbit, lihat Paket , terbitkan, dan instal. Tetap public atur ke false selama pengembangan.

Properti manifes utama

Harta benda Deskripsi
Kontribusi Mendeklarasikan hub. type adalah ms.vss-web.hub, dan targets menentukan grup hub mana yang akan ditambahkan. Lihat Titik ekstensibilitas untuk semua grup hub yang dapat ditargetkan.
contributions.properties.name Nama tampilan hub.
kontribusi.properti.urutan Posisi hub dalam grup hub.
contributions.properties.uri Jalur (relatif terhadap URI dasar ekstensi) dari halaman yang akan dipergunakan sebagai pusat.
cakupan Izin yang diperlukan ekstensi. vso.work memberikan akses baca ke item kerja. Lihat Cakupan.
file File yang akan disertakan dalam paket. Atur addressable: true untuk file yang memerlukan URL.

Untuk informasi selengkapnya tentang manifes, lihat Referensi manifes ekstensi.

Tambahkan grup hub kustom

Alih-alih menambahkan hub ke grup hub bawaan, seperti Kerja atau Kode, buat grup hub Anda sendiri dan tambahkan hub ke dalamnya. Tambahkan kontribusi ms.vss-web.hub-group dan kontribusi ms.vss-web.hub yang menargetkannya:

"contributions": [
    {
        "id": "sample-hub-group",
        "type": "ms.vss-web.hub-group",
        "description": "Adds a 'Samples' hub group at the project level.",
        "targets": [
            "ms.vss-web.project-hub-groups-collection"
        ],
        "properties": {
            "name": "Samples",
            "order": 100
        }
    },
    {
        "id": "hello-hub",
        "type": "ms.vss-web.hub",
        "description": "Adds a 'Hello' hub to the Samples hub group.",
        "targets": [
            ".sample-hub-group"
        ],
        "properties": {
            "name": "Hello",
            "order": 99,
            "uri": "hello-world.html"
        }
    }
]

Perbedaan utama dari menambahkan hub ke grup bawaan:

  • Target ms.vss-web.project-hub-groups-collection kontribusi grup hub untuk tingkat proyek atau ms.vss-web.collection-hub-groups-collection untuk tingkat organisasi.
  • Array hub targets menggunakan referensi relatif (.sample-hub-group) untuk menunjuk ke grup hub yang ditentukan dalam ekstensi yang sama.
  • Properti order pada grup hub mengontrol di mana grup muncul di navigasi.

Langkah selanjutnya

Mengemas, menerbitkan, dan menginstal ekstensi

Konten terkait

  • Last updated on