Aracılığıyla paylaş

Menü eylemi ekleme

  • Makale

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

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

İpucu

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

Bu makalenin önkoşulları

  • Eyleminiz için hub örneğinde bulunabilecek bir web uygulaması oluşturmanız gerekir.
  • Henüz yapmadıysanız temel bilgiler hakkında bilgi edinmek için ilk uzantınızı yazma öğreticisine göz atın.

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

Aşağıda, eyleminizi uzantı bildiriminizin katkı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

Özellik Açıklama
text Menü öğesinde görüntülenen metin.
Başlık Menü öğesinde görüntülenen araç ipucu metni.
Simge Menü öğesinde görünen simgenin URL'si. Göreli URL'ler baseUri kullanılarak çözümlenir.
groupId 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).
registeredObjectId (İsteğe bağlı) Kayıtlı menü eylem işleyicisinin adı. Varsayılan olarak katkıda bulunan kimliğini 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 bölümüne yerleştirir head .

Bildirim dosyamızda yer node_modules/azure-devops-extension-sdk/lib almak için diğer ad lib kullandıksdk-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>

İ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ı örnekleri ve Geliştirici Topluluğu kaynaklar.

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.