Megosztás a következőn keresztül:

Irányítópult-vezérlő hozzáadása

  • Cikk

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áltukVisual 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 npmtelepíthető a npm i -g tfx-cli
  • 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

  1. Az útmutató első része bemutatja, hogyan hozhat létre új widgetet, amely egy egyszerű ""Helló világ!" alkalmazás" üzenetet nyomtat ki.
  2. A második rész az elsőre épül, ha egy hívást ad hozzá egy Azure DevOps REST API-hoz.
  3. 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.

Overview dashboard with a sample widget

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.jshogy 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 &lt;script&gt; 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.jsonpé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 npmtelepí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.

  1. Bejelentkezés a Visual Studio Marketplace közzétételi portálra
  2. 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 .
    • Adja meg a közzétevő megjelenítendő nevét, például: My Team
  3. 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.

  1. 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 publishtfx 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

  1. Nyissa meg a projektet az Azure DevOpsban, http://dev.azure.com/{yourOrganization}/{yourProject}

  2. Válassza az Áttekintés, majd az Irányítópultok lehetőséget.

  3. Válassza a Widget hozzáadása lehetőséget.

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

Overview dashboard with a sample widget using the REST API for WorkItemTracking.

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, Visual Studio Marketplace Publishing Portalkattintson 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/RestClienthívást, amely a WorkItemTracking REST-ügyfelet biztosítja. Ezzel a REST-ügyfélrel információt kaphatunk a mappában Shared Querieshívott Feedback lekérdezésről.

Az átadott VSS.registerfü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 a Shared Queries mappában, cserélje le Shared 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.

Overview dashboard live preview of the widget based on changes.

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.htmlHTML-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 notifywidgetConfigurationContext metódust. Két paramétert vesz fel, az esemény nevét, amely ebben az esetben WidgetHelpers.WidgetEvent.ConfigurationChangeEventArgs 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.registersorba HelloWorldWidget2HelloWorldWidget3. Ez lehetővé teszi, hogy a keretrendszer egyedileg azonosítsa a widgetet a bővítményen belül.

A jelenleg leképezett HelloWorldWidget3VSS.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 loadreload 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ágnak load megfelelő függvény részét képezik, nem pedig a tulajdonságnak reload .

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.

Overview dashboard with a sample widget from the catalog.

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.

Widget where name and size can be configured

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.