Add a Tableau Next Component to Your Web App

Copy the generated Tableau Next component code that 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: 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. 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 must 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.

For embedding, you need the component ID. The generated component code snippet provides the component ID for you.

You can also find the ID by 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}.

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

See Also