"Renderização" de eventos em visuais do Power BI

Para obter uma certificação visual, ela deve incluir eventos de renderização. Esses eventos permitem que os ouvintes (principalmente, exportem para PDF e exportem para PowerPoint) saibam quando o visual está sendo renderizado e quando está pronto para exportação.

A API de eventos de renderização consiste em três métodos que devem ser chamados durante a renderização:

• renderingStarted: O código visual do Power BI chama o renderingStarted método para indicar que o processo de renderização foi iniciado. Esse método deve ser sempre a primeira linha do método de atualização, pois é aí que o processo de renderização começa.

• renderingFinished: Quando a renderização é concluída com êxito, o código visual do Power BI chama o renderingFinished método para notificar os ouvintes de que a imagem do visual está pronta para exportação. Este método deve ser a última linha de código executada quando o visual é atualizado. Normalmente, mas nem sempre, é a última linha do método de atualização.

• renderingFailed: Se ocorrer um problema durante o processo de renderização, o visual do Power BI não será renderizado com êxito. Para notificar os ouvintes de que o processo de renderização não foi concluído, o código visual do Power BI deve chamar o renderingFailed método. Esse método também fornece uma cadeia de caracteres opcional para fornecer um motivo para a falha.

Como usar a API de eventos de renderização

Para chamar os métodos de renderização, você precisa primeiro importá-los do IVisualEventService.

1. No seu visual.ts ficheiro, inclua a linha:

   import IVisualEventService = powerbi.extensibility.IVisualEventService;
   

2. Na classe inclua a IVisual linha:

   private events: IVisualEventService;
   

3. constructor No método da IVisual classe

   this.events = options.host.eventService;
   

Agora você pode chamar os métodos this.events.renderingStarted(options);, this.events.renderingFinished(options);e this.events.renderingFailed(options); , quando apropriado, em seu método de atualização .

Exemplo 1: Visual sem animações

Aqui está um exemplo de um visual simples que usa a API de eventos de renderização.

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

Exemplo 2: Visual com animações

Se o visual tiver animações ou funções assíncronas para renderização, o renderingFinished método deve ser chamado após a animação ou dentro da função assíncrona, mesmo que não seja a última linha do método de atualização .

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

Conteúdos relacionados

• Visual API
• Obtenha uma certificação visual do Power BI