Adicionar uma página de aterrissagem ao visual do Power BI

A página de aterrissagem de um visual do Power BI pode exibir informações no cartão visual do Power BI antes que o cartão obtenha dados. A página de aterrissagem do visual pode exibir:

• O texto que explica como usar o visual.
• Um link para seu site.
• Um link para um vídeo.

Este artigo explica como criar uma página de aterrissagem para seu visual. A página de aterrissagem aparece sempre que o Visual não tem dados.

Observação

A criação da página de aterrissagem do visual do Power BI é compatível com a API versão 2.3.0 e posteriores. Para descobrir qual versão você está usando, confira apiVersion no arquivo pbiviz.json.

Criação da página de aterrissagem

Para criar uma página de aterrissagem, dois recursos devem ser definidos no arquivo capabilities.json.

• Para que a página de aterrissagem funcione, habilite supportsLandingPage.
• Para que a página de aterrissagem seja exibida no modo de exibição ou para que o visual seja interativo mesmo quando não estiver no modo de funções de dados, habilite supportsEmptyDataView.

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

Exemplo de um visual com uma página de aterrissagem

O código a seguir mostra como uma página de aterrissagem pode ser adicionada a um visual de gráfico de barras.

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

Próximas etapas

Utilitários de formatação