Føj en landingsside til din Power BI-visualisering
En Power BI-visualiserings landingsside kan vise oplysninger på dit Power BI-visualiseringskort, før kortet henter data. En visualiserings landingsside kan vise:
- Tekst, der forklarer, hvordan du bruger visualiseringen.
- Et link til dit websted.
- Et link til en video.
I denne artikel forklares det, hvordan du designer en landingsside til din visualisering. Landingssiden vises, når visualiseringen ikke indeholder nogen data.
Bemærk
Design af en landingsside for Power BI-visualiseringer understøttes i API-version 2.3.0 og nyere. Hvis du vil finde ud af, hvilken version du bruger, skal du se apiVersion
i filen pbiviz.json .
Oprette en landingsside
Hvis du vil oprette en landingsside, skal der angives to funktioner i capabilities.json
filen.
- Hvis landingssiden skal fungere, skal du aktivere
supportsLandingPage
. - Hvis landingssiden skal vises i visningstilstand, eller hvis visualiseringen skal være interaktiv, selvom den ikke er i nogen datarolletilstand, skal du aktivere
supportsEmptyDataView
.
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Eksempel på en visualisering med en landingsside
Følgende kode viser, hvordan en landingsside kan føjes til en visualisering i et liggende søjlediagram.
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();
}
}
}