Partilhar via

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

  • Artigo

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.

Importante

Qualquer visual que exporte dados (por exemplo, para um arquivo PowerPoint ou .pdf ) deve conter eventos de renderização para garantir que a exportação não comece antes que a renderização visual seja concluída.

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.

Nota

Os eventos de renderização são um requisito para a certificação de elementos visuais. Sem eles, seu visual não será aprovado pelo Partner Center para publicação. Para obter mais informações, consulte Requisitos de certificação.

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