Add a Tableau Next Component to Your Web App

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

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 access token provided by the code you created to authorize your users with Salesforce.

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'll need to add the orgUrl, pointing to your Salesforce org.

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.

See Also