Hinzufügen einer Landing Page zu Ihren Power BI-Visuals

Auf der Landing Page eines Power BI-Visuals können Informationen auf der Power BI-Visualkarte angezeigt werden, bevor die Karte Daten erhält. Die Landing Page eines Visuals kann Folgendes anzeigen:

• Text, der die Verwendung des Visuals erklärt.
• Ein Link auf Ihre Website.
• Ein Link zu einem Video.

In diesem Artikel wird erläutert, wie Sie eine Landing Page für Ihr Visual entwerfen. Die Landing Page wird immer dann angezeigt, wenn das Visual keine Daten enthält.

Hinweis

Das Entwerfen einer Landing Page für ein Power BI-Visual wird ab API-Version 2.3.0 und höher unterstützt. Um herauszufinden, welche Version Sie verwenden, überprüfen Sie die apiVersion in der Datei pbiviz.json.

Erstellen einer Landing Page

Zum Erstellen einer Landing Page müssen bestimmte Funktionen in der Datei capabilities.json festgelegt werden.

• Aktivieren Sie supportsLandingPage, damit die Landing Page funktioniert.
• Damit die Landing Page im Anzeigemodus angezeigt wird oder damit das Visual interaktiv ist, auch wenn es sich im Modus „Keine Datenrollen“ befindet, aktivieren SiesupportsEmptyDataView.

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

Beispiel für ein Visual mit einer Landing Page

Der folgende Code zeigt, wie eine Landing Page zu einem Balkendiagrammvisual hinzugefügt werden kann.

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

Nächste Schritte

Formatierungshilfsprogramme