Bevezetés

7 perc

Ha Power BI-tartalmat szeretne beágyazni az alkalmazásba, el kell végeznie az alábbi fejlesztési feladatokat.

Adja hozzá az ügyfélkódtárat a beágyazás programozott vezérléséhez.
Adja meg az ügyfélkódtárat.
Adjon hozzá egy beágyazási tárolót.
Kimeneti kiszolgálóoldali adatok.
Állítson be egy konfigurációs objektumot.
A Power BI-tartalom beágyazása.

Az ügyfélkódtár hozzáadása

Power BI-tartalmak beágyazása JavaScript vagy TypeScript használatával a Power BI-ügyfél API-val. Ez egy ügyfélkódtár, amely a teljes beágyazási felület programozott vezérlését biztosítja.

Az API-k három csomagból állnak:

powerbi-client – Minden olyan API-t tartalmaz, amely tartalmat ágyaz be, kivéve a powerbi-report-authoring könyvtárban található API-kat .
powerbi-models – Objektummodelleket tartalmaz. Minden modell rendelkezik TypeScript-felülettel, JSON-sémadefinícióval és érvényesítési függvénnyel, hogy egy adott objektum érvényes modell legyen.
powerbi-report-authoring – A vizualizációk létrehozására és személyre szabására szolgáló bővítmény, valamint power BI-jelentés létrehozása a betöltés után. Emellett lehetővé teszi, hogy az alkalmazás programozott módon szerkessze a beágyazott Power BI-jelentéseket.

A Power BI-ügyfél API-kódtárat a NuGet vagy az npm használatával telepítheti.

További információ: Mi az a Power BI embedded analytics client API?.

Az ügyfélkódtár belefoglalása

Az alkalmazásnak tartalmaznia kell egy script elemet az ügyfélkódtár forrásához.

<script src="/powerbi-client/dist/powerbi.js"></script>

Az ügyfélkódtárat tartalomkézbesítési hálózatról (CDN) is lehet forrásként megadni. Példa: JSDelivr powerbi-client.

<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.22.3/dist/powerbi.min.js"></script>

Ha közvetlenül tartalmazza, az ügyfélkódtár globális powerbi-client néven jelenik meg. Van egy másik globális nevű powerbi is, amely a Power BI szolgáltatás egy példánya.

Beágyazási tároló hozzáadása

Az alkalmazásnak tartalmaznia kell egy div elemet, amely beágyazási tárolóként működik.

<div id="embedContainer"></div>

Az alkalmazás beágyazza a Power BI-tartalmat az div elembe, és egy iframe elemen belül üzemelteti a tartalmat. Az iframe elem különválasztja az alkalmazást és a beágyazott tartalmat, és gondoskodik az adatok biztonságáról. Az ügyfél API-k mindig biztonságosan kommunikálnak az alkalmazás és a beágyazott tartalom között.

Tekintse meg az alábbi videót, amely bemutatja az ügyfélkódtár működését.

Kimeneti kiszolgálóoldali adatok

Az alkalmazásnak be kell szereznie egy ügyféloldali kimeneti hozzáférési jogkivonatot. Emellett az alkalmazásnak ki kell adnia bizonyos Power BI-összetevőtulajdonságokat az ügyféloldalon.

Tipp

A hozzáférési jogkivonatok beszerzéséről és a Power BI-összetevők tulajdonságainak lekéréséről a Power BI-tartalombeágyazási engedélyek beállítása című modulban tájékozódhat.

A következő script elem három változót tartalmaz. A accessToken változó tárolja a kiszolgálóoldali létrehozott hozzáférési jogkivonatot. A reports és datatsets változók a beágyazható összetevők JSON-reprezentációit tárolják. Ebben a példában az összetevőtípusok jelentések és adatkészletek. A változók az összetevő-azonosítót és a beágyazási URL-tulajdonságokat tárolják, amelyeknek ügyféloldalinak kell lenniük a beágyazás támogatásához. A név tulajdonságot is tartalmazza, hogy az alkalmazás felhasználóbarát módon, például egy menüben jeleníthesse meg az összetevők nevét a felhasználónak.

<script>
    var accessToken = "@Model.AccessToken";
    var reports = @Html.Raw(Model.ReportsJson)
    var datasets = @Html.Raw(Model.DatasetsJson)
</script>

Konfigurációs objektum beállítása

Az alkalmazásnak létre kell hoznia egy konfigurációs objektumot a Power BI-tartalmak beágyazásához szükséges összes információ megadásához. A konfigurációs objektum következő öt tulajdonságát kell beállítania:

tokenType – Állítsa be az értéket az alábbi forgatókönyvek valamelyike alapján:
- A szervezet számára A hozzáférési jogkivonat egy Azure AD jogkivonat. Állítsa be a models.TokenType.Aad értékre.
- Az ügyfelek számára A hozzáférési jogkivonat egy beágyazási jogkivonat. Állítsa be a models.TokenType.Embed értékre.
accessToken – A kiszolgálóoldali létrehozott hozzáférési jogkivonat.
type – Állítsa az alábbi értékek egyikére. A 2. és a 3. egység leírja, hogyan ágyazhatók be az egyes Típusú Power BI-tartalmak.
- Jelentés Power BI-jelentés vagy lapszámozott jelentés esetén.
- Vizuális Power BI-jelentésvizualizációkhoz.
- Műszerfal Irányítópulthoz.
- Csempe Irányítópult-csempe esetén.
- qna A Q&A-élményhez.
id – A Power BI-összetevő azonosítója.
embedUrl – A Power BI-összetevő beágyazási URL-címe. Ez az URL lesz a iframe beágyazott összetevőt üzemeltető elem forrása. Pontosabban az API hozzárendeli az URL-címet az srciframe elem attribútumához.

Az alábbi kód bemutatja, hogyan hozhat létre konfigurációs objektumot a Power BI-jelentések beágyazásához az Ügyfelek számára forgatókönyv használatával. models az ügyfélkódtár-modellekre mutató hivatkozás, amelyek hasznos enumerálási típusokat (enumerálásokat) tartalmaznak.

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Create the embed configuration object.
let config = {
    tokenType: models.TokenType.Embed,
    accessToken: accessToken, // Server-side generated access token
    type: 'report',
    id: '<Server-side retrieved Report ID>',
    embedUrl: '<Server-side retrieved Report embed URL>'
};

Több tartalomspecifikus konfigurációs tulajdonságot is beállíthat. Ezeket a 2. és a 3. leckében ismertetjük.

A Power BI-tartalom beágyazása

A függvény használatával powerbi.embed(embedContainer, config) ágyazza be a Power BI-tartalmat.

Az alábbi kód bemutatja, hogyan ágyazhat be Power BI-jelentéseket. A embedContainer változó tárolja a beágyazási tárolóra (div elemre) mutató hivatkozást, a változó pedig config egy adott Power BI-jelentéshez beállított konfigurációs objektumot. Az utolsó utasítás a beágyazást a beágyazási tároló és a konfigurációs objektum átadásával hajtja végre. A report változó a beágyazott jelentésre mutató hivatkozást tárol.

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Get a reference to the embedding container.
let embedContainer = $('#embedContainer')[0];

// Create the embed configuration object.
let config = {
    tokenType: models.TokenType.Embed,
    accessToken: accessToken, // Server-side generated access token
    type: 'report',
    id: '<Server-side retrieved Report ID>',
    embedUrl: '<Server-side retrieved Report embed URL>'
};

// Embed the report in the embedding container.
report = powerbi.embed(embedContainer, config);

A következő leckében megtudhatja, hogyan ágyazhat be Egy Power BI-jelentést, amely a leggyakrabban beágyazott Power BI-tartalomtípus.

Folytatás