Kezdőlap hozzáadása a Power BI-vizualizációhoz
A Power BI-vizualizáció kezdőlapja adatokat jeleníthet meg a Power BI-vizualizációs kártyán, mielőtt a kártya adatokat kapna. A vizualizáció kezdőlapja megjeleníthető:
- A vizualizáció használatát ismertető szöveg.
- A webhelyre mutató hivatkozás.
- Videóra mutató hivatkozás.
Ez a cikk bemutatja, hogyan tervezhet kezdőlapot a vizualizációhoz. A kezdőlap akkor jelenik meg, ha a vizualizációban nincsenek benne adatok.
Megjegyzés:
A Power BI-vizualizáció kezdőlapja a 2.3.0-s vagy újabb API-verzióban támogatott. Ha meg szeretné tudni, hogy melyik verziót használja, ellenőrizze a apiVersionpbiviz.json fájlban.
Kezdőlap létrehozása
Kezdőlap létrehozásához két képességet kell beállítani a capabilities.json fájlban.
- A kezdőlap működéséhez engedélyezze az engedélyezést
supportsLandingPage. - Ahhoz, hogy a kezdőlap nézet módban jelenjen meg, vagy hogy a vizualizáció akkor is interaktív legyen, ha nincs adatszerepkörök módban, engedélyezze az engedélyezést
supportsEmptyDataView.
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Példa egy kezdőlapot tartalmazó vizualizációra
Az alábbi kód bemutatja, hogyan adhat hozzá kezdőlapot egy sávdiagram-vizualizációhoz.
export class BarChart implements IVisual {
//...
private element: HTMLElement;
private isLandingPageOn: boolean;
private LandingPageRemoved: boolean;
private LandingPage: d3.Selection<any>;
constructor(options: VisualConstructorOptions) {
//...
this.element = options.element;
//...
}
public update(options: VisualUpdateOptions) {
//...
this.HandleLandingPage(options);
}
private HandleLandingPage(options: VisualUpdateOptions) {
if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
if(!this.isLandingPageOn) {
this.isLandingPageOn = true;
const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
this.element.appendChild(SampleLandingPage);
this.LandingPage = d3.select(SampleLandingPage);
}
} else {
if(this.isLandingPageOn && !this.LandingPageRemoved){
this.LandingPageRemoved = true;
this.LandingPage.remove();
}
}
}