Let us know so we can improve!
Enumeration: EventName
Enum representing the SDK events to listen for on embedded components.
Events triggered by component functions to handle with addEventListener().
-
COMPONENT_LOADED: Event received when a component loads completely, including all metadata, filters, and layouts. -
UPDATED_FILTERS: Event received when the filters for a component are updated. -
UPDATED_TIME_RANGE: Event received when the time range for anAnalyticsMetriccomponent is updated. -
UPDATED_SELECTIONS: Event received when the selections for anAnalyticsVisualizationcomponent are updated. -
RECEIVED_FILTERS: Event received when the list of applied filters for a component is loaded. -
RECEIVED_PAGES: Event received when a list of page labels for anAnalyticsDashboardcomponent is loaded. -
RECEIVED_METADATA: Event received with metadata of the analytics component (Dashboard, Visualization). -
RECEIVED_SELECTIONS: Event received when the list of applied selections for anAnalyticsVisualizationis loaded. -
RECEIVED_LAYOUT: Event received when the layout for anAnalyticsMetriccomponent is loaded. -
RECEIVED_DATASOURCES: Event received when the datasources of theAnalyticsDashboardcomponent is loaded. -
RECEIVED_FIELDS: Event received with fields associated with the analytics component. -
RECEIVED_FILTER_FIELD_VALUES: Event received with filter field values associated with a field of the analytics component. -
RECEIVED_INTERACTION_DETAILS: Event received with interactionDetails associated with the analytics component. -
DEFAULT: Event received when an enumerated event name isn’t specified. -
ERROR: Event received for global SDK and component errors.
Usage
1//JavaScript
2// Importing required modules and libraries from the Tableau Next Embedding SDK
3import {initializeAnalyticsSdk, AnalyticsDashboard, analyticsEventTarget, EventName} from '@salesforce/analytics-embedding-sdk';
4
5analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => { //Listening to global ERROR event, such as SDK or component initialization failures.
6 console.log("Received a global error event", errorEvent) //Error details, such as error code and message, are available in the event object
7});
8
9await initializeAnalyticsSdk({ //Configuration object for initializing the Tableau Next Embedding SDK
10 authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
11 orgUrl: '<%- org-url %>' //The Salesforce org URL that hosts the Analytics component to embed.
12});
13
14const analyticsDashboard = new AnalyticsDashboard({
15 parentIdOrElement: '<%- parent-element %>', //The parent ID or element to render the component in
16 idOrApiName: '<%- dashboard-id-or-api-name %>'}); //The ID or API name of the component to embed
17
18analyticsDashboard.addEventListener(EventName.ERROR, () => { //Listening to ERROR event
19 console.log("Received error");
20 });
21
22analyticsDashboard.addEventListener(EventName.COMPONENT_LOADED, () => { //Listening to COMPONENT_LOADED event triggered when the component gets loaded
23 console.log("Component Loaded");
24});
25
26analyticsDashboard.addEventListener(EventName.UPDATED_FILTERS, () => { //Event received when the filters for a component are updated.
27 console.log("Event received for filter change");
28});
29
30analyticsDashboard.addEventListener(EventName.RECEIVED_FILTERS, () => { //Event received when the list of applied filters for a component is loaded.
31 console.log("Received filters list using event");
32});
33
34analyticsDashboard.addEventListener(EventName.RECEIVED_PAGES, () => { //Event received when a list of page labels for an AnalyticsDashboard component is loaded.
35 console.log("Received page labels list using event");
36});
37
38analyticsDashboard.addEventListener(EventName.RECEIVED_METADATA, () => { //Event received with metadata of the analytics component ( Dashboard, Visualization).
39 console.log("Metadata received");
40});
41
42analyticsDashboard.addEventListener(EventName.RECEIVED_DATASOURCES, () => { //Event received when the datasources of the analytics dashboard is loaded.
43 console.log("Datasources received");
44});
45
46analyticsDashboard.addEventListener(EventName.RECEIVED_FIELDS, () => { //Event received with fields associated with the analytics component.
47 console.log("Fields received");
48});
49
50analyticsDashboard.addEventListener(EventName.RECEIVED_FILTER_FIELD_VALUES, () => { //Event received with filter field values associated with a field of the analytics component.
51 console.log("Received filter field values");
52});
53
54analyticsDashboard.addEventListener(EventName.RECEIVED_INTERACTION_DETAILS, () => { //Event received with interactionDetails associated with the analytics component.
55 console.log("InteractionDetails received");
56});
57
58analyticsDashboard.render(); //Renders the dashboard in the parent HTML element1//TypeScript
2// Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4 AnalyticsDashboard,
5 initializeAnalyticsSdk,
6 analyticsEventTarget,
7 type DashboardProps,
8 type AnalyticsSdkConfig
9} from '@salesforce/analytics-embedding-sdk';
10
11analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => { //Listening to global ERROR event, such as SDK or component initialization failures.
12 console.log("Received a global error event", errorEvent) //Error details, such as error code and message, are available in the event object
13});
14
15const config: AnalyticsSdkConfig = { //Configuration object for initializing the Tableau Next Embedding SDK
16 authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
17 orgUrl: "<%- org-url %>" //The Salesforce org URL that hosts the Analytics component to embed.
18};
19await initializeAnalyticsSdk(config); //Initializes the Tableau Next Embedding SDK with the provided configuration and returns a promise that resolves on successful initialization.
20
21const dashboardProps: DashboardProps = { // Defines the properties required for configuring a dashboard component.
22 parentIdOrElement: '<%- parent-element %>', //The parent ID or element to render the component in
23 idOrApiName: '<%- dashboard-id-or-api-name %>' //The ID or API name of the component to embed
24};
25
26const analyticsDashboard: AnalyticsDashboard = new AnalyticsDashboard(dashboardProps); //A web component for embedding an analytics dashboard
27
28analyticsDashboard.addEventListener(EventName.ERROR, (event) => { //Listening to component specific ERROR event
29 console.log("Received error", event); //Error details (such as error code and message) are available in the event object
30});
31
32analyticsDashboard.addEventListener(EventName.COMPONENT_LOADED, (event) => { //Listening to COMPONENT_LOADED event triggered when the component gets loaded
33 console.log("Component Loaded", event);
34});
35
36analyticsDashboard.addEventListener(EventName.UPDATED_FILTERS, (event) => { //Event received when the filters for a component are updated.
37 console.log("Event received for filter change: ", event);
38});
39
40analyticsDashboard.addEventListener(EventName.RECEIVED_FILTERS, (event) => { //Event received when the list of applied filters for a component is loaded.
41 console.log("Received filters list using event: ", event.detail);
42});
43
44analyticsDashboard.addEventListener(EventName.RECEIVED_PAGES, (event) => { //Event received when a list of page labels for an AnalyticsDashboard component is loaded.
45 console.log("Received page labels list using event: ", event.detail);
46});
47
48analyticsDashboard.addEventListener(EventName.RECEIVED_METADATA, (event) => { //Event received with metadata of the analytics component ( Dashboard, Visualization).
49 console.log("Metadata received: ", event.detail);
50});
51
52analyticsDashboard.addEventListener(EventName.RECEIVED_DATASOURCES, (event) => { //Event received when the datasources of the analytics dashboard is loaded.
53 console.log("Datasources received: ", event.detail);
54});
55
56analyticsDashboard.addEventListener(EventName.RECEIVED_FIELDS, (event) => { //Event received with fields associated with the analytics component.
57 console.log("Fields received: ", event.detail);
58});
59
60analyticsDashboard.addEventListener(EventName.RECEIVED_FILTER_FIELD_VALUES, (event) => { //Event received with filter field values associated with a field of the analytics component.
61 console.log("Received filter field values: ", event.detail);
62});
63
64analyticsDashboard.addEventListener(EventName.RECEIVED_INTERACTION_DETAILS, (event) => { //Event received with interactionDetails associated with the analytics component.
65 console.log("InteractionDetails received: ", event.detail);
66});
67
68analyticsDashboard.render(); //Renders the dashboard in the parent HTML elementEnumeration Members
COMPONENT_LOADED
COMPONENT_LOADED:
"ComponentLoaded"
DEFAULT
DEFAULT:
"DEFAULT"
ERROR
ERROR:
"Error"
RECEIVED_DATASOURCES
RECEIVED_DATASOURCES:
"ReceivedDatasources"
RECEIVED_FIELDS
RECEIVED_FIELDS:
"ReceivedFields"
RECEIVED_FILTERS
RECEIVED_FILTERS:
"ReceivedFilters"
RECEIVED_FILTER_FIELD_VALUES
RECEIVED_FILTER_FIELD_VALUES:
"ReceivedFilterFieldValues"
RECEIVED_INTERACTION_DETAILS
RECEIVED_INTERACTION_DETAILS:
"ReceivedInteractionDetails"
RECEIVED_LAYOUT
RECEIVED_LAYOUT:
"ReceivedLayout"
RECEIVED_METADATA
RECEIVED_METADATA:
"ReceivedMetadata"
RECEIVED_PAGES
RECEIVED_PAGES:
"ReceivedPages"
RECEIVED_SELECTIONS
RECEIVED_SELECTIONS:
"ReceivedSelections"
RECEIVED_TIME_RANGE
RECEIVED_TIME_RANGE:
"ReceivedTimeRange"
UPDATED_FILTERS
UPDATED_FILTERS:
"UpdatedFilters"
UPDATED_SELECTIONS
UPDATED_SELECTIONS:
"UpdatedSelections"
UPDATED_TIME_RANGE
UPDATED_TIME_RANGE:
"UpdatedTimeRange"
Let us know so we can improve!