(v24) Embedded Data Discovery Dashboard JavaScript Example

Embedded Data Discovery Dashboard JavaScript Example

This applies to: Visual Data Discovery

The following JavaScript example uses methods, properties, and embedded events of the EmbedManager class to embed, refresh, reauthenticate, and remove a dashboard.

• The createOrGetEmbedManager asynchronous function provides an initial access token using Trusted Access.

• The addDashboard asynchronous function embeds a dashboard in the application. It uses the dashboard ID as input so it knows which dashboard to embed. It also specifies some properties for the dashboard.

• The clearDashboard asynchronous function removes a dashboard from the application. It uses the dashboard ID as input so it knows which dashboard to remove.

• The refreshDashboard asynchronous function refreshes the authorization token for the embedded dashboard using Trusted Access.

• The application asynchronous function at the end combines the use of all the previous functions and uses embedded events to trigger some of them.

Note: The SymphonyEmbedManager class must be made available to your HTML application prior to using this sample in your application. See Embed Symphony Components Using JavaScript and Trusted Access.

Note: Symphony provides a componentInstanceId provides a as part of event details for dashboard, source, and visual events.

async function createOrGetEmbedManager(<token>) { return window.initComposerEmbedManager({ //embed manager is a singleton and will be created only on the first call getToken: function () { // transform for the embed syntax return getToken().then((result) => { return { "access_token": "result.token", "expires_in": "result.expiresIn", }; }); } }); } async function addDashboard(<id>) { // id of the composer dashboard const embedManager = await createOrGetEmbedManager(); const dashboard = await embedManager.createComponent('dashboard', { "dashboardId": "<id>", // required "theme": "composer", "interactivityProfileName": "interactive", interactivityOverrides { "settings":{ "CHANGE_LAYOUT": true, }, "visualSettings":{ "FILTER": false, }, }, "editor": { "placement": "dockRight" // use eve sidepanel }, "header": { "visible": true, "showTitle": true, "showActions": false, // will hide actions bar "title": "Static custom title" } }); dashboard.render(document.querySelector('#dashboard'), { width: '800px', height: '400px' }); return dashboard; } async function clearDashboard(<id>) { const embedManager = await createOrGetEmbedManager(); embedManager.removeComponent(<id>); } async function refreshDashboard(<newToken>) { const embedManager = await createOrGetEmbedManager(); embedManager.updateToken(<newToken>).then(() => { embedManager.refresh(); }); } (async function application() { const token = await getComposerToken(); // some function of the 3rd party app that calls application API and return composer token retrieved via TA const dashboards = await getUserDashboard(); // some function of the 3rd party app that retrieved dashboards for the user createOrGetEmbedManager(token); // if token is expired composer will raise next event document.addEventListener('composer-unathorized', async () => { const token = await getComposerToken(); const embedManager = createOrGetEmbedManager(); refreshDashboard(token); }) // render first dashboard in the list const embeddedDashboard = addDashboard(dashboards[0].id); // embedded component supports an ability to subscribe on the component specific events embeddedDashboard.addEventListener('composer-dashboard-ready', () => { // triggered when all charts are rendered. put custom logic here. }) document.querySelector('#clear-button').addEventListener('click', () => { clearDashboard(embeddedDashboard.componentInstanceId); // clears embedded dashboard when clicked on some button in the application }) })()