Aggiungere una pagina di destinazione all’oggetto visivo di Power BI
La pagina di destinazione di un oggetto visivo di Power BI può mostrare informazioni nella scheda visiva di Power BI prima che la scheda ottenga i dati. La pagina di destinazione di un oggetto visivo può mostrare:
- Del testo che spiega come usare l'oggetto visivo.
- Un collegamento al sito Web.
- Un 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 nel file pbiviz.json.
Creare una pagina di destinazione
Per creare una pagina di destinazione, è necessario impostare due funzionalità nel file capabilities.json.
- Perché la pagina di destinazione possa funzionare correttamente, abilitare
supportsLandingPage. - Affinché la pagina di destinazione venga mostrata in modalità di visualizzazione o affinché l'oggetto visivo sia interattivo anche quando non è in modalità no 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();
}
}
}