Aggiungere una pagina di destinazione all'oggetto visivo di Power BI

La pagina di destinazione di un oggetto visivo di Power BI può visualizzare informazioni nella scheda visiva di Power BI prima che la scheda ottenga i dati. È possibile visualizzare la pagina di destinazione di un oggetto visivo:

• Testo che spiega come usare l'oggetto visivo.
• Collegamento al sito Web.
• Collegamento a un video.

Questo articolo illustra come progettare una pagina di destinazione per l'oggetto visivo. La pagina di destinazione viene visualizzata ogni volta che l'oggetto visivo non contiene dati.

Nota

La progettazione di una pagina di destinazione dell'oggetto visivo di Power BI è supportata nell'API versione 2.3.0 e successive. Per scoprire quale versione si sta usando, archiviare apiVersion il file pbiviz.json .

Creazione di una pagina di destinazione

Per creare una pagina di destinazione, è necessario impostare due funzionalità nel capabilities.json file.

• Per il funzionamento della pagina di destinazione, abilitare supportsLandingPage.
• Affinché la pagina di destinazione venga visualizzata in modalità di visualizzazione o affinché l'oggetto visivo sia interattivo anche quando non è in modalità ruoli dati, abilitare supportsEmptyDataView.

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

Esempio di oggetto visivo con una pagina di destinazione

Il codice seguente illustra come aggiungere una pagina di destinazione a un oggetto visivo grafico a barre.

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

Contenuto correlato

Formattazione delle utilità