Handling Events

Noa edited this page Feb 1, 2017 · 11 revisions

An embedded component will emit events after a command invoked on it has been executed and the operation has completed. These commands could be sent programmatically through the SDK or from the user directly interacting with the report.

For example, a user can manually change pages by using the built-in page navigation and clicking on the buttons, or you can programmatically change the page by sending the correct postMessage. In both cases a pageChanged event will occur. The events are simulated and emitted from the containing DOM element so you can use the framework of your choice to bind to these.

Full list of events and their response values

All Embeds

loaded
    configuration
error
    This is the structure of the error object:

        interface IError {
           message: string; // A general message that describes the operation that failed (example: "Could not set page")
           detailedMessage?: string; // Detailed message that describes the error
           errorCode?: string;  //  Short message that describes the error
           technicalDetails?: ITechnicalDetails;
        }

        interface ITechnicalDetails {
           requestId?: string; // Id for debugging - should be provided when reporting a bug
        }

        Note, that only "message" property is required, other properties may be undefined.

Reports

rendered
    Called when a report is fully rendered. For example, if all visuals are rendered on loading report or after user interaction.

pageChanged
    newPage: Page

filtersApplied (Not supported yet)
    filters

dataSelected
    report: Report
    page: Page
    visual: Visual (Will be defined)
    filters: IFilter[]
    dataPoints: (Array of data points)
        each point has:
        1) **identity** array
        2) **values** array (In Progress)

Example

You must wait for the report to be fully loaded before you can send commands to it. This is very similar to waiting for the DOM to be ready before attempting to take action on the elements. In order to do this you must listen for the loaded event and then issue new commands:

report.on('loaded', function(event)
{
    report.getPages().then(function(pages)
    {
        this.reportPages = pages;
    });
});