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 {
4  initializeAnalyticsSdk,
5  AnalyticsDashboard,
6  analyticsEventTarget,
7  EventName,
8} from "@salesforce/analytics-embedding-sdk";
9
10analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {
11  //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
15await initializeAnalyticsSdk({
16  //Configuration object for initializing the Tableau Next Embedding SDK
17  authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
18  orgUrl: "<%- org-url %>", //The Salesforce org URL that hosts the Analytics component to embed.
19});
20
21const analyticsDashboard = new AnalyticsDashboard({
22  parentIdOrElement: "<%- parent-element %>", //The parent ID or element to render the component in
23  idOrApiName: "<%- dashboard-id-or-api-name %>",
24}); //The ID or API name of the component to embed
25
26analyticsDashboard.addEventListener(EventName.ERROR, () => {
27  //Listening to ERROR event
28  console.log("Received error");
29});
30
31analyticsDashboard.addEventListener(EventName.COMPONENT_LOADED, () => {
32  //Listening to COMPONENT_LOADED event triggered when the component gets loaded
33  console.log("Component Loaded");
34});
35
36analyticsDashboard.addEventListener(EventName.UPDATED_FILTERS, () => {
37  //Event received when the filters for a component are updated.
38  console.log("Event received for filter change");
39});
40
41analyticsDashboard.addEventListener(EventName.RECEIVED_FILTERS, () => {
42  //Event received when the list of applied filters for a component is loaded.
43  console.log("Received filters list using event");
44});
45
46analyticsDashboard.addEventListener(EventName.RECEIVED_PAGES, () => {
47  //Event received when a list of page labels for an AnalyticsDashboard component is loaded.
48  console.log("Received page labels list using event");
49});
50
51analyticsDashboard.addEventListener(EventName.RECEIVED_METADATA, () => {
52  //Event received with metadata of the analytics component ( Dashboard, Visualization).
53  console.log("Metadata received");
54});
55
56analyticsDashboard.addEventListener(EventName.RECEIVED_DATASOURCES, () => {
57  //Event received when the datasources of the analytics dashboard is loaded.
58  console.log("Datasources received");
59});
60
61analyticsDashboard.addEventListener(EventName.RECEIVED_FIELDS, () => {
62  //Event received with fields associated with the analytics component.
63  console.log("Fields received");
64});
65
66analyticsDashboard.addEventListener(EventName.RECEIVED_FILTER_FIELD_VALUES, () => {
67  //Event received with filter field values associated with a field of the analytics component.
68  console.log("Received filter field values");
69});
70
71analyticsDashboard.addEventListener(EventName.RECEIVED_INTERACTION_DETAILS, () => {
72  //Event received with interactionDetails associated with the analytics component.
73  console.log("InteractionDetails received");
74});
75
76analyticsDashboard.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"