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éation d’une page d’accueil

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

Étapes suivantes

Utilitaires de mise en forme