Class: AnalyticsDashboard

1//JavaScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {initializeAnalyticsSdk, AnalyticsDashboard, analyticsEventTarget} 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, (event) => {        //Listening to component specific ERROR event
19           console.log("Received error", event);							//Error details (such as error code and message) are available in the event object
20      });
21
22      analyticsDashboard.addEventListener(EventName.COMPONENT_LOADED, () => {       //Listening to COMPONENT_LOADED event triggered when the component gets loaded
23           console.log("Component Loaded");
24      });
25
26analyticsDashboard.filters = [						//Sets filter property of the dashboard component to apply a filter on the embedded dashboard on load time.
27   {
28        dataSource: '<%- datasource-api-name %>',		//The semantic data model API name of the field to be filtered
29        fieldName: '<%- semantic-model-api-name %>.<%- field-api-name %>',	//The API name of the semantic model and the API name of the field to filter
30        values: ['<%- value %>'],											//The field value to filter the component with based on the operator <%filter-operator %>
31        operator: FilterOperator.<%filter-operator %>
32    }
33];
34
35analyticsDashboard.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      EventName,
8      FilterOperator,
9      type DashboardProps,
10      type AnalyticsSdkConfig
11} from '@salesforce/analytics-embedding-sdk';
12
13analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {		//Listening to global ERROR event, such as SDK or component initialization failures.
14		console.log("Received a global error event", errorEvent)				//Error details, such as error code and message, are available in the event object
15});
16
17const config: AnalyticsSdkConfig = {					//Configuration object for initializing the Tableau Next Embedding SDK
18 authCredential: "<%- authCredential %>",					//The frontdoor URL required for authentication
19 orgUrl: "<%- org-url %>"							//The Salesforce org URL that hosts the Analytics component to be embedded.
20};
21await initializeAnalyticsSdk(config);				//Initializes the Tableau Next Embedding SDK with the provided configuration and returns a promise that resolves on successful initialization.
22
23const dashboardProps: DashboardProps = {				// Defines the properties required for configuring a dashboard component.
24     parentIdOrElement: '<%- parent-element %>',   	 //The parent ID or element to render the component in
25     idOrApiName: '<%- dashboard-id-or-api-name %>'   //The ID or API name of the component to embed
26};
27
28const analyticsDashboard: AnalyticsDashboard = new AnalyticsDashboard(dashboardProps);    //A web component for embedding an analytics dashboard
29
30analyticsDashboard.addEventListener(EventName.ERROR, (event) => {			//Listening to  component specific ERROR event
31     console.log("Received error", event);									//Error details (such as error code and message) are available in the event object
32});
33
34analyticsDashboard.addEventListener(EventName.COMPONENT_LOADED, () => {			//Listening to COMPONENT_LOADED event triggered when the component gets loaded
35     console.log("Component Loaded");
36});
37
38analyticsDashboard.filters = [						//Sets filter property of the dashboard component to apply a filter on the embedded dashboard on load time.
39   {
40        dataSource: '<%- datasource-api-name %>',		//The semantic data model API name of the field to be filtered
41        fieldName: '<%- semantic-model-api-name %>.<%- field-api-name %>',	//The API name of the semantic model and the API name of the field to filter
42        values: ['<%- value %>'],											//The field value to filter the component with based on the operator <%filter-operator %>
43        operator: FilterOperator.<%filter-operator %>
44    }
45];
46
47analyticsDashboard.render();     					//Renders the dashboard in the parent HTML element

1// After initializing SDK with multiple orgs
2const dashboard1 = new AnalyticsDashboard({
3  parentIdOrElement: "container1",
4  idOrApiName: "Dashboard1",
5  orgUrl: "https://org1.lightning.force.com", // Required in multi-org
6});
7
8const dashboard2 = new AnalyticsDashboard({
9  parentIdOrElement: "container2",
10  idOrApiName: "Dashboard2",
11  orgUrl: "https://org2.lightning.force.com", // Required in multi-org
12});

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [
7  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData", // specifying data source for dashboards
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.

1// For metrics or visualizations, dataSource not needed.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [
6  {
7    fieldName: "Account.Name",
8    operator: FilterOperator.Equals,
9    values: ["Acme Corp"],
10  },
11];
12
13await component.applyFilters(filters); //applies the filters to the component.

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [
7  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData",
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.
16
17await component.clearFilters(); // Clears the filters applied to the component.

1// For metrics or visualizations, no need to pass dataSource.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [
6  {
7    fieldName: "Account.Name",
8    operator: FilterOperator.Equals,
9    values: ["Acme Corp"],
10  },
11];
12
13await component.applyFilters(filters); //applies the filters to the component.
14
15await component.clearFilters(); // Clears the filters applied to the component.

1// Assuming `myComponent` is an instance of a class that implements the export() method
2// Export with default filename and default PNG format
3await myComponent.export();
4
5// Export with a custom filename (still as PNG)
6await myComponent.export("my-component");
7
8// Export with custom filename and file type
9await myComponent.export("report", ExportFileType.PNG); // Currently only PNG supported

1const dashboard = new AnalyticsDashboard({
2  parentIdOrElement: "dashboard-container",
3  idOrApiName: "my-dashboard",
4});
5
6await dashboard.render();
7
8const dataSources = await dashboard.getDataSources();
9
10// Returns: Array<DataSource> where each DataSource has parameters for apiName and label.
11// - apiName: string (e.g., "Account", "Opportunity")
12// - label: string (e.g., "Account", "Sales Opportunity")
13
14// For simple text dashboards, returns empty array: []
15// For dashboards with data sources, returns array like:
16// [
17//   { apiName: "Account", label: "Account" },
18//   { apiName: "Opportunity", label: "Sales Opportunity" }
19// ]

1// For dashboards, specify one or more data sources or omit to get all:
2const fieldsMap = await component.getFields(); // returns fields for all data sources
3
4// Example response structure:
5// fieldsMap => Map {
6//   "SalesData" => [
7//     { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
8//     { apiName: "Region", label: "Region", dataType: "Text", fieldType: "Dimension" }
9//   ],
10//   "MarketingData" => [
11//     { apiName: "CampaignName", label: "Campaign Name", dataType: "Text", fieldType: "Dimension" }
12//   ]
13// }

1const fieldValues = await component.getFilterFieldValues("Account", "AccountObject", "Acme");
2console.log(fieldValues);
3
4// Example response:
5// [
6//   "Acme Corporation",
7//   "Acme Inc.",
8//   "Acme Solutions"
9// ]

1// For dashboards, the `dataSource` attribute is required in the filter input
2// to specify the data source to which the filter should be applied.
3
4await component.render();
5
6const filters: UnifiedFilterJson[] = [
7  {
8    fieldName: "Account.Name",
9    operator: FilterOperator.Equals,
10    values: ["Acme Corp"],
11    dataSource: "SalesData",
12  },
13];
14
15await component.applyFilters(filters); //applies the filters to the component.
16const appliedFilters = await component.getFilters(); // Returns the filters applied to the component.

1// For metrics or visualizations, no need to pass dataSource.
2
3await component.render();
4
5const filters: UnifiedFilterJson[] = [
6  {
7    fieldName: "Account.Name",
8    operator: FilterOperator.Equals,
9    values: ["Acme Corp"],
10  },
11];
12
13await component.applyFilters(filters); //applies the filters to the component.
14const appliedFilters = await component.getFilters(); // Returns the filters applied to the component.

1const interactionDetails = await component.getInteractionDetails();
2
3// Example response structure for dashboard:
4// {
5//   dataSources: [
6//     { apiName: "SalesData", label: "Sales Data Source" },
7//     { apiName: "MarketingData", label: "Marketing Data Source" }
8//   ],
9//   fields: Map {
10//     "SalesData" => [
11//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" },
12//       { apiName: "Region", label: "Region", dataType: "String", fieldType: "Dimension" }
13//     ],
14//     "MarketingData" => [
15//       { apiName: "CampaignName", label: "Campaign Name", dataType: "String", fieldType: "Dimension" }
16//     ]
17//   },
18//   filterFields: Map {
19//     "SalesData" => [
20//       { apiName: "Amount", label: "Amount", dataType: "Number", fieldType: "Measure" }
21//     ],
22//     "MarketingData" => [
23//       { apiName: "CampaignName", label: "Campaign Name", dataType: "String", fieldType: "Dimension" }
24//     ]
25//   }
26// }

1const dashboard = new AnalyticsDashboard({
2  parentIdOrElement: "dashboard-container",
3  idOrApiName: "my-dashboard",
4});
5
6await dashboard.render();
7
8const dashboardPages = await dashboard.getPages();
9
10// Returns: string[]
11
12// For dashboards with multiple pages, returns array of page labels:
13// For example, ["Overview", "Sales Performance", "Regional Analysis"]

1const dashboard = new AnalyticsDashboard({
2  parentIdOrElement: "dashboard-container",
3  idOrApiName: "my-dashboard",
4});
5
6await dashboard.render();
7
8const pageLabel = "Sales Performance";
9
10await dashboard.setPage(pageLabel);
11
12// The dashboard now displays the "Sales Performance" page.