Partager via

Événements de « rendu » dans les visuels Power BI

  • Article

Pour obtenir un visuel certifié, il doit inclure des événements de rendu. Ces événements permettent aux écouteurs (principalement Exporter au format PDF et Exporter vers PowerPoint) de savoir quand le visuel est rendu et quand il est prêt à être exporté.

Important

Tout visuel qui exporte des données (par exemple, vers un fichier PowerPoint ou .pdf) doit contenir des événements de rendu pour que l’exportation ne commence pas avant la fin du rendu du visuel.

L’API des événements de rendu est constituée de trois méthodes qui doivent être appelées pendant le rendu :

  • renderingStarted : le code du visuel Power BI appelle la méthode renderingStarted pour signaler que le processus de rendu a commencé. Cette méthode doit toujours être la première ligne de la méthode update, car c’est là que le processus de rendu commence.

  • renderingFinished : quand le rendu a réussi, le code du visuel Power BI appelle la méthode renderingFinished pour informer les écouteurs que l’image du visuel est prête à être exportée. Cette méthode doit être la dernière ligne de code exécutée quand le visuel est mis à jour. Il s’agit généralement de la dernière ligne de la méthode de mise à jour, mais pas toujours.

  • renderingFailed : si un problème se produit pendant le processus de rendu, le visuel Power BI ne s’affiche pas correctement. Pour signaler aux écouteurs que le processus de rendu n’a pas été terminé, le code du visuel Power BI doit appeler la méthode renderingFailed. Cette méthode fournit également une chaîne facultative pour fournir la raison de l’échec.

Notes

Les événements de rendu sont obligatoires pour la certification des visuels. Sans eux, votre visuel ne sera pas approuvé par l’Espace partenaires pour la publication. Pour plus d’informations, consultez les critères de certification.

Comment utiliser l’API des événements de rendu

Pour appeler les méthodes de rendu, vous devez d’abord les importer à partir d’IVisualEventService.

  1. Dans votre fichier visual.ts, incluez la ligne suivante :

    import IVisualEventService = powerbi.extensibility.IVisualEventService;

  2. Dans la classe IVisual, incluez la ligne suivante :

    private events: IVisualEventService;

  3. Dans la méthode constructor de la classe IVisual

    this.events = options.host.eventService;

Vous pouvez maintenant appeler les méthodes this.events.renderingStarted(options);, this.events.renderingFinished(options); et this.events.renderingFailed(options);, le cas échéant, dans votre méthode update.

Exemple 1 : Visuel sans animations

Voici un exemple d’un visuel simple qui utilise l’API des événements de rendu.

    export class Visual implements IVisual {
        ...
        private events: IVisualEventService;
        ...

        constructor(options: VisualConstructorOptions) {
            ...
            this.events = options.host.eventService;
            ...
        }

        public update(options: VisualUpdateOptions) {
            this.events.renderingStarted(options);
            ...
            this.events.renderingFinished(options);
        }

Exemple 2 : Visuel avec animations

Si le visuel comporte des animations ou des fonctions asynchrones pour le rendu, la méthode renderingFinished doit être appelée après l’animation ou au sein de la fonction asynchrones, même s’il ne s’agit pas de la dernière ligne de la méthode update.

    export class Visual implements IVisual {
        ...
        private events: IVisualEventService;
        private element: HTMLElement;
        ...

        constructor(options: VisualConstructorOptions) {
            ...
            this.events = options.host.eventService;
            this.element = options.element;
            ...
        }

        public update(options: VisualUpdateOptions) {
            this.events.renderingStarted(options);
            ...
            // Learn more at https://github.com/d3/d3-transition/blob/master/README.md#transition_end
            d3.select(this.element).transition().duration(100).style("opacity","0").end().then(() => {
                // renderingFinished called after transition end
                this.events.renderingFinished(options);
            });
        }

Contenu connexe