Ajouter une page de destination à votre visuel Power BI
La page de destination d’un visuel Power BI peut afficher des informations dans votre carte visuelle Power BI avant que la carte obtienne des données. La page de destination d’un visuel peut afficher les éléments suivants :
- Texte expliquant comment utiliser le visuel.
- Lien vers votre site web.
- Lien vers une vidéo.
Cet article explique comment concevoir une page d’accueil pour votre visuel. La page de destination s’affiche chaque fois que le visuel ne contient pas de données.
Notes
La conception d’une page de destination de visuel Power BI est prise en charge à partir de la version d’API 2.3.0. Pour savoir quelle version vous utilisez, consultez la section apiVersion dans le fichier pbiviz.json .
Créer une page d’arrivée
Pour créer une page de destination, deux fonctionnalités doivent être définies dans le fichier capabilities.json.
- Pour que la page d’accueil fonctionne, activez
supportsLandingPage. - Pour que la page de destination apparaisse en mode affichage ou que le visuel soit interactif même en mode sans rôles de données, activez
supportsEmptyDataView.
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Exemple d’un visuel avec une page d’accueil
Le code suivant montre comment une page de destination peut être ajoutée à un visuel de graphique à barres.
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();
}
}
}