Embedded Events
Events can be used in your JavaScript to control an embedded Composer component when specific events occur.
Embedded events are described in the following tables:
Sample code showing how to subscribe to the events that trigger the event listeners is provided in each description. In these examples, when the event is triggered, a log message is written to the console. You can alter this behavior using custom JavaScript appropriate for your installation. For example, you can trigger a pop-up message (instead of a log message) using the Javascript alert() method instead of the console.log() method. For example: alert("Dashboard has been loaded !!!");
Important: The event detail payload that is passed to the event listener is experimental and might be changed. Mutating the detail object (e.detail.*) will not update the UI; the object is read-only.
Note: Composer provides a componentInstanceId provides a as part of event details for dashboard, source, and visual events.
Document Events
| Event | Description |
|---|---|
|
Triggered by document if the component fails to initialize. No data is passed in the event. document.addEventListener("composer-init-failed", () => {
console.log("composer-init-failed"); }); |
|
Triggered by document when the authorization token expires. No data is passed in the event. document.addEventListener("composer-unauthorized", () => {
console.log("composer-unauthorized");
});
|
Dashboard Events
| Event | Description |
|---|---|
|
The trigger behavior of When When dashboard.addEventListener("composer-dashboard-changed", (e) => {
console.log(e.detail.dashboard); }); Enable in the embed SDK configuration. See example. const componentConfig = {
// "originId": "",
//"dashboardId": "XYZ",
"fireOnEveryChange": false,
//"reportId": "6926a66420d7ee252b297520",
// "interactivityProfileName":"interactive",
// "theme":"__platform__",
// "editor": { "placement": "modals" },
"header": {
"showActions": true,
"showTitle": true,
"visible": true
},
|
|
Triggered by the dashboard when the dashboard is deleted. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-deleted", (e) => {
console.log(e.detail.dashboard);
});
|
|
Triggered by the dashboard when the dashboard fails to load. The data passed in the event includes the failure reason (failedReason).dashboard.addEventListener("composer-dashboard-failed", (e) => {
console.log(e.detail.failedReason);
});
|
|
Triggered when a dashboard resource is loaded. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-loaded", (e) => {
console.log(e.detail.dashboard);
});
|
|
Triggered by the dashboard when all visuals on the dashboard have been rendered. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-ready", (e) => {
console.log(e.detail.dashboard);
});
|
|
Triggered by the dashboard when a dashboard resource has been successfully saved. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-saved", (e) => {
console.log(e.detail.dashboard);
});
|
|
Triggered by the dashboard when a visual is added to the dashboard. The data passed in the event includes the visual and visual data ( dashboard.addEventListener("composer-dashboard-widget-added", (e) => {
console.log(e.detail.visual);
});
|
|
Triggered by the dashboard when a visual is removed from the dashboard. The data passed in the event includes the visual and visual data ( dashboard.addEventListener("composer-dashboard-widget-removed", (e) => {
console.log(e.detail.visual);
});
|
|
Triggered by the dashboard when changes are made but not saved. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-pristine", (e) => {
console.log(e.detail.dashboard);
});
|
|
Triggered by the dashboard when there are no unsaved changes to the dashboard. The data passed in the event includes the dashboard and dashboard data ( dashboard.addEventListener("composer-dashboard-widget-removed", (e) => {
console.log(e.detail.dashboard);
});
|
Visual Authoring Events
| Event | Description |
|---|---|
|
The trigger behavior of When When embeddedComponent.addEventListener("composer-visual-builder-changed", (e) => {
console.log(e.detail.visualBuilder); }); Enable in the embed SDK configuration. See example. const componentConfig = {
// "originId": "",
//"dashboardId": "XYZ",
"fireOnEveryChange": false,
//"reportId": "6926a66420d7ee252b297520",
// "interactivityProfileName":"interactive",
// "theme":"__platform__",
// "editor": { "placement": "modals" },
"header": {
"showActions": true,
"showTitle": true,
"visible": true
},
|
|
Triggered when visual authoring fails to load. The data passed in the event includes the visual builder data as well as the failure reason ( embeddedComponent.addEventListener("composer-visual-builder-failed", (e) => {
console.log(e.detail.visualBuilder);
console.log(e.detail.failedReason); }); |
|
Triggered when visual authoring is loaded and the visual authoring shell is rendered. The data passed in the event includes the visual authoring configuration ( embeddedComponent.addEventListener("composer-visual-builder-loaded", (e) => {
console.log(e.detail.visualBuilder); }); |
|
Triggered when the nested visual is rendered. The data passed in the event includes the visual authoring configuration ( embeddedComponent.addEventListener("composer-visual-builder-ready", (e) => {
console.log(e.detail.visualBuilder); }); |
Visual Events
| Event | Description |
|---|---|
|
Triggered by the dashboard or by visual authoring when a visual within the dashboard fails to load. The data passed in the event includes the visual and visual data as well as the failure reason ( embeddedComponent.addEventListener("composer-visual-failed", (e) => {
console.log(e.detail.visual);
console.log(e.detail.failedReason);
});
|
|
Triggered by the dashboard or visual authoring when a visual within the dashboard is loaded. The data passed in the event includes the visual and visual data as well as the visualization instance ID ( embeddedComponent.addEventListener("composer-visual-loaded", (e) => {
console.log(e.detail.visual);
});
|
|
Triggered by the dashboard or visual authoring when a visual within the dashboard is fully rendered. The data passed in the event includes the visual and visual data as well as the visualization instance ID ( embeddedComponent.addEventListener("composer-visual-rendered", (e) => {
console.log(e.detail.visual);
});
|
|
Triggered when visual authoring has been successfully saved. The data passed in the event includes the visual authoring configuration ( vb.addEventListener("composer-visual-saved", (e) => {
console.log(e.detail.visual); }); |
|
Triggered when a user hovers over one item in a series, such as a bar on a bar chart, or sector in a pie visual. The data passed in the event includes embeddedComponent.addEventListener("composer-visual-series-mousemove", (e) => {
console.log(e.detail.componentInstanceId);
console.log(e.detail.visualApi);
console.log(e.detail.data);
});
|
|
Triggered when a user stops hovering over an item in a series, such as a bar on a bar chart, or sector in a pie visual. embeddedComponent.addEventListener("composer-visual-series-mouseout", (e) => {
console.log(e.detail.componentInstanceId);
console.log(e.detail.visualApi);
});
|
|
Triggered when a user hovers over a space that is empty but related to a visual, such as between the bars of a visual, or in a blank spot on a pie visual. embeddedComponent.addEventListener("composer-visual-series-mousemove", (e) => {
console.log(e.detail.componentInstanceId);
console.log(e.detail.visualApi);
});
|
|
Triggered when a user stops hovering the visual. embeddedComponent.addEventListener("composer-visual-series-mouseout", (e) => {
console.log(e.detail.componentInstanceId);
console.log(e.detail.visualApi);
});
|
Source Editor Events
| Event | Description |
|---|---|
|
Triggered when the source editor is rendered the first time. The data passed in the event is sourceEditor.addEventListener("composer-source-editor-ready", (e) =>{ console.log(e);
});
|
|
Triggered when a source is loaded on Source Creation tab. The data passed in the event include the source definition: sourceEditor.addEventListener("composer-source-definition-ready", (e) => { console.log(e.detail.source);
});
|
|
Triggered when source fields are loaded on the Fields tab. The data passed in the event includes the source fields: sourceEditor.addEventListener("composer-source-fields-ready", (e) => {
console.log(e.detail.fields);
});
|
|
Triggered when source cache settings are loaded on the Cache tab. The data passed in the event includes the source cache settings: sourceEditor.addEventListener("composer-source-cache-ready", (e) => {
console.log(e.detail.cache);
});
|
|
Triggered when source global settings are loaded on the Global Settings tab. The data passed in the event includes the source global settings: sourceEditor.addEventListener("composer-source-settings-ready", (e) => {
console.log(e.detail.settings);
});
|
|
Triggered when a source is created. The data passed in the event includes the source definition: sourceEditor.addEventListener("composer-source-created", (e) => {
console.log(e.detail.source);
});
|
|
Triggered when a source is saved. The data passed in the event includes the source definition: sourceEditor.addEventListener("composer-source-saved", (e) => {
console.log(e.detail.source);
});
|
|
Triggered when a source field is created. The data passed in the event includes the source field: sourceEditor.addEventListener("composer-source-field-created", (e) => {
console.log(e.detail.field);
});
|
|
Triggered when a source field is saved. The data passed in the event includes the source field: sourceEditor.addEventListener("composer-source-field-saved", (e) => {
console.log(e.detail.field);
});
|
|
Triggered when a source field is deleted. The data passed in the event includes the source field: sourceEditor.addEventListener("composer-source-field-deleted", (e) => {
console.log(e.detail.field);
});
|
|
Triggered when a source metric is created. The data passed in the event includes the source metric: sourceEditor.addEventListener("composer-source-metric-created", (e) => {
console.log(e.detail.metric);
});
|
|
Triggered when a source metric is saved. The data passed in the event includes the source metric: sourceEditor.addEventListener("composer-source-metric-saved", (e) => {
console.log(e.detail.metric);
});
|
|
Triggered when a source metric is deleted. The data passed in the event includes the source metric: sourceEditor.addEventListener("composer-source-metric-deleted", (e) => {
console.log(e.detail.metric);
});
|
Comments
0 comments
Please sign in to leave a comment.