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();
                }
        }
    }

Relaterat innehåll

Formateringsverktyg