---
schema_version: "1"
id: de29828e2567179fc59bcbdb34c3b56adc050c232f078f6f3defa64083ff2d69
title: Use Cases for Tableau Next Embedding
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/analytics/sdk/guides/sdk-use-cases.md
canonical_url: https://developer.salesforce.com/docs/analytics/sdk/guide/sdk-use-cases.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5739cca9c80d2b18d059c88bc84102ebaac1eaf9bbe7eb9097544b059871f37d
products:
  - Tableau Next Embedding SDK
  - analytics
---
# 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.

```javascript
<div id='analytics-container'></div>
<script type="module">
  import {
    initializeAnalyticsSdk,
    AnalyticsDashboard,
    EventName,
  } from "/analytics-embedding-sdk.js";
  const config = {
    authCredential: "https://<frontdoor-url>",
    orgUrl: "https://<your-org-url>"
  };

  await initializeAnalyticsSdk(config);

  const dashboard = new AnalyticsDashboard(
    {
      parentIdOrElement: 'analytics-container',
      idOrApiName: <asset identifier>
    }
  );

  await dashboard.render();
  
  const listOfFilters = await dashboard.getFilters();
  console.log("List of filters: ", listOfFilters);
</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.

```javascript
<div id='analytics-container'></div>
<script type="module">
  import {
    initializeAnalyticsSdk,
    AnalyticsDashboard,
    EventName,
  } from "/analytics-embedding-sdk.js";
  const config = {
    authCredential: "https://<frontdoor-url>",
    orgUrl: "https://<your-org-url>"
  };

  await initializeAnalyticsSdk(config);

  const dashboard = new AnalyticsDashboard(
    {
      parentIdOrElement: 'analytics-container',
      idOrApiName: <asset identifier>
    }
  );

  await dashboard.render();

  dashboard.addEventListener(EventName.UPDATED_FILTERS, (event) => {
      console.log("Event received for filter change event: ", event.type);
    }
  );
  const filterInfo =
    [{
      "dataSource": "superstore_orders",
      "fieldName": "superstore_orders.Ship_Mode",
      "values": [
        "Same Day",
        "First Class",
        "Second Class"
      ],
      "operator": "Equals"
    }];
  await dashboard.applyFilters(filterInfo);

</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.

```javascript
div id="analytics-container"></div>
<script type="module">
  import {
    initializeAnalyticsSdk,
    AnalyticsDashboard,
    EventName,
  } from "/analytics-embedding-sdk.js";
  const config = {
    authCredential: "https://<frontdoor-url>",
    orgUrl: "https://<your-org-url>"
  };
  
  await initializeAnalyticsSdk(config);

  const dashboard = new AnalyticsDashboard({
    parentIdOrElement: "analytics-container",
    idOrApiName: "<asset-identifier>"
  });

  dashboard.addEventListener(EventName.COMPONENT_LOADED, async () => {
    const pages = await dashboard.getPages();
    if (pages && pages.length > 1) {
      const secondPageLabel = pages[1];
      await dashboard.setPage(secondPageLabel);
    }
  });
  await dashboard.render();
</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`.
```javascript
import {
  initializeAnalyticsSdk,
  AnalyticsDashboard,
  EventName,
  analyticsEventTarget
} from '@salesforce/analytics-embedding-sdk';

await initializeAnalyticsSdk({
  authCredential: "https://<frontdoor-url>",
  orgUrl: "https://<your-org-url>"
});

const dashboard = new AnalyticsDashboard({
  parentIdOrElement: 'dashboard-container',
  idOrApiName: 'MyDashboard',
  customViewId: 'cview_abc123' // Optional
});
await dashboard.render();
```

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

```
https://<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.