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