Add a Tableau Next Component to Your Web App

Embed the Tableau Next Component

Copy the generated Tableau Next component code you copied from Tableau Next into your web app. This required code includes

A container for the component: use the container for component sizing and responsiveness
The SDK configuration: this defines the auth credential and the Salesforce org URL
The import of the SDK: integrates the SDK into the web app
The initializeAnalyticsSdk call: initializes the SDK with the configuration.
The Tableau Next component constructor: creates the Tableau Next component, using the ID or API name. Each component provides programmatic interactivity, like event handling and data filtering. - AnalyticsDashboard: embeds a Tableau Next dashboard - AnalyticsMetric: embeds a Tableau Next metric - AnalyticsVisualization: embeds a Tableau Next visualization
The component render call: renders the component in the container

Generated Code Example for an AnalyticDashboard component

1<div id="analytics-container"></div>
2<script type="module">
3  const config = {
4    authCredential: "AUTH_CREDENTIAL",
5    orgUrl: "https://my-domain.lightning.pc-rnd.force.com",
6  };
7  import {
8    initializeAnalyticsSdk,
9    AnalyticsDashboard,
10  } from "@salesforce/analytics-embedding-sdk.js";
11  await initializeAnalyticsSdk(config);
12  const dashboard = new AnalyticsDashboard({
13    parentIdOrElement: "analytics-container",
14    idOrApiName: "Dashboard1",
15  });
16  dashboard.render();
17</script>

Hook the Tableau Next Component To Your Web App

After you copy the generated code, you need to replace the generalized values with values specific to your web app.

The AUTH_CREDENTIAL value is the generated frontdoor URL.

The SDK_SOURCE value is the location of the installed SDK for your web app.

If you don’t use the generated code snippet from Tableau Next, you must add the orgUrl value, pointing to your Salesforce org. The orgUrl must be the Lightning URL, https://yourorg.lightning.force.com, not the my.salesforce.com domain URL.

If you don’t use the generated code snippet from Tableau Next, you’ll need to add the orgUrl, pointing to your Salesforce org.

Finding the Component ID

For embedding, you need the component ID. If you use the generated component code snippet, the component ID is provided for you.

You can also find the ID using the component URL from Salesforce. In Tableau Next, view the asset you want to embed. When viewing the asset, the URL for the asset provides the asset API name.

Example: Dashboard URL https://<salesforce.org>.force.com/tableau/dashboard/<asset-api-name>/view.

Example: Visualization URL https://<salesforce.org>.force.com/tableau/visualization/<asset-api-name>/view.

Example: Metric URL https://<salesforce.org>.force.com/tableau/exploreMetric/<asset-api-name>?{metricParameters}.

The asset-api-name is used for embedding as the idOrApiName value in the component constructor. You can use the component API name or the ID.

For an example of loading a custom view for dashboard, see Embed a Custom Dashboard View.

Authentication Redirect Flows

In multiple org scenarios, each org can complete initialization with a different outcome. In a single org scenarios, the same redirect handling applies for the single org. If an org requires additional authentication, like a multi-factor authentication (MFA) challenge or password reset, the initializeAnalyticSdk method can return a non-success state for that org with redirect metadata in orgStates:

state: AUTH_REDIRECT
redirectUrl: org provided relative redirect path
redirectOrigin: org provided origin

For each org in AUTH_REDIRECT, open ${redirectOrigin}${redirectUrl} in a popup window or tab, and complete the required authentication step. Then call retryOrAddOrgs() for the affected org(s) to resume initialization.

Retry parameter patterns:

Standard retry: use a fresh frontdoor URL/session credential { orgUrl, authCredential: "<frontdoor url>" }
MFA or password-reset resumed session: use the org URL as credential { orgUrl, authCredential: orgUrl }

When the MFA or password-reset completes and a new session is established, you can retry with authCredential: orgUrl without regenerating the frontdoor URL. If the retry fails, regenerate frontdoor URL and retry.

See Also