Aracılığıyla paylaş

Menü eylemi ekleme

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

Bu örnekte, iş öğesi sorguları hub'ında sorgu bağlam menüsüne bir eylem ekleyeceğiz.

Bahşiş / İpucu

Azure DevOps Uzantı SDK'sınıkullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.

Önkoşullar

Uzantı bildirim dosyasını güncelleştirme

Aşağıda, eyleminizi uzantı bildiriminizinkatkılar bölümüne ekleyen kod parçacığı yer alır.

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

Özellikler

Mülk Açıklama
Metin Menü öğesinde görüntülenen metin.
başlık Menü öğesinde görüntülenen araç ipucu metni.
ikon Menü öğesinde görünen simgenin URL'si. Göreli URL'ler baseUri kullanılarak çözümlenir.
grupKimliği Bu menü öğesinin diğerlerine göre nerede görüneceğini belirler.
uri Menü eylem işleyicisini kaydeden bir sayfaya URI (aşağıya bakın).
kayıtlıNesneKimliği (İsteğe bağlı) Kayıtlı menü eylem işleyicisinin adı. Varsayılan olarak katkı sağlayan kimliği kullanır.

Genişletilebilirlik noktalarına eylem ekleyebileceğiniz tüm yerler hakkında bilgi edinin.

HTML sayfanız

Menü eyleminiz, HTML dosyasına eklenmiş bir JavaScript betiğiyle temsil edilir. Aşağıdaki içeriği uzantınızın bildirim dosyasındaki başvuruyla eşleşen bir dosyaya ve konuma kaydedin.

	<!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'iniz

Aşağıdaki betik, eylemi işlemek için işleyici nesnesini kaydeder ve önceki HTML sayfasının head bölümüne yerleştirir.

lib bildirim dosyamızda node_modules/azure-devops-extension-sdk/lib'ı sdk-extension.json olarak adlandırdık.

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

Bahşiş / İpucu

Daha fazla bilgi için bkz. Genişletilebilirlik noktaları, menüler ve araç çubukları, Formül Tasarım Sistemi Katkı modeli, REST API başvurusu, Uzantı örneklerive Geliştirici Topluluğukaynakları.

Sonraki adımlar

Artık uzantınızı yazdığınıza göre, sonraki adımlar uzantınızı Paketleme, Yayımlama ve Yükleme'dir. Ayrıca uzantınızı test etme ve hata ayıklama belgelerine de göz atabilirsiniz.

  • Last updated on