Add Tableau Next Components from Multiple Salesforce Orgs

Embedding Tableau Next components in your own web app gives you the flexibility to add components from multiple Salesforce orgs on one page.

To use multiple orgs in your implementation, initialize the SDK with the orgConfigs map instead of single orgUrl and authCredential parameters.

import {
  initializeAnalyticsSdk,
  AnalyticsDashboard,
  AnalyticsVisualization,
} from "@salesforce/analytics-embedding-sdk";

// Initialize with multiple orgs, Lightning URL required for the `orgUrl` values
const initPayload = {
  orgConfigs: [
    {
      orgUrl: "https://org1.lightning.force.com",
      authCredential: "https://org1-frontdoor.salesforce.com/...",
    },
    {
      orgUrl: "https://org2.lightning.force.com",
      authCredential: "https://org2-frontdoor.salesforce.com/...",
    },
  ],
};

const response = await initializeAnalyticsSdk(initPayload);

Then, when you embed your components, you must specify the orgUrl in the component constructor. The orgUrl is required when creating components in a multi org scenario, to ensure that your component connects to the correct org.

// Embed components from different orgs - always specify orgUrl
const dashboard = new AnalyticsDashboard({
  parentIdOrElement: "container1",
  idOrApiName: "Dashboard1",
  orgUrl: "https://org1.lightning.force.com",
});
dashboard.render();

// Embed visualization from another org
const visualization = new AnalyticsVisualization({
  parentIdOrElement: "container2",
  idOrApiName: "Viz2",
  orgUrl: "https://org2.lightning.force.com",
});
visualization.render();

Adding Orgs Dynamically

You can add new orgs or try failed orgs again after the initial SDK initialization by using the retryOrAddOrgs function.

import { retryOrAddOrgs } from "@salesforce/analytics-embedding-sdk";

const newOrgs = [
  {
    orgUrl: "https://org3.lightning.force.com",
    authCredential: "https://org3-frontdoor.salesforce.com/...",
  },
  {
    orgUrl: "https://org4.lightning.force.com",
    authCredential: "https://org4-frontdoor.salesforce.com/...",
  },
];
const response = await retryOrAddOrgs(newOrgs);

// Check if orgs were added successfully
console.log(response.status);

The retryOrAddOrgs function returns the same BootstrapResponse format as the initializeAnalyticsSdk function.

Response

The initializeAnalyticsSdk function returns a BootstrapResponse object, which contains an orgStates map with the overall status and the individual org statuses.

const response = await initializeAnalyticsSdk(config);

// Response structure:
{
    "message": "Sdk Initialize Complete",
    "status": "Success",
    "orgStates": {
        "https://org1.lightning.force.com": {
            "state": "INITIALIZATION_SUCCESS",
            "reason": ""
        },
        "https://org2.lightning.force.com": {
            "state": "INITIALIZATION_SUCCESS",
            "reason": ""
        }
    }
}
// Check initialization status
console.log(response.status);
// Get detailed message
console.log(response.message);

// For multi-org scenarios, check individual org states:
if (response.orgStates) {
    response.orgStates.forEach((state, orgUrl) => {
        console.log(`Org ${orgUrl}: ${state.state}`);
    });
}

SDK Initialization Status Values

Status.SUCCESS - All orgs initialized successfully
Status.PARTIAL_SUCCESS - Some orgs initialized successfully (multi-org only)
Status.FAILURE - Initialization failed

See Also