Use Cases for Tableau Next Embedding

These use cases show end-to-end examples of functionality for your embedding code.

For embedded components, perform interactive operations only after the component has rendered. Alternatively, you can use the COMPONENT_LOADED event, performing operations within its callback.

Get the List of Dashboard Filters

This example shows how to get the list of filters for a dashboard when the dashboard component loads.

1<div id='analytics-container'></div>
2<script type="module">
3  import {
4    initializeAnalyticsSdk,
5    AnalyticsDashboard,
6    EventName,
7  } from "/analytics-embedding-sdk.js";
8  const config = {
9    authCredential: "https://<frontdoor-url>",
10    orgUrl: "https://<your-org-url>"
11  };
12
13  await initializeAnalyticsSdk(config);
14
15  const dashboard = new AnalyticsDashboard(
16    {
17      parentIdOrElement: 'analytics-container',
18      idOrApiName: <asset identifier>
19    }
20  );
21
22  await dashboard.render();
23  const listOfFilters = dashboard.getFilters();
24  console.log("List of filters: ", listOfFilters);
25</script>

Apply an Updated Dashboard Filter

This example shows how to listen for the UPDATED_FILTERS event and apply the updated filter to the dashboard.

1<div id='analytics-container'></div>
2<script type="module">
3  import {
4    initializeAnalyticsSdk,
5    AnalyticsDashboard,
6    EventName,
7  } from "/analytics-embedding-sdk.js";
8  const config = {
9    authCredential: "https://<frontdoor-url>",
10    orgUrl: "https://<your-org-url>"
11  };
12
13  await initializeAnalyticsSdk(config);
14
15  const dashboard = new AnalyticsDashboard(
16    {
17      parentIdOrElement: 'analytics-container',
18      idOrApiName: <asset identifier>
19    }
20  );
21
22  await dashboard.render();
23
24  dashboard.addEventListener(EventName.UPDATED_FILTERS, (event) => {
25      console.log("Event received for filter change event: ", event.type);
26    }
27  );
28  const filterInfo =
29    [{
30      "dataSource": "superstore_orders",
31      "fieldName": "superstore_orders.Ship_Mode",
32      "values": [
33        "Same Day",
34        "First Class",
35        "Second Class"
36      ],
37      "operator": "Equals"
38    }];
39  await dashboard.applyFilters(filterInfo);
40
41</script>

Embed a Specific Dashboard Page

This example shows how to get the list the pages for a dashboard and then render that dashboard page.

1div id="analytics-container"></div>
2<script type="module">
3  import {
4    initializeAnalyticsSdk,
5    AnalyticsDashboard,
6    EventName,
7  } from "/analytics-embedding-sdk.js";
8  const config = {
9    authCredential: "https://<frontdoor-url>",
10    orgUrl: "https://<your-org-url>"
11  };
12  
13  await initializeAnalyticsSdk(config);
14
15  const dashboard = new AnalyticsDashboard({
16    parentIdOrElement: "analytics-container",
17    idOrApiName: "<asset-identifier>"
18  });
19
20  dashboard.addEventListener(EventName.COMPONENT_LOADED, async () => {
21    const pages = await dashboard.getPages();
22    if (pages && pages.length > 1) {
23      const secondPageLabel = pages[1];
24      await dashboard.setPage(secondPageLabel);
25    }
26  });
27  await dashboard.render();
28</script>

Embed a Custom Dashboard View

Use the customViewId to embed a dashboard with a saved interactive state, such as pre-applied filters or context from a shared dashboard page. You can embed custom views when:

You want users to view a dashboard in a specific saved state.
You are embedding dashboard URLs that contain the customViewId query parameter.
You required consistent interactivity context across sessions or channels.

This example shows the AnalyticsDashboard component with the customViewId.

1import {
2  initializeAnalyticsSdk,
3  AnalyticsDashboard,
4  EventName,
5  analyticsEventTarget
6} from '@salesforce/analytics-embedding-sdk';
7
8await initializeAnalyticsSdk({
9  authCredential: "https://<frontdoor-url>",
10  orgUrl: "https://<your-org-url>"
11});
12
13const dashboard = new AnalyticsDashboard({
14  parentIdOrElement: 'dashboard-container',
15  idOrApiName: 'MyDashboard',
16  customViewId: 'cview_abc123' // Optional
17});
18await dashboard.render();

The customViewId is part of the dashboard URL when a custom view is rendered. In this example, the customViewId is cview_abc123.

1https://<host>/tableau/dashboard/MyDashboard/view?customViewId=cview_abc123

If the customViewId is omitted, the dashboard renders to the default page and view.

If the customViewId is invalid or not accessible, the dashboard renders to the default page and view.