(v24) Embedded Data Discovery Visual Authoring JavaScript Example

Embedded Data Discovery Visual Authoring JavaScript Example

This applies to: Visual Data Discovery

The following JavaScript example uses methods, properties, and embedded events of the EmbedManager class to embed a visual authoring instance.

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.

// NOTE: This example assumes that the EmbedManager has already been initialized const visualBuilder = await embedManager.createComponent('visual-builder', { visualId: <id>, // ID of existing visual source: { "visualId": "<id>", // ID of visual template, used for creating a new visual, do not pass it with visualId }, // If neither visualId is passed (visualId or source.visualId) an empty visual builder will be opened) "theme": "composer", "header": { "visible": true, "showTitle": true, "showActions": false, // hides the visual actions bar "title": "Static custom title" }, "breadcrumbs": { // optional configuration of the breadcrumbs "title": "Visuals", "onClick": () => {console.log('clicked')}, "href": "http://www.google.com", "target": "_blank" }, interactivityOverrides: { // optional overrides for visual interactivity "visualSettings": { "FILTER": false, "GROUPING": true, "METRICS": false, // accept both boolean and string values "SETTINGS": false, "SORT": true, "ZOOM_ACTION": false } } }); visualBuilder.render(document.querySelector('#builder'), { width: '800px', height: '100px' });