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 an AnalyticsMetric component is updated.

  • UPDATED_SELECTIONS: Event received when the selections for an AnalyticsVisualization component 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 an AnalyticsDashboard component 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 an AnalyticsVisualization is loaded.

  • RECEIVED_LAYOUT: Event received when the layout for an AnalyticsMetric component is loaded.

  • RECEIVED_DATASOURCES: Event received when the datasources of the AnalyticsDashboard component 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 element
1//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 element

Enumeration 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"