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 {
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 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!