Legge til en målside i Power BI-visualobjektet

Målsiden for et Power BI-visualobjekt kan vise informasjon i Power BI-visualobjektkortet før kortet henter data. Målsiden for et visualobjekt kan vises:

• Tekst som forklarer hvordan du bruker visualobjektet.
• En kobling til nettstedet.
• En kobling til en video.

Denne artikkelen forklarer hvordan du utformer en målside for visualobjektet. Målsiden vises når visualobjektet ikke har noen data i seg.

Merk

Utforming av en målside for visualobjekter i Power BI støttes i API versjon 2.3.0 og nyere. Hvis du vil finne ut hvilken versjon du bruker, kan du sjekke apiVersion inn pbiviz.json-filen .

Opprette en målside

Hvis du vil opprette en målside, må det angis to funksjoner i capabilities.json filen.

• Aktiver supportsLandingPagefor at målsiden skal fungere.
• For at målsiden skal vises i visningsmodus, eller for at visualobjektet skal være interaktivt selv når du ikke er i dataroller-modus, aktiverer du supportsEmptyDataView.

    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Eksempel på et visualobjekt med en målside

Følgende kode viser hvordan en målside kan legges til i et stolpediagram.

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

Relatert innhold

Formateringsverktøy