Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019
Widgets auf einem Dashboard werden als Beiträge im Erweiterungsframework implementiert. Eine einzelne Erweiterung kann mehrere Beiträge enthalten. Erfahren Sie, wie Sie eine Erweiterung mit mehreren Widgets als Beiträge erstellen.
Dieser Artikel ist in drei Teile unterteilt, die jeweils auf dem vorherigen aufbauen. Sie beginnen mit einem einfachen Widget und enden mit einem umfassenden Widget.
Tipp
Sehen Sie sich unsere neuste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps Erweiterungs-SDK an.
Voraussetzungen
Einige Kenntnisse von JavaScript, HTML und CSS sind für die Widgetentwicklung erforderlich.
Eine Organisation in Azure DevOps. Eine Organisation erstellen
Ein Texteditor. Für viele der Tutorials verwenden wir Visual Studio Code.
Plattformübergreifende CLI für Azure DevOps (tfx-cli), um Ihre Erweiterungen zu packen.
- tfx-cli kann mit
npminstalliert werden, einer Komponente von Node.js, indem Sienpm i -g tfx-cliausführen.
- tfx-cli kann mit
Ein Basisverzeichnis für Ihr Projekt. Dieses Verzeichnis wird im gesamten Lernprogramm genannt
homeund sollte die folgende Struktur aufweisen, nachdem Sie die Schritte in diesem Artikel ausgeführt haben:|--- README.md |--- sdk |--- node_modules |--- scripts |--- VSS.SDK.min.js |--- img |--- logo.png |--- scripts |--- hello-world.html // html page to be used for your widget |--- vss-extension.json // extension's manifest
Dieses Lernprogramm umfasst folgende Punkte
- Teil 1: Hello World: Zeigt Ihnen, wie Sie ein neues Widget erstellen, das eine einfache Hello World-Nachricht druckt.
- Teil 2: Hello World mit Azure DevOps REST-API: Baut auf dem ersten Teil auf, indem sie einen Aufruf einer Azure DevOps REST-API hinzufügen.
- Teil 3: Konfigurieren von Hello World: Erläutert, wie Sie Ihrem Widget Konfiguration hinzufügen.
Hinweis
Wenn Sie es eilig haben und sofort Ihre Hände auf den Code bringen möchten, können Sie die Beispielerweiterung für Azure DevOps herunterladen.
Nach dem Herunterladen wechseln Sie zum widgets Ordner und führen Sie dann Schritt 6 und Schritt 7 direkt aus, um die Beispielerweiterung mit den drei Beispielwidgets verschiedener Komplexität zu veröffentlichen.
Erste Schritte mit einigen grundlegenden Stilen für Widgets, die wir sofort bereitstellen, und einige Anleitungen zur Widgetstruktur.
Teil 1: Hallo Welt
Teil 1 stellt ein Widget dar, das Hello World mit JavaScript druckt.
Schritt 1: Abrufen des Client-SDK
Das Kern-SDK-Skript ermöglicht den Weberweiterungen VSS.SDK.min.js die Kommunikation mit dem Azure DevOps-Host-Frame. Das Skript führt Vorgänge wie initialisieren, die Benachrichtigungserweiterung wird geladen oder der Kontext zur aktuellen Seite abgerufen.
Um das SDK abzurufen, verwenden Sie den npm install Befehl:
npm install vss-web-extension-sdk
Suchen Sie die Client-SDK-Datei VSS.SDK.min.js im vss-web-extension-sdk/lib Ordner, und platzieren Sie sie dann in Ihrem home/sdk/scripts Ordner.
Weitere Informationen finden Sie auf der GitHub-Seite des Client SDKs.
Schritt 2: Einrichten der HTML-Seite
Erstellen Sie eine Datei namens hello-world.html. Ihre HTML-Seite ist der Klebstoff, der Ihr Layout zusammenhält und Verweise auf CSS und JavaScript enthält. Sie können diese Datei beliebig benennen. Wenn Sie einen anderen Dateinamen verwenden, aktualisieren Sie alle Verweise auf hello-world mit dem von Ihnen verwendeten Namen.
Ihr Widget basiert auf HTML und wird in einem iframe gehostet.
Kopieren Sie den folgenden HTML-Code in Ihre hello-world.html Datei. Wir fügen den obligatorischen Verweis auf VSS.SDK.min.js die Datei hinzu und fügen ein h2 Element hinzu, das mit der Zeichenfolge "Hello World " im nächsten Schritt aktualisiert wird.
<!DOCTYPE html>
<html>
<head>
<script src="sdk/scripts/VSS.SDK.min.js"></script>
</head>
<body>
<div class="widget">
<h2 class="title"></h2>
</div>
</body>
</html>
Obwohl Sie eine HTML-Datei verwenden, werden die meisten anderen HTML-Kopfelemente als Skript und Link vom Framework ignoriert.
Schritt 3: Aktualisieren von JavaScript
Wir verwenden JavaScript, um Inhalte im Widget zu rendern. In diesem Artikel umschließen wir unseren gesamten JavaScript-Code innerhalb eines <script> Elements in der HTML-Datei. Sie können diesen Code in einer separaten JavaScript-Datei verwenden und in der HTML-Datei darauf verweisen.
Der Code rendert den Inhalt. Dieser JavaScript-Code initialisiert auch das VSS SDK, ordnet den Code für Ihr Widget Ihrem Widgetnamen zu und benachrichtigt das Erweiterungsframework über Widgeterfolge oder -fehler.
In diesem Fall druckt der folgende Code Hello World im Widget. Fügen Sie dieses script Element im head HTML-Code hinzu.
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("HelloWorldWidget", function () {
return {
load: function (widgetSettings) {
var $title = $('h2.title');
$title.text('Hello World');
return WidgetHelpers.WidgetStatusHelper.Success();
}
};
});
VSS.notifyLoadSucceeded();
});
</script>
VSS.initinitialisiert den Handshake zwischen dem Iframe, der das Widget hostet, und dem Host-Frame.Übergeben Sie
explicitNotifyLoaded: true, damit das Widget den Host explizit benachrichtigen kann, wenn er das Laden beendet hat. Dieses Steuerelement ermöglicht es uns, den Abschluss des Ladevorgangs zu melden, nachdem sichergestellt wurde, dass die abhängigen Module geladen sind. Verwenden SieusePlatformStyles: true, damit das Widget Azure DevOps-Kernstile für HTML-Elemente verwenden kann, wiebodyunddiv. Wenn Sie nicht möchten, dass das Widget diese Stile verwendet, übergeben SieusePlatformStyles: false.VSS.requirewird verwendet, um die erforderlichen VSS-Skriptbibliotheken zu laden. Ein Aufruf dieser Methode lädt automatisch allgemeine Bibliotheken wie JQuery und JQueryUI. In unserem Fall sind wir von der WidgetHelpers-Bibliothek abhängig, die verwendet wird, um den Widgetstatus an das Widgetframework zu kommunizieren. Übergeben Sie also den entsprechenden ModulnamenTFS/Dashboards/WidgetHelpersund einen Rückruf anVSS.require. Der Rückruf wird aufgerufen, sobald das Modul geladen wurde. Der Rückruf enthält den Rest des JavaScript-Codes, der für das Widget benötigt wird. Rufen Sie am Ende des RückrufsVSS.notifyLoadSucceededauf, um den Ladevorgang zu benachrichtigen.WidgetHelpers.IncludeWidgetStylesenthält ein Stylesheet mit einigen einfachen CSS für die ersten Schritte. Um diese Formatvorlagen zu verwenden, umschließen Sie Ihren Inhalt in einem HTML-Element mit der Klassewidget.VSS.registerwird verwendet, um eine Funktion in JavaScript zuzuordnen, die das Widget unter den verschiedenen Beiträgen in Ihrer Erweiterung eindeutig identifiziert. Der Name sollte mit dem übereinstimmen, deridIhren Beitrag identifiziert, wie in Schritt 5 beschrieben. Bei Widgets sollte die übergebeneVSS.registerFunktion ein Objekt zurückgeben, das denIWidgetVertrag erfüllt. Das zurückgegebene Objekt sollte beispielsweise eine Load-Eigenschaft aufweisen, deren Wert eine andere Funktion ist, die die Kernlogik zum Rendern des Widgets enthält. In unserem Fall wird der Text desh2Elements auf Hello World aktualisiert. Diese Funktion wird aufgerufen, wenn das Widget-Framework Ihr Widget instanziiert. Wir verwenden dieWidgetStatusHelpervon WidgetHelpers, um denWidgetStatusals erfolgreich zurückzugeben.Warnung
Wenn der Name, der zum Registrieren des Widgets verwendet wird, nicht mit der ID für den Beitrag im Manifest übereinstimmt, funktioniert das Widget unerwartet.
Schritt 4: Aktualisieren Ihres Erweiterungslogos
Ihr Logo wird im Marketplace und im Widgetkatalog angezeigt, sobald ein Benutzer Ihre Erweiterung installiert.
Sie benötigen ein Katalogsymbol mit 98 x 98 Pixeln. Wählen Sie ein Bild aus, nennen Sie es logo.png, und platzieren Sie es im img Ordner. Sie können das Gewünschte Bild benennen, solange das Erweiterungsmanifest im nächsten Schritt mit dem von Ihnen verwendeten Namen aktualisiert wird.
Schritt 5: Erstellen Des Erweiterungsmanifests
Jede Erweiterung muss über eine Erweiterungsmanifestdatei verfügen. Erstellen Sie eine json-Datei mit dem Namen vss-extension.json im Verzeichnis home mit folgendem Inhalt:
{
"manifestVersion": 1,
"id": "azure-devops-extensions-myExtensions",
"version": "1.0.0",
"name": "My First Set of Widgets",
"description": "Samples containing different widgets extending dashboards",
"publisher": "fabrikam",
"categories": ["Azure Boards"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"icons": {
"default": "img/logo.png"
},
"contributions": [
{
"id": "HelloWorldWidget",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog"
],
"properties": {
"name": "Hello World Widget",
"description": "My first widget",
"catalogIconUrl": "img/CatalogIcon.png",
"previewImageUrl": "img/preview.png",
"uri": "hello-world.html",
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 2
}
],
"supportedScopes": ["project_team"]
}
}
],
"files": [
{
"path": "hello-world.html",
"addressable": true
},
{
"path": "sdk/scripts",
"addressable": true
},
{
"path": "img",
"addressable": true
}
]
}
Die vss-extension.json Datei sollte immer im Stammverzeichnis des Home-Verzeichnisses liegen. Für alle anderen Dateien können Sie sie in beliebiger Struktur im Ordner platzieren, achten Sie jedoch darauf, dass Sie die Verweise in den HTML-Dateien und im vss-extension.json-Manifest entsprechend aktualisieren.
Weitere Informationen zu den erforderlichen Attributen finden Sie in der Referenz zum Erweiterungsmanifest.
Hinweis
Ändern Sie publisher in den Namen Ihres Herausgebers. Informationen zum Erstellen eines Herausgebers finden Sie unter Paket, Veröffentlichen, Installieren.
Symbole
Die icons Stanza gibt den Pfad zum Symbol Ihrer Erweiterung in Ihrem Manifest an.
Beiträge
Jeder Beitragseintrag definiert Eigenschaften.
Der
id, um Ihren Beitrag zu identifizieren. Diese ID sollte innerhalb einer Erweiterung eindeutig sein. Diese ID sollte mit dem Namen übereinstimmen, den Sie in Schritt 3 zum Registrieren Ihres Widgets verwendet haben.Der
typedes Beitrags. Für alle Widgets sollte der Typ seinms.vss-dashboards-web.widget.Das Array
targets, zu dem der Beitrag geleistet wird. Für alle Widgets sollte das Ziel[ms.vss-dashboards-web.widget-catalog]sein.Diese
propertiessind Objekte, die Eigenschaften für den Beitragstyp enthalten. Für Widgets sind die folgenden Eigenschaften obligatorisch:Eigenschaft Beschreibung nameName des Widgets, das im Widgetkatalog angezeigt werden soll. descriptionBeschreibung des Widgets, das im Widgetkatalog angezeigt werden soll. catalogIconUrlRelativer Pfad des Katalogsymbols, das Sie in Schritt 4 hinzugefügt haben, um es im Widgetkatalog anzuzeigen. Das Bild sollte 98 x 98 Pixel betragen. Wenn Sie eine andere Ordnerstruktur oder einen anderen Dateinamen verwendet haben, geben Sie hier den entsprechenden relativen Pfad an. previewImageUrlRelativer Pfad des Vorschaubilds, das Sie in Schritt 4 hinzugefügt haben, zum Anzeigen im Widgetkatalog. Das Bild sollte 330 x 160 Pixel betragen. Wenn Sie eine andere Ordnerstruktur oder einen anderen Dateinamen verwendet haben, geben Sie hier den entsprechenden relativen Pfad an. uriRelativer Pfad der HTML-Datei, die Sie in Schritt 1 hinzugefügt haben. Wenn Sie eine andere Ordnerstruktur oder einen anderen Dateinamen verwendet haben, geben Sie hier den entsprechenden relativen Pfad an. supportedSizesArray von Größen, die von Ihrem Widget unterstützt werden. Wenn ein Widget mehrere Größen unterstützt, ist die erste Größe im Array die Standardgröße des Widgets. Wird widget sizefür die Zeilen und Spalten angegeben, die vom Widget im Dashboardraster belegt werden. Eine Zeile/Spalte entspricht 160 px. Jede Dimension, die größer als 1x1 ist, erhält zusätzliche 10 px, die den Abstand zwischen Widgets darstellen. Beispielsweise ist ein 3x2-Widget160*3+10*2breit und160*2+10*1hoch. Die maximal unterstützte Größe beträgt 4 x 4.supportedScopesDerzeit werden nur Teamdashboards unterstützt. Der Wert muss project_teamsein. Zukünftige Updates können weitere Optionen für Dashboardbereiche enthalten.
Weitere Informationen zu Beitragspunkten finden Sie unter Erweiterbarkeitspunkte.
Dateien
Die files Stanza gibt die Dateien an, die Sie in Ihr Paket aufnehmen möchten: Ihre HTML-Seite, Ihre Skripts, das SDK-Skript und Ihr Logo.
Stellen Sie addressable auf true ein, es sei denn, Sie schließen andere Dateien ein, die nicht URL-adressierbar sein müssen.
Hinweis
Weitere Informationen zur Erweiterungsmanifestdatei, z. B. zu ihren Eigenschaften und deren Funktionsweise, finden Sie in der Erweiterungsmanifestreferenz.
Schritt 6: Packen, Veröffentlichen und Freigeben
Nachdem Sie Ihre schriftliche Erweiterung erstellt haben, besteht der nächste Schritt, um sie in den Marketplace zu bringen, darin, alle Ihre Dateien zusammenzupacken. Alle Erweiterungen werden als VSIX 2.0-kompatible VSIX-Dateien verpackt. Microsoft stellt eine plattformübergreifende Befehlszeilenschnittstelle (CLI) bereit, um Ihre Erweiterung zu verpacken.
Abrufen des Paketerstellungstools
Sie können die tfx-cli mithilfe npmeiner Komponente von Node.jsüber die Befehlszeile installieren oder aktualisieren.
npm i -g tfx-cli
Verpacken Sie Ihre Erweiterung
Das Packen der Erweiterung in eine VSIX-Datei ist mühelos, sobald Sie über die tfx-cli verfügen. Wechseln Sie zum Basisverzeichnis Ihrer Erweiterung, und führen Sie den folgenden Befehl aus.
tfx extension create --manifest-globs vss-extension.json
Hinweis
Bei jedem Update muss eine Erweiterungs-/Integrationsversion gesteigert werden.
Wenn Sie eine vorhandene Erweiterung aktualisieren, aktualisieren Sie entweder die Version im Manifest oder übergeben Sie den Befehlszeilenschalter --rev-version. Dadurch wird die Patchversionsnummer Ihrer Erweiterung erhöht und die neue Version in Ihrem Manifest gespeichert.
Nachdem Sie Die Erweiterung in einer VSIX-Datei verpackt haben, können Sie Ihre Erweiterung auf dem Marketplace veröffentlichen.
Erstellen eines Herausgebers für die Erweiterung
Alle Erweiterungen, einschließlich Erweiterungen von Microsoft, werden als von einem Herausgeber bereitgestellt identifiziert. Wenn Sie noch kein Mitglied eines vorhandenen Herausgebers sind, erstellen Sie eins.
Melden Sie sich beim Visual Studio Marketplace-Veröffentlichungsportal an.
Wenn Sie noch kein Mitglied eines vorhandenen Herausgebers sind, müssen Sie einen Herausgeber erstellen. Wenn Sie bereits über einen Herausgeber verfügen, scrollen Sie zu Veröffentlichungserweiterungen unter Verwandte Websites, und wählen Sie es aus.
- Geben Sie einen Bezeichner für Ihren Herausgeber an, z. B. "mycompany-myteam".
- Der Bezeichner wird als Wert für das Attribut in der
publisherManifestdatei Ihrer Erweiterungen verwendet.
- Der Bezeichner wird als Wert für das Attribut in der
- Geben Sie einen Anzeigenamen für Ihren Herausgeber an, z. B. "Mein Team".
- Geben Sie einen Bezeichner für Ihren Herausgeber an, z. B. "mycompany-myteam".
Überprüfen Sie die Marketplace-Herausgebervereinbarung und wählen Sie Erstellen aus.
Jetzt ist Ihr Herausgeber definiert. In einer zukünftigen Version können Sie Berechtigungen zum Anzeigen und Verwalten der Erweiterungen Ihres Herausgebers erteilen.
Die Veröffentlichungserweiterungen unter einem gemeinsamen Herausgeber vereinfachen den Prozess für Teams und Organisationen und bieten einen sichereren Ansatz. Diese Methode beseitigt die Notwendigkeit, eine einzelne Gruppe von Anmeldeinformationen unter mehreren Benutzern zu verteilen, wodurch die Sicherheit verbessert wird.
Aktualisieren Sie die vss-extension.json Manifestdatei in den Beispielen, um die Dummy Publisher ID fabrikam durch Ihre Herausgeber-ID zu ersetzen.
Veröffentlichen und Freigeben der Erweiterung
Jetzt können Sie Ihre Erweiterung auf den Marketplace hochladen.
Wählen Sie Neue Erweiterung hochladen, wechseln Sie zu Ihrer verpackten VSIX-Datei, und wählen Sie Hochladen aus.
Sie können Ihre Erweiterung auch über die Befehlszeile hochladen, indem Sie den tfx extension publish-Befehl anstelle des tfx extension create-Befehls verwenden, um Ihre Erweiterung in einem Schritt zu packen und zu veröffentlichen. Sie können optional --share-with verwenden, um Ihre Erweiterung nach der Veröffentlichung mit einem oder mehreren Konten zu teilen. Sie benötigen auch ein persönliches Zugriffstoken.
tfx extension publish --manifest-globs your-manifest.json --share-with yourOrganization
Schritt 7: Hinzufügen eines Widgets aus dem Katalog
Melden Sie sich bei Ihrem Projekt an,
http://dev.azure.com/{Your_Organization}/{Your_Project}.Wählen Sie Übersicht>Dashboards aus.
Wählen Sie "Widget hinzufügen" aus.
Markieren Sie Ihr Widget, und wählen Sie dann Hinzufügen aus.
Das Widget wird auf Ihrem Dashboard angezeigt.
Teil 2: Hallo Welt mit der Azure DevOps-REST-API
Widgets können jede der REST-APIs in Azure DevOps aufrufen, um mit Azure DevOps-Ressourcen zu interagieren.
Im folgenden Beispiel verwenden wir die REST-API für WorkItemTracking, um Informationen zu einer vorhandenen Abfrage abzurufen und einige Abfrageinformationen im Widget unter dem Text "Hello World " anzuzeigen.
Schritt 1: Hinzufügen einer HTML-Datei
Kopieren Sie die Datei hello-world.html aus dem vorherigen Beispiel, und benennen Sie die Kopie in hello-world2.html um. Ihr Ordner sieht nun wie im folgenden Beispiel aus:
|--- README.md
|--- node_modules
|--- SDK
|--- scripts
|--- VSS.SDK.min.js
|--- img
|--- logo.png
|--- scripts
|--- hello-world.html // html page to be used for your widget
|--- hello-world2.html // renamed copy of hello-world.html
|--- vss-extension.json // extension's manifest
Um die Abfrageinformationen zu umfassen, fügen Sie ein neues div-Element unter dem h2 hinzu.
Aktualisieren Sie den Namen des Widgets von HelloWorldWidget in HelloWorldWidget2 der Zeile, in der Sie aufrufen VSS.register.
Mit dieser Aktion kann das Framework das Widget innerhalb der Erweiterung eindeutig identifizieren.
<!DOCTYPE html>
<html>
<head>
<script src="sdk/scripts/VSS.SDK.min.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require("TFS/Dashboards/WidgetHelpers", function (WidgetHelpers) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("HelloWorldWidget2", function () {
return {
load: function (widgetSettings) {
var $title = $('h2.title');
$title.text('Hello World');
return WidgetHelpers.WidgetStatusHelper.Success();
}
}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title"></h2>
<div id="query-info-container"></div>
</div>
</body>
</html>
Schritt 2: Zugreifen auf Azure DevOps-Ressourcen
Um den Zugriff auf Azure DevOps-Ressourcen zu ermöglichen, müssen Zugriffsbereiche im Erweiterungsmanifest angegeben werden. Wir fügen den vso.work Bereich zu unserem Manifest hinzu. Dieser Bereich gibt an, dass das Widget schreibgeschützten Zugriff auf Abfragen und Arbeitselemente benötigt. Um alle verfügbaren Bereiche anzuzeigen, siehe Bereiche.
Fügen Sie am Ende des Erweiterungsmanifests den folgenden Code hinzu:
{
"scopes":[
"vso.work"
]
}
Um andere Eigenschaften einzuschließen, sollten Sie sie explizit auflisten, z. B.:
{
"name": "example-widget",
"publisher": "example-publisher",
"version": "1.0.0",
"scopes": [
"vso.work"
]
}
Warnung
Das Hinzufügen oder Ändern von Bereichen nach dem Veröffentlichen einer Erweiterung wird derzeit nicht unterstützt. Wenn Sie Ihre Erweiterung bereits hochgeladen haben, entfernen Sie sie aus dem Marketplace. Wechseln Sie zum Visual Studio Marketplace-Veröffentlichungsportal, wählen Sie Ihre Erweiterung mit der rechten Maustaste aus, und wählen Sie "Entfernen" aus.
Schritt 3: Durchführen des REST-API-Aufrufs
Es gibt viele clientseitige Bibliotheken, auf die über das SDK zugegriffen werden kann, um REST-API-Aufrufe in Azure DevOps zu tätigen. Diese Bibliotheken werden als REST-Clients bezeichnet und sind JavaScript-Wrapper für Ajax-Aufrufe für alle verfügbaren serverseitigen Endpunkte. Sie können von diesen Clients bereitgestellte Methoden verwenden, anstatt Ajax-Aufrufe selbst zu schreiben. Diese Methoden ordnen die API-Antworten Objekten zu, die Ihr Code nutzen kann.
Aktualisieren Sie in diesem Schritt den Aufruf von VSS.require zum Laden von AzureDevOps/WorkItemTracking/RestClient, der den WorkItemTracking-REST-Client bereitstellt. Sie können diesen REST-Client verwenden, um Informationen über eine Abfrage namens Feedback im Ordner Shared Queries abzurufen.
Erstellen Sie innerhalb der Funktion, die Sie an VSS.register übergeben, eine Variable, um die aktuelle Projekt-ID zu speichern. Sie benötigen diese Variable, um die Abfrage abzurufen. Erstellen Sie außerdem eine neue Methode getQueryInfo , um den REST-Client zu verwenden. Diese Methode wird dann von der Lademethode aufgerufen.
Die Methode getClient gibt eine Instanz des benötigten REST-Clients an. Die -Methode getQuery gibt die Abfrage zurück, die mit einer Zusage umschlossen ist.
Das aktualisierte VSS.require sieht wie folgt aus:
VSS.require(["AzureDevOps/Dashboards/WidgetHelpers", "AzureDevOps/WorkItemTracking/RestClient"],
function (WidgetHelpers, TFS_Wit_WebApi) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("HelloWorldWidget2", function () {
var projectId = VSS.getWebContext().project.id;
var getQueryInfo = function (widgetSettings) {
// Get a WIT client to make REST calls to Azure DevOps Services
return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
.then(function (query) {
// Do something with the query
return WidgetHelpers.WidgetStatusHelper.Success();
}, function (error) {
return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
});
}
return {
load: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text('Hello World');
return getQueryInfo(widgetSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
Beachten Sie die Verwendung der Failure-Methode von WidgetStatusHelper. Damit können Sie dem Widgetframework angeben, dass ein Fehler aufgetreten ist, und die Standardfehlererfahrung nutzen, die für alle Widgets bereitgestellt wird.
Falls Sie die Feedback Abfrage nicht im Shared Queries Ordner haben, ersetzen Sie Shared Queries\Feedback im Code durch den Pfad einer Abfrage, die in Ihrem Projekt vorhanden ist.
Schritt 4: Anzeigen der Antwort
Der letzte Schritt besteht darin, die Abfrageinformationen innerhalb des Widgets zu rendern. Die getQuery Funktion gibt ein Objekt vom Typ Contracts.QueryHierarchyItem innerhalb einer Zusage zurück. In diesem Beispiel zeigen Sie die Abfrage-ID, den Abfragenamen und den Namen des Abfrageerstellers unter dem Text "Hello World " an.
Ersetzen Sie den // Do something with the query-Kommentar durch folgenden Code:
// Create a list with query details
var $list = $('<ul>');
$list.append($('<li>').text("Query Id: " + query.id));
$list.append($('<li>').text("Query Name: " + query.name));
$list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName : "<unknown>")));
// Append the list to the query-info-container
var $container = $('#query-info-container');
$container.empty();
$container.append($list);
Ihr endgültiges hello-world2.html sieht wie das folgende Beispiel aus:
<!DOCTYPE html>
<html>
<head>
<script src="sdk/scripts/VSS.SDK.min.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require(["AzureDevOps/Dashboards/WidgetHelpers", "AzureDevOps/WorkItemTracking/RestClient"],
function (WidgetHelpers, TFS_Wit_WebApi) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("HelloWorldWidget2", function () {
var projectId = VSS.getWebContext().project.id;
var getQueryInfo = function (widgetSettings) {
// Get a WIT client to make REST calls to Azure DevOps Services
return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
.then(function (query) {
// Create a list with query details
var $list = $('<ul>');
$list.append($('<li>').text("Query ID: " + query.id));
$list.append($('<li>').text("Query Name: " + query.name));
$list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName : "<unknown>")));
// Append the list to the query-info-container
var $container = $('#query-info-container');
$container.empty();
$container.append($list);
// Use the widget helper and return success as Widget Status
return WidgetHelpers.WidgetStatusHelper.Success();
}, function (error) {
// Use the widget helper and return failure as Widget Status
return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
});
}
return {
load: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text('Hello World');
return getQueryInfo(widgetSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title"></h2>
<div id="query-info-container"></div>
</div>
</body>
</html>
Schritt 5: Aktualisieren des Erweiterungsmanifests
In diesem Schritt aktualisieren wir das Erweiterungsmanifest so, dass es einen Eintrag für unser zweites Widget enthält.
Fügen Sie einen neuen Beitrag zum Array in der contributions-Eigenschaft hinzu und fügen Sie die neue Datei hello-world2.html dem Array in der Eigenschaft "files" hinzu.
Sie benötigen ein weiteres Vorschaubild für das zweite Widget. Benennen Sie dies preview2.png und platzieren Sie es im img Ordner.
{
...,
"contributions": [
...,
{
"id": "HelloWorldWidget2",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog"
],
"properties": {
"name": "Hello World Widget 2 (with API)",
"description": "My second widget",
"previewImageUrl": "img/preview2.png",
"uri": "hello-world2.html",
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 2
}
],
"supportedScopes": ["project_team"]
}
}
],
"files": [
{
"path": "hello-world.html",
"addressable": true
},
{
"path": "hello-world2.html",
"addressable": true
},
{
"path": "sdk/scripts",
"addressable": true
},
{
"path": "img",
"addressable": true
}
],
"scopes": [
"vso.work"
]
}
Schritt 6: Packen, Veröffentlichen und Freigeben
Verpacken, veröffentlichen und teilen Sie Ihre Erweiterung. Wenn Sie die Erweiterung bereits veröffentlicht haben, können Sie die Erweiterung neu verpacken und direkt auf den Marketplace aktualisieren.
Schritt 7: Hinzufügen eines Widgets aus dem Katalog
Wechseln Sie nun zu Ihrem Team-Dashboard bei https:\//dev.azure.com/{Your_Organization}/{Your_Project}. Wenn diese Seite bereits geöffnet ist, aktualisieren Sie sie.
Zeigen Sie mit der Maus auf "Bearbeiten" , und wählen Sie "Hinzufügen" aus. Der Widgetkatalog wird geöffnet, wo Sie das widget finden, das Sie installiert haben.
Um es zu Ihrem Dashboard hinzuzufügen, wählen Sie Ihr Widget aus und klicken Sie auf Hinzufügen.
Teil 3: Konfigurieren von Hallo Welt
In Teil 2 dieses Leitfadens haben Sie erfahren, wie Sie ein Widget erstellen, das Abfrageinformationen für eine fest kodierte Abfrage anzeigt. In diesem Teil fügen Sie die Möglichkeit hinzu, die zu verwendende Abfrage anstelle der hartcodierten Abfrage zu konfigurieren. Im Konfigurationsmodus wird dem Benutzer basierend auf seinen Änderungen eine Livevorschau des Widgets angezeigt. Diese Änderungen werden im Widget auf dem Dashboard gespeichert, wenn der Benutzer Speichern auswählt.
Schritt 1: Hinzufügen einer HTML-Datei
Implementierungen von Widgets und Widgetkonfigurationen sind viel gleich. Beide werden im Erweiterungsframework als Beiträge implementiert. Beide verwenden dieselbe SDK-Datei, VSS.SDK.min.js. Beide basieren auf HTML, JavaScript und CSS.
Kopieren Sie die Datei aus dem vorherigen Beispiel und benennen Sie die Kopie in um. Fügen Sie eine weitere HTML-Datei mit dem Namen hinzu configuration.html.
Ihr Ordner sieht nun wie im folgenden Beispiel aus:
|--- README.md
|--- sdk
|--- node_modules
|--- scripts
|--- VSS.SDK.min.js
|--- img
|--- logo.png
|--- scripts
|--- configuration.html
|--- hello-world.html // html page to be used for your widget
|--- hello-world2.html // renamed copy of hello-world.html
|--- hello-world3.html // renamed copy of hello-world2.html
|--- vss-extension.json // extension's manifest
Fügen Sie den folgenden HTML-Code in configuration.html hinzu. Im Grunde fügen Sie den obligatorischen Verweis auf die VSS.SDK.min.js Datei und ein select Element für das Dropdown hinzu, um eine Abfrage aus einer vordefinierten Liste auszuwählen.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="sdk/scripts/VSS.SDK.min.js"></script>
</head>
<body>
<div class="container">
<fieldset>
<label class="label">Query: </label>
<select id="query-path-dropdown" style="margin-top:10px">
<option value="" selected disabled hidden>Please select a query</option>
<option value="Shared Queries/Feedback">Shared Queries/Feedback</option>
<option value="Shared Queries/My Bugs">Shared Queries/My Bugs</option>
<option value="Shared Queries/My Tasks">Shared Queries/My Tasks</option>
</select>
</fieldset>
</div>
</body>
</html>
Schritt 2: Konfigurieren von JavaScript
Verwenden Sie JavaScript, um Inhalte in der Widgetkonfiguration genau so zu rendern wie wir es für das Widget in Schritt 3 von Teil 1 in diesem Leitfaden getan haben. Dieser JavaScript-Code rendert Inhalte, initialisiert das VSS SDK, ordnet den Code für Ihre Widgetkonfiguration dem Konfigurationsnamen zu und übergibt die Konfigurationseinstellungen an das Framework. In unserem Fall lädt der folgende Code die Widgetkonfiguration.
Öffnen Sie die Datei configuration.html und das folgende <script>-Element für das <head>.
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require(["AzureDevOps/Dashboards/WidgetHelpers"], function (WidgetHelpers) {
VSS.register("HelloWorldWidget.Configuration", function () {
var $queryDropdown = $("#query-path-dropdown");
return {
load: function (widgetSettings, widgetConfigurationContext) {
var settings = JSON.parse(widgetSettings.customSettings.data);
if (settings && settings.queryPath) {
$queryDropdown.val(settings.queryPath);
}
return WidgetHelpers.WidgetStatusHelper.Success();
},
onSave: function() {
var customSettings = {
data: JSON.stringify({
queryPath: $queryDropdown.val()
})
};
return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
</script>
VSS.init,VSS.requireundVSS.registerspielen dieselbe Rolle wie für das Widget, wie in Teil 1 beschrieben. Der einzige Unterschied besteht darin, dass bei Widgetkonfigurationen die übergebeneVSS.registerFunktion ein Objekt zurückgeben soll, das denIWidgetConfigurationVertrag erfüllt.Die
loadEigenschaft desIWidgetConfigurationVertrags sollte eine Funktion als Wert haben. Diese Funktion verfügt über die Schritte zum Rendern der Widgetkonfiguration. In unserem Fall soll der ausgewählte Wert des Dropdownelements mit den vorhandenen Einstellungen aktualisiert werden, sofern diese existieren. Diese Funktion wird aufgerufen, wenn das Framework Ihre Instanziierungwidget configurationDie
onSaveEigenschaft desIWidgetConfigurationVertrags sollte eine Funktion als Wert haben. Diese Funktion wird vom Framework aufgerufen, wenn der Benutzer im Konfigurationsbereich Speichern auswählt. Wenn die Benutzereingabe bereit ist, sie zu speichern, serialisieren Sie sie in eine Zeichenfolge, bilden Sie dascustom settings-Objekt und verwenden SieWidgetConfigurationSave.Valid()um die Benutzereingabe zu speichern.
In dieser Anleitung verwenden wir JSON, um die Benutzereingabe in eine Zeichenfolge zu serialisieren. Sie können eine beliebige andere Möglichkeit auswählen, um die Benutzereingabe in Zeichenfolge zu serialisieren.
Der Zugriff auf das Widget erfolgt über die CustomSettings-Eigenschaft des WidgetSettings-Objekts.
Das Widget muss deserialisiert werden, was in Schritt 4 behandelt wird.
Schritt 3: Aktivieren der Livevorschau – JavaScript
Um livevorschauupdates zu aktivieren, wenn der Benutzer eine Abfrage aus der Dropdownliste auswählt, fügen Sie der Schaltfläche einen Änderungsereignishandler hinzu. Dieser Handler benachrichtigt das Framework, dass die Konfiguration geändert wurde.
Es übergibt auch den, der customSettings zum Aktualisieren der Vorschau verwendet werden soll. Um das Framework zu benachrichtigen, muss die notify -Methode für aufgerufen widgetConfigurationContext werden. Es benötigt zwei Parameter: den Namen des Ereignisses, der in diesem Fall WidgetHelpers.WidgetEvent.ConfigurationChange ist, und ein Objekt für das Ereignis EventArgs, das mit Hilfe der Hilfsmethode customSettings aus WidgetEvent.Args erstellt wurde.
Fügen Sie den folgenden Code in die Funktion ein, die der load Eigenschaft zugewiesen ist.
$queryDropdown.on("change", function () {
var customSettings = {
data: JSON.stringify({
queryPath: $queryDropdown.val()
})
};
var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
widgetConfigurationContext.notify(eventName, eventArgs);
});
Stellen Sie sicher, dass das Framework mindestens einmal über die Konfigurationsänderung benachrichtigt wird, um die Schaltfläche " Speichern " zu aktivieren.
Am Ende sieht Ihr configuration.html wie das folgende Beispiel aus:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="sdk/scripts/VSS.SDK.min.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require(["AzureDevOps/Dashboards/WidgetHelpers"], function (WidgetHelpers) {
VSS.register("HelloWorldWidget.Configuration", function () {
var $queryDropdown = $("#query-path-dropdown");
return {
load: function (widgetSettings, widgetConfigurationContext) {
var settings = JSON.parse(widgetSettings.customSettings.data);
if (settings && settings.queryPath) {
$queryDropdown.val(settings.queryPath);
}
$queryDropdown.on("change", function () {
var customSettings = {data: JSON.stringify({queryPath: $queryDropdown.val()})};
var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
widgetConfigurationContext.notify(eventName, eventArgs);
});
return WidgetHelpers.WidgetStatusHelper.Success();
},
onSave: function() {
var customSettings = {data: JSON.stringify({queryPath: $queryDropdown.val()})};
return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="container">
<fieldset>
<label class="label">Query: </label>
<select id="query-path-dropdown" style="margin-top:10px">
<option value="" selected disabled hidden>Please select a query</option>
<option value="Shared Queries/Feedback">Shared Queries/Feedback</option>
<option value="Shared Queries/My Bugs">Shared Queries/My Bugs</option>
<option value="Shared Queries/My Tasks">Shared Queries/My Tasks</option>
</select>
</fieldset>
</div>
</body>
</html>
Schritt 4: Implementieren des Neuladens im Widget – JavaScript
Richten Sie die Widgetkonfiguration ein, um den vom Benutzer ausgewählten Abfragepfad zu speichern.
Sie müssen nun den Code im Widget aktualisieren, um diese gespeicherte Konfiguration anstelle der hartcodierten Shared Queries/Feedback aus dem vorherigen Beispiel zu verwenden.
Öffnen Sie die Datei hello-world3.html , und aktualisieren Sie den Namen des Widgets von HelloWorldWidget2 in HelloWorldWidget3 der Zeile, in der Sie aufrufen VSS.register.
Mit dieser Aktion kann das Framework das Widget innerhalb der Erweiterung eindeutig identifizieren.
Die über zugeordnete HelloWorldWidget3VSS.register Funktion gibt derzeit ein Objekt zurück, das den IWidget Vertrag erfüllt.
Da unser Widget jetzt konfiguriert werden muss, muss diese Funktion aktualisiert werden, um ein Objekt zurückzugeben, das den IConfigurableWidget-Vertragsbedingungen entspricht.
Aktualisieren Sie hierzu die return-Anweisung, um gemäß dem folgenden Code eine Eigenschaft namens „reload“ einzuschließen. Der Wert für diese Eigenschaft ist eine Funktion, die die getQueryInfo Methode einmal mehr aufruft.
Diese Neulademethode wird vom Framework jedes Mal aufgerufen, wenn sich die Benutzereingabe ändert, um die Livevorschau anzuzeigen. Diese Reload-Methode wird auch aufgerufen, wenn die Konfiguration gespeichert wird.
return {
load: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text('Hello World');
return getQueryInfo(widgetSettings);
},
reload: function (widgetSettings) {
return getQueryInfo(widgetSettings);
}
}
Der hartcodierte Abfragepfad in getQueryInfo sollte durch den konfigurierten Abfragepfad ersetzt werden, der aus dem Parameter widgetSettings extrahiert werden kann, der an die Methode übergeben wird.
Fügen Sie den folgenden Code ganz am Anfang der getQueryInfo-Methode hinzu und ersetzen Sie den hartcodierten Abfragepfad durch settings.queryPath.
var settings = JSON.parse(widgetSettings.customSettings.data);
if (!settings || !settings.queryPath) {
var $container = $('#query-info-container');
$container.empty();
$container.text("Sorry nothing to show, please configure a query path.");
return WidgetHelpers.WidgetStatusHelper.Success();
}
Jetzt ist Ihr Widget bereit zur Darstellung mit den konfigurierten Einstellungen.
Sowohl die load -Eigenschaft als auch die reload -Eigenschaft haben eine ähnliche Funktion. Dies ist für die meisten einfachen Widgets der Fall.
Bei komplexen Widgets gibt es bestimmte Vorgänge, die Sie nur einmal ausführen möchten, unabhängig davon, wie oft sich die Konfiguration ändert.
Oder es gibt einige schwergewichtige Vorgänge, die nicht mehr als einmal ausgeführt werden müssen. Solche Vorgänge sind Teil der Funktion, die der load Eigenschaft und nicht der reload Eigenschaft entspricht.
Schritt 5: Aktualisieren des Erweiterungsmanifests
Öffnen Sie die vss-extension.json Datei, um zwei neue Einträge in das Array in der contributions Eigenschaft einzuschließen: eine für das HelloWorldWidget3 Widget und die andere für die Konfiguration.
Sie benötigen ein weiteres Vorschaubild für das dritte Widget. Benennen Sie dies preview3.png und platzieren Sie es im img Ordner.
Aktualisieren Sie das Array in der files Eigenschaft so, dass sie die beiden neuen HTML-Dateien enthält, die Sie in diesem Beispiel hinzugefügt haben.
{
...
"contributions": [
... ,
{
"id": "HelloWorldWidget3",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog",
"fabrikam.azuredevops-extensions-myExtensions.HelloWorldWidget.Configuration"
],
"properties": {
"name": "Hello World Widget 3 (with config)",
"description": "My third widget",
"previewImageUrl": "img/preview3.png",
"uri": "hello-world3.html",
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 2
}
],
"supportedScopes": ["project_team"]
}
},
{
"id": "HelloWorldWidget.Configuration",
"type": "ms.vss-dashboards-web.widget-configuration",
"targets": [ "ms.vss-dashboards-web.widget-configuration" ],
"properties": {
"name": "HelloWorldWidget Configuration",
"description": "Configures HelloWorldWidget",
"uri": "configuration.html"
}
}
],
"files": [
{
"path": "hello-world.html", "addressable": true
},
{
"path": "hello-world2.html", "addressable": true
},
{
"path": "hello-world3.html", "addressable": true
},
{
"path": "configuration.html", "addressable": true
},
{
"path": "sdk/scripts", "addressable": true
},
{
"path": "img", "addressable": true
}
],
...
}
Der Beitrag für die Widgetkonfiguration folgt einem etwas anderen Modell als dem Widget selbst. Ein Beitragseintrag für die Widgetkonfiguration hat Folgendes:
- Der
id, um Ihren Beitrag zu identifizieren. Die ID sollte innerhalb einer Erweiterung eindeutig sein. - Der
typedes Beitrags. Für alle Widgetkonfigurationen, sollte esms.vss-dashboards-web.widget-configurationsein. - Das Array
targets, zu dem der Beitrag geleistet wird. Für alle Widgetkonfigurationen hat es einen einzigen Eintrag:ms.vss-dashboards-web.widget-configuration. - Der
propertiesenthält eine Reihe von Eigenschaften, darunter Name, Beschreibung und den URI der HTML-Datei, die für die Konfiguration verwendet wird.
Um die Konfiguration zu unterstützen, muss auch der Widgetbeitrag geändert werden. Das Array von targets für das Widget muss aktualisiert werden, um die ID für die Konfiguration in der folgenden Form einzuschließen:
<publisher>.<id for the extension>.<id for the configuration contribution>
In diesem Fall lautet das Beispiel:
fabrikam.vsts-extensions-myExtensions.HelloWorldWidget.Configuration
Warnung
Wenn der Beitragseintrag für Ihr konfigurierbares Widget nicht auf die Konfiguration mit dem richtigen Herausgeber- und Erweiterungsnamen ausgerichtet ist, wie zuvor beschrieben, wird die Schaltfläche Konfigurieren für das Widget nicht angezeigt.
Am Ende dieses Teils sollte die Manifestdatei drei Widgets und eine Konfiguration enthalten. Die vollständige Beispielmanifestdatei finden Sie unter vss-extension.json.
Schritt 6: Packen, Veröffentlichen und Freigeben
Wenn Ihre Erweiterung nicht veröffentlicht ist, lesen Sie Schritt 6: Packen, Veröffentlichen und Freigeben. Wenn Sie die Erweiterung bereits veröffentlicht haben, können Sie die Erweiterung neu verpacken und direkt auf den Marketplace aktualisieren.
Schritt 7: Hinzufügen eines Widgets aus dem Katalog
Wechseln Sie nun zu Ihrem Team-Dashboard bei https://dev.azure.com/{Your_Organization}/{Your_Project}. Wenn diese Seite bereits geöffnet ist, aktualisieren Sie sie.
Zeigen Sie mit der Maus auf "Bearbeiten" , und wählen Sie "Hinzufügen" aus. Diese Aktion sollte den Widgetkatalog öffnen, in dem Sie das von Ihnen installierte Widget finden.
Um das Widget zu Ihrem Dashboard hinzuzufügen, wählen Sie Ihr Widget und anschließend Hinzufügen aus.
Eine Nachricht ähnlich der folgenden, fordert Sie auf, das Widget zu konfigurieren.
Es gibt zwei Möglichkeiten, Widgets zu konfigurieren. Zeigen Sie auf das Widget, wählen Sie die Auslassungspunkte aus, die in der oberen rechten Ecke angezeigt werden, und wählen Sie anschließend Konfigurieren aus. Zum anderen wählen Sie unten rechts im Dashboard die Schaltfläche Bearbeiten und dann die Schaltfläche Konfigurieren aus, die in der oberen rechten Ecke des Widgets angezeigt wird. Entweder öffnet die Konfigurationsoberfläche auf der rechten Seite und eine Vorschau Ihres Widgets in der Mitte.
Wählen Sie eine Abfrage aus der Dropdownliste aus. Die Livevorschau zeigt die aktualisierten Ergebnisse an. Wählen Sie Speichern aus, und Ihr Widget zeigt die aktualisierten Ergebnisse an.
Schritt 8: Konfigurieren von mehr (optional)
Sie können beliebig viele HTML-Formularelemente configuration.html für weitere Konfigurationen hinzufügen.
Es gibt zwei konfigurierbare Features, die sofort verfügbar sind: Widgetname und Widgetgröße.
Standardmäßig wird der Name, den Sie für Ihr Widget im Erweiterungsmanifest angeben, als Widgetname für jede Instanz Ihres Widgets gespeichert, die jemals einem Dashboard hinzugefügt wird.
Sie können Benutzern die Konfiguration gestatten, damit sie jeden gewünschten Namen zu deren Instanz Ihres Widgets hinzufügen können.
Um eine solche Konfiguration zuzulassen, fügen Sie isNameConfigurable:true im Eigenschaftenabschnitt für Ihr Widget im Erweiterungsmanifest hinzu.
Wenn Sie im Erweiterungsmanifest mehrere Einträge für Ihr Widget im supportedSizes-Array angeben, können Benutzer auch die Größe des Widgets konfigurieren.
Das Erweiterungsmanifest für das dritte Beispiel in diesem Leitfaden würde wie im folgenden Beispiel aussehen, wenn Sie den Widgetnamen und die Größenkonfiguration aktivieren:
{
...
"contributions": [
... ,
{
"id": "HelloWorldWidget3",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog",
"fabrikam.azuredevops-extensions-myExtensions.HelloWorldWidget.Configuration"
],
"properties": {
"name": "Hello World Widget 3 (with config)",
"description": "My third widget",
"previewImageUrl": "img/preview3.png",
"uri": "hello-world3.html",
"isNameConfigurable": true,
"supportedSizes": [
{
"rowSpan": 1,
"columnSpan": 2
},
{
"rowSpan": 2,
"columnSpan": 2
}
],
"supportedScopes": ["project_team"]
}
},
...
]
}
Packen Sie Ihre Erweiterung neu, und aktualisieren Sie sie. Aktualisieren Sie das Dashboard mit diesem Widget (Hallo Welt Widget 3 (mit Konfiguration)). Öffnen Sie den Konfigurationsmodus für Ihr Widget. Sie sollten jetzt in der Lage sein, die Option zum Ändern des Widgetnamens und der Größe anzuzeigen.
Wählen Sie eine andere Größe aus der Dropdownliste aus. Die Größe der Livevorschau wird geändert. Speichern Sie die Änderung, und das Widget auf dem Dashboard wird ebenfalls geändert.
Das Ändern des Namens des Widgets führt nicht zu einer sichtbaren Änderung des Widgets, da unsere Beispiel-Widgets den Widgetnamen nicht an einer beliebigen Stelle anzeigen.
Ändern Sie den Beispielcode so, dass der Widgetname anstelle des hartcodierten Texts "Hello World " angezeigt wird, indem Sie den hartcodierten Text "Hello World " durch widgetSettings.name die Zeile ersetzen, in der Sie den Text des h2 Elements festlegen.
Diese Aktion stellt sicher, dass der Widgetname jedes Mal angezeigt wird, wenn das Widget beim Aktualisieren der Seite geladen wird.
Da die Livevorschau jedes Mal aktualisiert werden soll, wenn sich die Konfiguration ändert, sollten Sie auch den gleichen Code im reload Teil Ihres Codes hinzufügen.
Die endgültige Rückgabe-Anweisung in hello-world3.html lautet wie folgt:
return {
load: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text(widgetSettings.name);
return getQueryInfo(widgetSettings);
},
reload: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text(widgetSettings.name);
return getQueryInfo(widgetSettings);
}
}
Packen Sie Ihre Erweiterung neu, und aktualisieren Sie sie erneut. Aktualisieren Sie das Dashboard mit diesem Widget.
Bei Änderungen am Widgetnamen aktualisieren Sie im Konfigurationsmodus jetzt den Widgettitel.