Bagikan melalui

Menambahkan tindakan menu

  • Artikel

Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019

Dalam contoh ini, kami menambahkan tindakan ke menu konteks kueri di hub kueri item kerja.

Tip

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

Prasyarat untuk artikel ini

  • Anda perlu membuat aplikasi web untuk tindakan Anda, yang dapat ditemukan dalam contoh hub.
  • Jika belum, lihat tutorial tulis ekstensi pertama Anda untuk mempelajari dasar-dasarnya.

Memperbarui file manifes ekstensi

Di bawah ini adalah cuplikan kode yang menambahkan tindakan Anda ke bagian kontribusi manifes ekstensi Anda.

...
    "contributions": [
        {
            "id": "myAction",
            "type": "ms.vss-web.action",
            "description": "Run in Hello hub action",
            "targets": [
                "ms.vss-work-web.work-item-query-menu"
            ],
            "properties": {
                "text": "Run in Hello hub",
                "title": "Run in Hello hub",
                "icon": "images/icon.png",
                "groupId": "actions",
                "uri": "action.html"
            }
        }
    ]
...

Properti

Properti Deskripsi
text Teks yang muncul pada item menu.
title Teks tipsalat yang muncul pada item menu.
ikon URL ke ikon yang muncul pada item menu. URL relatif diselesaikan menggunakan baseUri.
groupid Menentukan di mana item menu ini muncul sehubungan dengan item lainnya.
uri URI ke halaman yang mendaftarkan penangan tindakan menu (lihat di bawah).
registeredObjectId (Opsional) Nama penangan tindakan menu terdaftar. Default ke ID kontributor.

Pelajari tentang semua tempat di mana Anda dapat menambahkan tindakan di Titik ekstensibilitas.

Halaman HTML Anda

Tindakan menu Anda diwakili oleh skrip JavaScript yang disematkan dalam file HTML. Simpan konten berikut dalam file dan lokasi yang cocok dengan referensi di file manifes ekstensi Anda.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Action Sample</title>
	</head>
	<body>
		<div>
			The end user doesn't see the content on this page.
			It is only in the background to handle the contributed menu item being selected.
		</div>
	</body>
	</html>

JavaScript Anda

Skrip di bawah ini mendaftarkan objek handler untuk menangani tindakan, menempatkannya di head bagian halaman HTML sebelumnya.

Kami alias lib berada node_modules/azure-devops-extension-sdk/lib dalam file manifes kami sdk-extension.json .

<script src="lib/SDK.min.js"></script>
<script>
    SDK.init();

    // Use an IIFE to create an object that satisfies the IContributedMenuSource contract
    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 context data surrounding the circumstances of this
            // action getting invoked.
            execute: function (actionContext) {
                alert("Hello, world");
            }
        };
    }());

    // Associate the menuContributionHandler object with the "myAction" menu contribution from the manifest.
    SDK.register(SDK.getContributionId(), menuContributionHandler);
</script>

Tip

Untuk informasi selengkapnya, lihat Titik ekstensibilitas, menu, dan toolbar, model Kontribusi Sistem Desain Rumus, referensi REST API, Sampel ekstensi, dan sumber daya di Komunitas Pengembang.

Langkah berikutnya

Sekarang setelah Anda menulis ekstensi, langkah selanjutnya adalah Mengemas, Menerbitkan, dan Menginstal ekstensi Anda. Anda juga dapat memeriksa dokumentasi untuk Pengujian dan Penelusuran Kesalahan ekstensi Anda.