Partilhar via

Adicionar uma página de destino ao seu visual do Power BI

  • Artigo

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

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

Screenshot of a Power BI visual's example landing page.

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

Nota

A criação de uma página de destino visual do Power BI é suportada na API versão 2.3.0 e superior. Para descobrir qual versão você está usando, verifique o apiVersion no arquivo pbiviz.json .

Criação de uma página de destino

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

  • Para que a página de destino funcione, habilite supportsLandingPageo .
  • Para que a página de destino 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 supportsEmptyDataViewo .
    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Exemplo de um visual com uma página de destino

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

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

Conteúdos relacionados

Formatação utils