Adicionar uma página de destino ao seu visual do Power BI
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.
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();
}
}
}