Lägga till en landningssida i ditt visuella Power BI-objekt
Ett visuellt Power BI-objekts landningssida kan visa information i ditt visuella Power BI-kort innan kortet hämtar data. Ett visuellt objekts landningssida kan visa:
- Text som förklarar hur du använder det visuella objektet.
- En länk till din webbplats.
- En länk till en video.
Den här artikeln beskriver hur du utformar en landningssida för ditt visuella objekt. Landningssidan visas när det visuella objektet inte har några data i sig.
Kommentar
Design av en visuell Power BI-landningssida stöds i API-version 2.3.0 och senare. Om du vill ta reda på vilken version du använder kontrollerar apiVersion du i filen pbiviz.json .
Skapa en landningssida
För att skapa en landningssida måste två funktioner anges i capabilities.json filen.
- Aktivera för att landningssidan ska fungera
supportsLandingPage. - Aktivera för att landningssidan ska visas i visningsläge eller för att det visuella objektet ska vara interaktivt även om det inte är i något datarollerläge.
supportsEmptyDataView
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Exempel på ett visuellt objekt med en landningssida
Följande kod visar hur en landningssida kan läggas till i ett visuellt stapeldiagram.
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();
}
}
}