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.

JSON

    {
        "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.

TypeScript

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

Relateret indhold

Formateringshjælpeprogrammer