Irányítópult-vezérlő hozzáadása
Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019
Az irányítópulton lévő widgetek a bővítmény-keretrendszerben való közreműködésként vannak implementálva. Egyetlen bővítmény több hozzájárulással is rendelkezhet. Megtudhatja, hogyan hozhat létre bővítményt több widgettel hozzájárulásként.
Ez a cikk három részre oszlik, mindegyik az előzőre épül – egy egyszerű widgettel kezdődik, és átfogó widgettel végződik.
Tipp.
Tekintse meg a bővítményfejlesztéssel kapcsolatos legújabb dokumentációnkat az Azure DevOps Extension SDK használatával.
Az oktatóanyag előkészítése és szükséges beállítása
Az Azure DevOpshoz vagy a TFS-hez szükséges bővítmények létrehozásához szükség van néhány előfeltételként szolgáló szoftverre és eszközre:
Tudás: A widgetek fejlesztéséhez javaScript- és HTML-, CSS-ismeretekre van szükség.
- Az Azure DevOps egy szervezete a widget telepítéséhez és teszteléséhez, további információt itt talál .
- Szövegszerkesztő. Számos oktatóanyaghoz használtuk
Visual Studio Code
, amelyek innen tölthetők le - A csomópont legújabb verziója, amely innen tölthető le
- Platformfüggetlen CLI az Azure DevOpshoz (tfx-cli) a bővítmények csomagolásához.
- A tfx-cli a Node.js egyik összetevőjének használatával
npm
telepíthető anpm i -g tfx-cli
- A tfx-cli a Node.js egyik összetevőjének használatával
- A projekt kezdőlapja. Ezt a könyvtárat
home
az oktatóanyag során nevezik.
Bővítményfájl-struktúra:
|--- 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
Az oktatóanyagban található adatok
- Az útmutató első része bemutatja, hogyan hozhat létre új widgetet, amely egy egyszerű ""Helló világ!" alkalmazás" üzenetet nyomtat ki.
- A második rész az elsőre épül, ha egy hívást ad hozzá egy Azure DevOps REST API-hoz.
- A harmadik rész bemutatja, hogyan adhat hozzá konfigurációt a widgethez.
Megjegyzés:
Ha siet, és azonnal rá szeretné venni a kezét a kódra, itt töltheti le a mintákat.
Miután letöltötte, lépjen a mappába, majd kövesse közvetlenül a widgets
6. és a 7. lépést a mintakiterjesztés közzétételéhez, amely három különböző összetettségű minta widgettel rendelkezik.
Ismerkedjen meg néhány alapvető stílussal a widgetekhez , amelyeket a dobozból biztosítunk Önnek, és néhány útmutatást a widgetek szerkezetéhez.
1. rész: "Helló világ!" alkalmazás
Ez a rész egy widgetet mutat be, amely JavaScript használatával nyomtatja a ""Helló világ!" alkalmazás" szöveget.
1. lépés: Az ügyfél SDK lekérése – VSS.SDK.min.js
Az alapvető SDK-szkript lehetővé teszi, VSS.SDK.min.js
hogy a webbővítmények kommunikáljanak a gazdagép Azure DevOps-keretével. A szkript olyan műveleteket végez, mint az inicializálás, a bővítmény értesítése vagy az aktuális lap környezetének lekérése.
Szerezze be az Ügyfél SDK-fájlt VSS.SDK.min.js
, és adja hozzá a webalkalmazáshoz. Helyezze a home/sdk/scripts
mappába.
Az SDK lekéréséhez használja az "npm install" parancsot:
npm install vss-web-extension-sdk
Az SDK-val kapcsolatos további információkért látogasson el az Ügyfél SDK GitHub-oldalára.
2. lépés: A HTML-oldal – hello-world.html
A HTML-oldal az elrendezést összetartó kötőanyag, amely a CSS-re és a JavaScriptre mutató hivatkozásokat tartalmaz.
Bármit elnevezhet ennek a fájlnak, csak mindenképpen frissítse az összes hivatkozását hello-world
a használt névvel.
A widget HTML-alapú, és iframe-ben van üzemeltetve.
Adja hozzá az alábbi HTML-t a következőben hello-world.html
: . Hozzáadjuk a kötelező fájlhivatkozástVSS.SDK.min.js
, és belefoglalunk egy h2
elemet a következő lépésben a "Helló világ!" alkalmazás sztringgel frissítve.
<!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>
Annak ellenére, hogy HTML-fájlt használunk, a keretrendszer figyelmen kívül hagyja a szkripten és a hivatkozáson kívüli HTML-fejelemek többségét.
3. lépés: A JavaScript
JavaScript használatával rendereljük a tartalmat a widgetben. Ebben a cikkben az összes JavaScript-kódot a HTML-fájl egy <script>
elemében burkoljuk. Ezt a kódot külön JavaScript-fájlban is használhatja, és hivatkozhat rá a HTML-fájlban.
A kód megjeleníti a tartalmat. Ez a JavaScript-kód inicializálja a VSS SDK-t is, leképezi a widget kódját a widget nevére, és értesíti a widgetek sikeres vagy sikertelen bővítmény-keretrendszerét.
A mi esetünkben az alábbi kód jelenik meg, amely a ""Helló világ!" alkalmazás" szöveget nyomtatná a widgetben. Adja hozzá ezt az script
elemet a head
HTML-fájlhoz.
<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.init
inicializálja a kézfogást a widgetet üzemeltető iframe és a gazdagépkeret között.
explicitNotifyLoaded: true
Átadjuk, hogy a widget explicit módon értesítse a gazdagépet, ha végzett a betöltéssel. Ez a vezérlő lehetővé teszi a terhelés befejezésének értesítését a függő modulok betöltése után.
usePlatformStyles: true
Átadjuk, hogy az Azure DevOps html-elemekhez (például törzs, div stb.) tartozó alapvető stílusait a Widget használni tudja. Ha a widget inkább nem használja ezeket a stílusokat, akkor átadhatja őket usePlatformStyles: false
.
VSS.require
a szükséges VSS-szkripttárak betöltésére szolgál. A metódus hívása automatikusan betölti az olyan általános kódtárakat, mint a JQuery és a JQueryUI.
Esetünkben a WidgetHelpers-kódtártól függünk, amely a widget állapotának a widget-keretrendszer felé való kommunikációjára szolgál.
Így átadjuk a megfelelő modulnevet TFS/Dashboards/WidgetHelpers
és egy visszahívást a következőnek VSS.require
: .
A visszahívás a modul betöltése után lesz meghívva.
A visszahívás rendelkezik a widgethez szükséges JavaScript-kód többi részével. A visszahívás végén meghívjuk VSS.notifyLoadSucceeded
a terhelés befejezését.
WidgetHelpers.IncludeWidgetStyles
tartalmaz egy stíluslapot néhány alapvető css-sel az első lépésekhez. A stílusok használatához ügyeljen arra, hogy a tartalmat egy HTML-elembe csomagolja osztályokkal widget
.
VSS.register
a JavaScriptben egy függvény leképezésére szolgál, amely egyedileg azonosítja a widgetet a bővítmény különböző hozzájárulásai között. A névnek meg kell egyeznie az id
5. lépésben leírt hozzájárulást azonosító névvel. Widgetek esetén az átadott függvénynek egy olyan objektumot kell visszaadnia VSS.register
, amely megfelel a IWidget
szerződésnek, például a visszaadott objektumnak rendelkeznie kell egy terhelési tulajdonsággal, amelynek értéke egy másik függvény, amely rendelkezik a widget rendereléséhez szükséges alapvető logikával.
Esetünkben az elem szövegét h2
""Helló világ!" alkalmazás" értékre kell frissíteni.
Ezt a függvényt hívjuk meg, amikor a widget-keretrendszer példányosítja a widgetet.
A WidgetHelpersből származó értéket használjuk WidgetStatusHelper
a WidgetStatus
sikeres visszatéréshez.
Figyelmeztetés
Ha a widget regisztrálásához használt név nem egyezik meg a jegyzékben szereplő hozzájárulás azonosítójával, akkor a widget váratlanul működik.
Mindig vss-extension.json
a mappa gyökerénél kell lennie (ebben az útmutatóban). HelloWorld
Az összes többi fájl esetében bármilyen struktúrában elhelyezheti őket a mappában, csak győződjön meg arról, hogy a hivatkozásokat megfelelően frissíti a HTML-fájlokban és a vss-extension.json
jegyzékben.
4. lépés: A bővítmény emblémája: logo.png
Az embléma megjelenik a Marketplace-en és a widgetkatalógusban, amint egy felhasználó telepíti a bővítményt.
Szüksége van egy 98 px x 98-px katalógus ikonra. Válasszon ki egy képet, nevezze el logo.png
, és helyezze a img
mappába.
A TFS 2015 3. frissítésének támogatásához további 330 px x 160 px méretű képre van szüksége. Ez az előnézeti kép jelenik meg ebben a katalógusban. Válasszon ki egy képet, nevezze el preview.png
, és helyezze a mappába a img
korábbiakhoz hasonlóan.
Ezeket a képeket tetszés szerint nevezheti el, amíg a következő lépésben a bővítményjegyzék frissül a használt névvel.
5. lépés: A bővítmény jegyzékfájlja: vss-extension.json
- Minden bővítménynek rendelkeznie kell egy kiterjesztésjegyzékfájllal
- A bővítményjegyzék referenciájának elolvasása
- További információ a bővíthetőségi pontokban található hozzájárulási pontokról
Hozzon létre egy json-fájlt (vss-extension.json
például) a home
könyvtárban a következő tartalommal:
{
"manifestVersion": 1,
"id": "vsts-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
}
]
}
A szükséges attribútumokkal kapcsolatos további információkért tekintse meg a bővítmény jegyzékfájljának hivatkozását
Megjegyzés:
Az itt található közzétevőt a közzétevő nevére kell módosítani. Közzétevő létrehozásához látogasson el a Package/Publish/Install webhelyre.
Ikonok
Az ikonok stanza a bővítmény ikonjának elérési útját határozzák meg a jegyzékben.
Hozzájárulások
Minden egyes hozzájárulási bejegyzés tulajdonságokat határoz meg.
- A közreműködés azonosítására szolgáló azonosító . Ennek az azonosítónak egy bővítményen belül egyedinek kell lennie. Ennek az azonosítónak meg kell egyeznie a widget regisztrálásához használt 3. lépésben használt névvel.
- A hozzájárulás típusa . Az összes widget esetében a típusnak a következőnek kell lennie
ms.vss-dashboards-web.widget
: . - Azon célok tömbje, amelyekhez a hozzájárulás hozzájárul. Az összes widget esetében a célnak a következőnek kell lennie
[ms.vss-dashboards-web.widget-catalog]
: . - A tulajdonságok olyan objektumok, amelyek a hozzájárulás típusának tulajdonságait tartalmazzák. A widgetek esetében a következő tulajdonságok megadása kötelező.
Tulajdonság | Leírás |
---|---|
név | A widgetkatalógusban megjelenítendő widget neve. |
leírás | A widgetkatalógusban megjelenítendő widget leírása. |
catalogIconUrl | A 4. lépésben hozzáadott katalógusikon relatív elérési útja a widgetkatalógusban való megjelenítéshez. A képnek 98 képpont x 98 képpontnak kell lennie. Ha más mappastruktúrát vagy más fájlnevet használt, itt adja meg a megfelelő relatív elérési utat. |
previewImageUrl | A 4. lépésben hozzáadott előnézeti kép relatív elérési útja, amely csak a TFS 2015 Update 3 widgetkatalógusában jelenik meg. A képnek 330 px x 160 px-nek kell lennie. Ha más mappastruktúrát vagy más fájlnevet használt, itt adja meg a megfelelő relatív elérési utat. |
Uri | Az 1. lépésben hozzáadott HTML-fájl relatív elérési útja. Ha más mappastruktúrát vagy más fájlnevet használt, itt adja meg a megfelelő relatív elérési utat. |
supportedSizes | A widget által támogatott méretek tömbje. Ha egy widget több méretet is támogat, a tömb első mérete a widget alapértelmezett mérete. A widget size vezérlő által az irányítópult rácsában foglalt sorokhoz és oszlopokhoz van megadva. Egy sor/oszlop 160 képpontnak felel meg. Az 1x1-et meghaladó bármely dimenzió további 10 px-et kap, amely a vezérlők közötti ereszcsatornát jelöli. Például egy 3x2-vezérlő 160*3+10*2 széles és 160*2+10*1 magas. A maximálisan támogatott méret a következő 4x4 : . |
supportedScopes | Jelenleg csak a csapat irányítópultjait támogatjuk. Az értéknek a következőnek kell lennie project_team : . A jövőben, amikor más irányítópult-hatóköröket is támogatunk, itt további lehetőségek közül választhat. |
Fájlok
A fájlok stanza azt jelzik, hogy mely fájlokat szeretné belefoglalni a csomagba – a HTML-oldalt, a szkripteket, az SDK-szkriptet és az emblémát.
Állítsa be addressable
, true
kivéve, ha olyan fájlokat is tartalmaz, amelyeknek nem kell URL-címmel rendelkeznie.
Megjegyzés:
A bővítmény jegyzékfájljáról, például a tulajdonságairól és a műveletekről további információt a bővítmény jegyzékfájljának referenciájában talál.
6. lépés: Csomag, közzététel és megosztás
Miután megírta a bővítményt, a következő lépés a Marketplace-be való bekerülés felé az összes fájl összecsomagolása. Minden bővítmény VSIX 2.0-kompatibilis .vsix-fájlként van csomagolva – A Microsoft platformfüggetlen parancssori felületet (CLI) biztosít a bővítmény csomagolásához.
A csomagolóeszköz lekérése
Az Azure DevOps platformfüggetlen parancssori felületét (tfx-cli) a Node.js egyik összetevőjének használatával npm
telepítheti vagy frissítheti a parancssorból.
npm i -g tfx-cli
A bővítmény csomagolása
A bővítmény .vsix-fájlba való csomagolása a tfx-cli használata után könnyű. Nyissa meg a bővítmény kezdőkönyvtárát, és futtassa a következő parancsot.
tfx extension create --manifest-globs vss-extension.json
Megjegyzés:
A bővítmény/integráció verzióját minden frissítésen növelni kell.
Meglévő bővítmény frissítésekor frissítse a jegyzékben szereplő verziót, vagy adja át a parancssori --rev-version
kapcsolót. Ez növeli a bővítmény javításverziójának számát, és menti az új verziót a jegyzékbe.
Miután a csomagolt bővítményt egy .vsix-fájlba tette, készen áll arra, hogy közzétegye a bővítményt a Marketplace-en.
Közzétevő létrehozása a bővítményhez
Minden bővítményt, beleértve a Microsoft bővítményeit is, a közzétevő által biztosítottként azonosítja. Ha még nem tagja egy meglévő közzétevőnek, létre fog hozni egyet.
- Bejelentkezés a Visual Studio Marketplace közzétételi portálra
- Ha még nem tagja egy meglévő közzétevőnek, a rendszer kérni fogja, hogy hozzon létre egy közzétevőt. Ha a rendszer nem kéri közzétevő létrehozását, görgessen le a lap aljára, és válassza a Bővítmények közzététele a kapcsolódó webhelyek alatt lehetőséget.
- Adja meg a közzétevő azonosítóját, például:
mycompany-myteam
- Az azonosítót használja a bővítmények jegyzékfájljában lévő attribútum értékeként
publisher
.
- Az azonosítót használja a bővítmények jegyzékfájljában lévő attribútum értékeként
- Adja meg a közzétevő megjelenítendő nevét, például:
My Team
- Adja meg a közzétevő azonosítóját, például:
- Tekintse át a Marketplace-közzétevői szerződést , és válassza a Létrehozás lehetőséget
Most már definiálta a közzétevőt. Egy későbbi kiadásban engedélyeket adhat a közzétevő bővítményeinek megtekintéséhez és kezeléséhez. A csapatok és szervezetek egyszerűen és biztonságosabban tehetnek közzé bővítményeket egy közös közzétevőben, de anélkül, hogy hitelesítő adatokat kellene megosztaniuk a felhasználók között.
Frissítse a vss-extension.json
mintajegyzékfájlt, hogy a hamis közzétevő azonosítóját fabrikam
lecserélje a közzétevő azonosítóra.
A bővítmény közzététele és megosztása
Miután létrehozott egy közzétevőt, feltöltheti a bővítményt a Marketplace-be.
- Keresse meg az Új bővítmény feltöltése gombot, keresse meg a csomagolt .vsix-fájlt, és válassza a Feltöltés lehetőséget.
A bővítményt a parancssoron keresztül is feltöltheti úgy, hogy a parancsot használja ahelyett tfx extension publish
tfx extension create
, hogy egy lépésben csomagolja és közzétegye a bővítményt.
A bővítményt tetszés szerint --share-with
megoszthatja egy vagy több fiókkal a közzététel után.
Személyes hozzáférési jogkivonatra is szüksége lesz.
tfx extension publish --manifest-globs your-manifest.json --share-with yourOrganization
7. lépés: Widget hozzáadása a katalógusból
Nyissa meg a projektet az Azure DevOpsban,
http://dev.azure.com/{yourOrganization}/{yourProject}
Válassza az Áttekintés, majd az Irányítópultok lehetőséget.
Válassza a Widget hozzáadása lehetőséget.
Jelölje ki a widgetet, majd válassza a Hozzáadás lehetőséget.
A widget megjelenik az irányítópulton.
2. rész: "Helló világ!" alkalmazás az Azure DevOps REST API-val
A widgetek meghívhatják az Azure DevOps rest API-jait az Azure DevOps-erőforrások használatához. Ebben a példában a Rest API for WorkItemTracking használatával lekérjük egy meglévő lekérdezés adatait, és megjelenítünk néhány lekérdezési információt a widgetben közvetlenül a ""Helló világ!" alkalmazás" szöveg alatt.
1. lépés: HTML
Másolja ki a fájlt hello-world.html
az előző példából, és nevezze át a másolatot a következőre hello-world2.html
: . A mappa most az alábbihoz hasonlóan néz ki:
|--- 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
|--- hello-world2.html // renamed copy of hello-world.html
|--- vss-extension.json // extension's manifest
Adjon hozzá egy új "div" elemet közvetlenül a "h2" alá a lekérdezési információk tárolásához. Frissítse a widget nevét a "HelloWorldWidget" elemről a "HelloWorldWidget2" névre abban a sorban, ahol a "VSS.register" nevet hívja. Ez lehetővé teszi, hogy a keretrendszer egyedileg azonosítsa a widgetet a bővítményen belül.
<!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>
2. lépés: Azure DevOps-erőforrások elérése
Az Azure DevOps-erőforrásokhoz való hozzáférés engedélyezéséhez hatóköröket kell megadni a bővítményjegyzékben. Hozzáadjuk a hatókört a vso.work
jegyzékhez.
Ez a hatókör azt jelzi, hogy a vezérlőnek írásvédett hozzáférésre van szüksége a lekérdezésekhez és a munkaelemekhez. Itt megtekintheti az összes elérhető hatókört.
Adja hozzá az alábbiakat a bővítményjegyzék végén.
{
...,
"scopes":[
"vso.work"
]
}
Figyelmeztetés
A bővítmény közzététele után a hatókörök hozzáadása vagy módosítása jelenleg nem támogatott. Ha már feltöltötte a bővítményt, távolítsa el a Marketplace-ről. Ugrás, kattintson a jobb gombbal a bővítményre, és válassza az "Eltávolítás" lehetőséget.
3. lépés: A REST API-hívás indítása
Számos ügyféloldali kódtár érhető el az SDK-val REST API-hívások indításához az Azure DevOpsban. Ezeket a kódtárakat REST-ügyfeleknek nevezzük, és JavaScript-burkolók az Ajax-hívások körül az összes elérhető kiszolgálóoldali végponthoz. Az Ajax-hívások írása helyett használhatja az ügyfelek által biztosított metódusokat. Ezek a metódusok leképzi az API-válaszokat a kód által felhasználható objektumokra.
Ebben a lépésben frissítjük a VSS.require
betöltendő TFS/WorkItemTracking/RestClient
hívást, amely a WorkItemTracking REST-ügyfelet biztosítja.
Ezzel a REST-ügyfélrel információt kaphatunk a mappában Shared Queries
hívott Feedback
lekérdezésről.
Az átadott VSS.register
függvényen belül létrehozunk egy változót, amely az aktuális projektazonosítót tárolja. Erre a változóra van szükségünk a lekérdezés lekéréséhez.
Egy új metódust getQueryInfo
is létrehozunk a REST-ügyfél használatához. Ezt a metódust ezután a terhelési metódusból hívjuk meg.
A metódus getClient
a szükséges REST-ügyfél egy példányát adja meg.
A metódus getQuery
ígéretbe csomagolt lekérdezést ad vissza.
A frissített VSS.require
verzió a következőképpen néz ki:
VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/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();
});
Figyelje meg a hibametódus használatát a következőből: .WidgetStatusHelper
Lehetővé teszi, hogy jelezze a widget-keretrendszernek, hogy hiba történt, és kihasználja az összes widget számára biztosított szabványos hibaélményt.
Ha nem rendelkezik a lekérdezéssel
Feedback
aShared Queries
mappában, cserélje leShared Queries\Feedback
a kódot a projektben található lekérdezés elérési útjára.
4. lépés: A válasz megjelenítése
Az utolsó lépés a lekérdezési adatok widgeten belüli megjelenítése.
A getQuery
függvény egy ígéreten belüli típusú Contracts.QueryHierarchyItem
objektumot ad vissza.
Ebben a példában a lekérdezés azonosítóját, a lekérdezés nevét és a lekérdezés létrehozójának nevét jelenítjük meg a ""Helló világ!" alkalmazás" szöveg alatt.
Cserélje le a // Do something with the query
megjegyzést az alábbira:
// Create a list with query details
var $list = $('<ul>');
$list.append($('- ').text("Query Id: " + query.id));
$list.append($('- ').text("Query Name: " + query.name));
$list.append($('- ').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);
A döntő hello-world2.html
a következő:
<!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", "TFS/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($('- ').text("Query ID: " + query.id));
$list.append($('- ').text("Query Name: " + query.name));
$list.append($('- ').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>
5. lépés: Bővítményjegyzék Frissítések
Ebben a lépésben úgy frissítjük a bővítményjegyzéket, hogy tartalmazza a második widget bejegyzését.
Adjon hozzá egy új hozzájárulást a contributions
tulajdonságban lévő tömbhöz, és adja hozzá az új fájlt hello-world2.html
a tömbhöz a fájltulajdonságban.
A második widgethez másik előnézeti képre van szüksége. Nevezze el ezt a preview2.png
nevet, és helyezze a img
mappába.
{
...,
"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"
]
}
6. lépés: Csomag, közzététel és megosztás
Csomagolja, tegye közzé és ossza meg a bővítményt. Ha már közzétette a bővítményt, újracsomagolhatja a bővítményt, és közvetlenül frissítheti a Marketplace-re.
7. lépés: Widget hozzáadása a katalógusból
Most nyissa meg a csapat irányítópultját a következő helyen https:\//dev.azure.com/{yourOrganization}/{yourProject}
: . Ha ez a lap már meg van nyitva, frissítse.
Mutasson a szerkesztés gombra a jobb alsó sarokban, és válassza a Hozzáadás gombot. Megnyílik a widgetkatalógus, ahol megtalálja a telepített widgetet.
Válassza ki a widgetet, és a "Hozzáadás" gombra kattintva vegye fel az irányítópultra.
3. rész: "Helló világ!" alkalmazás konfigurációval
Az útmutató 2 . részében láthatta, hogyan hozhat létre egy vezérlőt, amely egy kemény kóddal rendelkező lekérdezés lekérdezési adatait jeleníti meg. Ebben a részben lehetőséget adunk arra, hogy a lekérdezést a kemény kódú helyett használandóra konfiguráljuk. Konfigurációs módban a felhasználó a módosítások alapján megtekintheti a widget élő előnézetét. Ezeket a módosításokat az irányítópult vezérlőjéhez menti a rendszer, amikor a felhasználó a Mentés lehetőséget választja.
1. lépés: HTML
A widgetek és a widgetkonfigurációk implementációi sokban hasonlítanak egymásra. Mindkettőt a bővítmény-keretrendszerben, hozzájárulásként implementáljuk. Mindkettő ugyanazt az SDK-fájlt használja. VSS.SDK.min.js
Mindkettő HTML-, JavaScript- és CSS-alapú.
Másolja ki a fájlt html-world2.html
az előző példából, és nevezze át a másolatot a következőre hello-world3.html
: . Adjon hozzá egy másik, úgynevezett configuration.html
HTML-fájlt.
A mappa most a következő példához hasonlóan néz ki:
|--- 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
Adja hozzá az alábbi HTML-t a "configuration.html" fájlhoz. Alapvetően hozzáadjuk a kötelező hivatkozást a VSS-hez. Az SDK.min.js fájl és a legördülő lista "select" eleme egy lekérdezés előre beállított listából való kiválasztásához.
<!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>
2. lépés: JavaScript – Konfiguráció
A JavaScript használatával ugyanúgy jeleníthet meg tartalmakat a widget konfigurációjában, mint az útmutató 1. részében szereplő 3 . lépésben.
Ez a JavaScript-kód megjeleníti a tartalmat, inicializálja a VSS SDK-t, leképezi a widget konfigurációjának kódját a konfiguráció nevére, és átadja a konfigurációs beállításokat a keretrendszernek. Esetünkben az alábbi kód tölti be a widget konfigurációját.
Nyissa meg a fájlt configuration.html
és az alábbi <script>
elemet a <head>
.
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles: true
});
VSS.require("TFS/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.require
és VSS.register
ugyanazt a szerepkört játssza, mint a widget esetében az 1. részben leírtak szerint.
Az egyetlen különbség az, hogy a widget-konfigurációk esetében az átadott függvénynek egy olyan objektumot kell visszaadnia VSS.register
, amely megfelel a IWidgetConfiguration
szerződésnek.
A load
szerződés tulajdonságának IWidgetConfiguration
értékeként egy függvénynek kell lennie.
Ez a függvény a widget konfigurációjának megjelenítéséhez szükséges lépéseket tartalmazza.
Esetünkben a legördülő elem kiválasztott értékét frissíteni kell a meglévő beállításokkal, ha vannak ilyenek.
Ez a függvény akkor lesz meghívva, amikor a keretrendszer példányosítja a widget configuration
A onSave
szerződés tulajdonságának IWidgetConfiguration
értékeként egy függvénynek kell lennie.
Ezt a függvényt a keretrendszer hívja meg, amikor a felhasználó a Konfiguráció panelEn a Mentés lehetőséget választja.
Ha a felhasználói bemenet készen áll a mentésre, szerializálja azt egy sztringre, formázza az custom settings
objektumot, és mentse WidgetConfigurationSave.Valid()
a felhasználói bemenetet.
Ebben az útmutatóban a JSON használatával szerializáljuk a felhasználói bemenetet egy sztringbe. A felhasználói bemenet sztringre való szerializálásának bármely más módja is választható.
A widget az objektum egyéni Gépház tulajdonságán keresztül érhető elWidgetSettings
.
A widgetnek deszerializálnia kell ezt, amely a 4. lépésben szerepel.
3. lépés: JavaScript – Élő előnézet engedélyezése
Ha engedélyezni szeretné az élő előzetes verzió frissítését, amikor a felhasználó kiválaszt egy lekérdezést a legördülő listából, csatolunk egy változásesemény-kezelőt a gombhoz. Ez a kezelő értesíti a keretrendszert, hogy a konfiguráció megváltozott.
Az előzetes verzió frissítéséhez használandó elemet is átadja customSettings
. A keretrendszer értesítéséhez meg kell hívni a notify
widgetConfigurationContext
metódust. Két paramétert vesz fel, az esemény nevét, amely ebben az esetben WidgetHelpers.WidgetEvent.ConfigurationChange
EventArgs
a segédmetódus segítségével WidgetEvent.Args
létrehozott objektum az customSettings
eseményhez.
Adja hozzá az alábbiakat a tulajdonsághoz rendelt függvényben load
.
$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);
});
A "Mentés" gomb engedélyezéséhez legalább egyszer értesítenie kell a konfigurációs módosítás keretrendszerét.
A végén configuration.html
a következőhöz hasonlóan néz ki:
<!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("TFS/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>
4. lépés: JavaScript – Újratöltés implementálása a widgetben
Beállítottuk a widget konfigurációját a felhasználó által kiválasztott lekérdezési útvonal tárolásához.
Most frissíteni kell a vezérlőben lévő kódot, hogy ezt a tárolt konfigurációt használhassuk az előző példában rögzített Shared Queries/Feedback
kód helyett.
Nyissa meg a fájlthello-world3.html
, és frissítse a widget nevét a hívási VSS.register
sorba HelloWorldWidget2
HelloWorldWidget3
.
Ez lehetővé teszi, hogy a keretrendszer egyedileg azonosítsa a widgetet a bővítményen belül.
A jelenleg leképezett HelloWorldWidget3
VSS.register
függvény egy olyan objektumot ad vissza, amely megfelel a szerződésnek IWidget
.
Mivel a widgetnek most konfigurációra van szüksége, ezt a függvényt frissíteni kell a szerződésnek megfelelő IConfigurableWidget
objektum visszaadásához.
Ehhez frissítse a visszatérési utasítást úgy, hogy tartalmazza az újratöltés nevű tulajdonságot az alábbiak szerint. A tulajdonság értéke egy függvény, amely még egyszer meghívja a getQueryInfo
metódust.
Ezt az újratöltési módszert a keretrendszer minden alkalommal meghívja, amikor a felhasználói bemenet megváltozik az élő előnézet megjelenítéséhez. Ezt a konfiguráció mentésekor is meghívja a rendszer.
return {
load: function (widgetSettings) {
// Set your title
var $title = $('h2.title');
$title.text('Hello World');
return getQueryInfo(widgetSettings);
},
reload: function (widgetSettings) {
return getQueryInfo(widgetSettings);
}
}
A "getQueryInfo" hard-coded lekérdezési útvonalát le kell cserélni a konfigurált lekérdezési útvonalra, amely kinyerhető a metódusnak átadott "widget Gépház" paraméterből. Adja hozzá az alábbiakat a getQueryInfo metódus elejéhez, és cserélje le a hard-coded querypathot a "settings.queryPath" kifejezésre.
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();
}
Ezen a ponton a widget készen áll a renderelésre a konfigurált beállításokkal.
A tulajdonságok és a
load
reload
tulajdonságok is hasonló függvényt használnak. Ez a helyzet a legegyszerűbb widgetek esetében. Az összetett widgetek esetében bizonyos műveletek csak egyszer futtathatók, függetlenül attól, hogy a konfiguráció hányszor változik. Vagy lehetnek olyan nagy súlyú műveletek is, amelyeknek nem kell többször futniuk. Az ilyen műveletek a tulajdonságnakload
megfelelő függvény részét képezik, nem pedig a tulajdonságnakreload
.
5. lépés: Bővítményjegyzék Frissítések
Nyissa meg a vss-extension.json
fájlt úgy, hogy két új bejegyzést is belefoglaljon a tömbbe a contributions
tulajdonságban. Az egyik a HelloWorldWidget3
widgethez, a másik a konfigurációhoz.
A harmadik widgethez még egy előzetes verziójú képre van szüksége. Nevezze el ezt a preview3.png
nevet, és helyezze a img
mappába.
Frissítse a tömböt a files
tulajdonságban, hogy tartalmazza a példában hozzáadott két új HTML-fájlt.
{
...
"contributions": [
... ,
{
"id": "HelloWorldWidget3",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog",
"fabrikam.vsts-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
}
],
...
}
Vegye figyelembe, hogy a widget-konfigurációhoz való hozzájárulás kissé eltérő modellt követ, mint maga a widget. A vezérlőkonfigurációhoz tartozó hozzájárulási bejegyzés a következő:
- A közreműködés azonosítására szolgáló azonosító . Ennek a bővítményen belül egyedinek kell lennie.
- A hozzájárulás típusa . Az összes vezérlőkonfiguráció esetében ennek
ms.vss-dashboards-web.widget-configuration
- Azon célok tömbje, amelyekhez a hozzájárulás hozzájárul. Az összes vezérlőkonfiguráció esetében ez egyetlen bejegyzéssel rendelkezik:
ms.vss-dashboards-web.widget-configuration
. - A konfigurációhoz használt HTML-fájl nevét, leírását és URI-ját tartalmazó tulajdonságok .
A konfiguráció támogatásához a widget hozzájárulását is módosítani kell. A widget céltömbjének frissítésére van szükség, hogy a konfiguráció azonosítója szerepeljen a .>id for the extension
<. formában<>publisher
,><id for the configuration contribution
amely ebben az esetben a .fabrikam.vsts-extensions-myExtensions.HelloWorldWidget.Configuration
Figyelmeztetés
Ha a konfigurálható widget hozzájárulási bejegyzése nem a korábban ismertetett megfelelő közzétevő és bővítménynév használatával célozza meg a konfigurációt, a konfigurálás gomb nem jelenik meg a widget számára.
A rész végén a jegyzékfájlnak három widgetet és egy konfigurációt kell tartalmaznia. A teljes jegyzék itt található a mintából.
6. lépés: Csomag, közzététel és megosztás
Ha még nem tette közzé a bővítményt, olvassa el ezt a szakaszt a bővítmény csomagolásához, közzétételéhez és megosztásához. Ha korábban már közzétette a bővítményt, újracsomagolhatja a bővítményt, és közvetlenül frissítheti a Marketplace-re.
7. lépés: Widget hozzáadása a katalógusból
Most nyissa meg a csapat irányítópultját a következő helyen: https://dev.azure.com/{yourOrganization}/{yourProject}. Ha ez a lap már meg van nyitva, frissítse. Mutasson a szerkesztés gombra a jobb alsó sarokban, és válassza a Hozzáadás gombot. Ekkor meg kell nyitnia a widget-katalógust, ahol megtalálja a telepített widgetet. Válassza ki a widgetet, és a "Hozzáadás" gombra kattintva vegye fel az irányítópultra.
Megjelenik egy üzenet, amely arra kéri, hogy konfigurálja a widgetet.
A widgetek kétféleképpen konfigurálhatók. Az egyik, hogy rámutat a widgetre, jelölje ki a jobb felső sarokban megjelenő három pontot, majd válassza a Konfigurálás lehetőséget. A másik lehetőség, hogy az irányítópult jobb alsó sarkában válassza a Szerkesztés gombot, majd válassza ki a widget jobb felső sarkában megjelenő konfigurálás gombot. Vagy megnyitja a konfigurációs felületet a jobb oldalon, és a widget előnézetét a központban. Lépjen tovább, és válasszon egy lekérdezést a legördülő listából. Az élő előnézet a frissített eredményeket jeleníti meg. Válassza a "Mentés" lehetőséget, és a widget megjeleníti a frissített eredményeket.
8. lépés: Továbbiak konfigurálása (nem kötelező)
A további konfigurációhoz annyi HTML-űrlapelemet adhat hozzá, amennyi csak configuration.html
szükséges.
A dobozon kívül két konfigurálható funkció érhető el: a widget neve és a widget mérete.
Alapértelmezés szerint a bővítményjegyzékben megadott widgetnév a widget minden olyan példányának widgetneve lesz, amelyet valaha hozzáad egy irányítópulthoz.
Engedélyezheti a felhasználóknak, hogy konfigurálják ezt a beállítást, hogy bármilyen nevet hozzáadhassanak a widget példányához.
Az ilyen konfiguráció engedélyezéséhez adja hozzá isNameConfigurable:true
a widget tulajdonságok szakaszához a bővítményjegyzékben.
Ha egynél több bejegyzést ad meg a widgethez a supportedSizes
bővítményjegyzék tömbjében, akkor a felhasználók a widget méretét is konfigurálhatják.
Az útmutató harmadik mintájának bővítményjegyzéke az alábbihoz hasonlóan jelenik meg, ha engedélyezzük a widget nevét és méretét:
{
...
"contributions": [
... ,
{
"id": "HelloWorldWidget3",
"type": "ms.vss-dashboards-web.widget",
"targets": [
"ms.vss-dashboards-web.widget-catalog", "fabrikam.vsts-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"]
}
},
...
}
Az előző módosítással csomagolja újra és frissítse a bővítményt. Frissítse a widgetet tartalmazó irányítópultot ("Helló világ!" alkalmazás Widget 3 (konfigurációval)). Nyissa meg a widget konfigurációs módját, most már látnia kell a widget nevének és méretének módosítására szolgáló lehetőséget.
Válasszon egy másik méretet a legördülő listából. Ekkor megjelenik az élő előnézet átméretezése. Mentse a módosítást, és az irányítópulton lévő widget is átméretezve lesz.
Figyelmeztetés
Ha eltávolít egy már támogatott méretet, a widget nem töltődik be megfelelően. Dolgozunk a jövőbeli kiadás javításán.
A widget nevének módosítása nem eredményez látható változást a widgetben. Ennek az az oka, hogy a minta widgetek sehol nem jelenítik meg a widget nevét. Módosítsa a mintakódot úgy, hogy a vezérlő neve jelenjen meg a ""Helló világ!" alkalmazás" szöveg helyett.
Ehhez cserélje le a ""Helló világ!" alkalmazás" szövegrészt widgetSettings.name
arra a sorra, amelyben az h2
elem szövegét állítjuk be.
Ez biztosítja, hogy a widget neve minden alkalommal megjelenjen, amikor a widget betöltődik az oldalfrissítésbe.
Mivel azt szeretnénk, hogy az élő előzetes verzió minden alkalommal frissüljön, amikor a konfiguráció megváltozik, ugyanazt a kódot is hozzá kell adnunk a reload
kódhoz.
A végső visszatérési utasítás a hello-world3.html
következő:
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);
}
}
Csomagolja újra és frissítse újra a bővítményt. Frissítse a widgetet tartalmazó irányítópultot. A widget nevének bármilyen módosítása a konfigurációs módban most frissítse a widget címét.
Visszajelzés
https://aka.ms/ContentUserFeedback.
Hamarosan elérhető: 2024-ben fokozatosan kivezetjük a GitHub-problémákat a tartalom visszajelzési mechanizmusaként, és lecseréljük egy új visszajelzési rendszerre. További információ:Visszajelzés küldése és megtekintése a következőhöz: