Gebeurtenissen weergeven in Power BI-visuals

Als u een visual wilt laten certificeren, moet dit renderinggebeurtenissen bevatten. Met deze gebeurtenissen kunnen listeners (voornamelijk exporteren naar PDF en exporteren naar PowerPoint) weten wanneer de visual wordt weergegeven en wanneer deze gereed is voor export.

Belangrijk

Elke visual die gegevens exporteert (bijvoorbeeld naar een PowerPoint- of PDF-bestand ) moet rendering-gebeurtenissen bevatten om ervoor te zorgen dat de export niet begint voordat de visual klaar is met renderen.

De API voor renderingsevenementen bestaat uit drie methoden die moeten worden aangeroepen tijdens de rendering:

  • renderingStarted: De VisualCode van Power BI roept de renderingStarted methode aan om aan te geven dat het renderingproces is gestart. Deze methode moet altijd de eerste regel van de updatemethode zijn, omdat daar het renderingproces begint.

  • renderingFinished: Wanneer de rendering is voltooid, roept de Code van de Power BI-visual de methode aan om de listeners op de renderingFinished hoogte te stellen dat de afbeelding van de visual gereed is voor export. Deze methode moet de laatste regel code zijn die wordt uitgevoerd wanneer de visual wordt bijgewerkt. Dit is meestal, maar niet altijd, de laatste regel van de updatemethode.

  • renderingFailed: Als er een probleem optreedt tijdens het renderingproces, wordt de Power BI-visual niet goed weergegeven. Als u de listeners op de hoogte wilt stellen dat het renderingproces niet is voltooid, moet de visualcode van Power BI de renderingFailed methode aanroepen. Deze methode biedt ook een optionele tekenreeks om een reden voor de fout op te geven.

Notitie

Rendering-gebeurtenissen zijn een vereiste voor certificering van visuals. Zonder deze wordt uw visual niet goedgekeurd door het Partnercentrum voor publicatie. Zie certificeringsvereisten voor meer informatie.

De API voor rendering-gebeurtenissen gebruiken

Als u de renderingmethoden wilt aanroepen, moet u deze eerst importeren uit de IVisualEventService.

  1. Neem in het visual.ts bestand de regel op:

    import IVisualEventService = powerbi.extensibility.IVisualEventService;
    
  2. Neem in de IVisual klasse de regel op:

    private events: IVisualEventService;
    
  3. In de constructor methode van de IVisual klasse

    this.events = options.host.eventService;
    

U kunt nu de methoden this.events.renderingStarted(options);this.events.renderingFinished(options);aanroepen en this.events.renderingFailed(options); waar nodig in uw updatemethode.

Voorbeeld 1: Visual zonder animaties

Hier volgt een voorbeeld van een eenvoudige visual die gebruikmaakt van de API voor render-gebeurtenissen .

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

Voorbeeld 2: Visual met animaties

Als de visual animaties of asynchrone functies voor rendering bevat, moet de renderingFinished methode worden aangeroepen na de animatie of binnen de asynchrone functie, zelfs als dit niet de laatste regel van de updatemethode is.

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