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 object instead of single orgUrl and authCredential parameters.

1import {
2  initializeAnalyticsSdk,
3  AnalyticsDashboard,
4  AnalyticsVisualization,
5} from "@salesforce/analytics-embedding-sdk";
6
7// Initialize with multiple orgs, Lightning URL required for the `orgUrl` values
8const initPayload = {
9  orgConfigs: [
10    {
11      orgUrl: "https://org1.lightning.force.com",
12      authCredential: "https://org1-frontdoor.salesforce.com/...",
13    },
14    {
15      orgUrl: "https://org2.lightning.force.com",
16      authCredential: "https://org2-frontdoor.salesforce.com/...",
17    },
18  ],
19};
20
21const 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.

1// Embed components from different orgs - always specify orgUrl
2const dashboard = new AnalyticsDashboard({
3  parentIdOrElement: "container1",
4  idOrApiName: "Dashboard1",
5  orgUrl: "https://org1.lightning.force.com",
6});
7dashboard.render();
8
9// Embed visualization from another org
10const visualization = new AnalyticsVisualization({
11  parentIdOrElement: "container2",
12  idOrApiName: "Viz2",
13  orgUrl: "https://org2.lightning.force.com",
14});
15visualization.render();

Adding Orgs Dynamically

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

1import { retryOrAddOrgs } from "@salesforce/analytics-embedding-sdk";
2
3const newOrgs = [
4  {
5    orgUrl: "https://org3.lightning.force.com",
6    authCredential: "https://org3-frontdoor.salesforce.com/...",
7  },
8  {
9    orgUrl: "https://org4.lightning.force.com",
10    authCredential: "https://org4-frontdoor.salesforce.com/...",
11  },
12];
13const response = await retryOrAddOrgs(newOrgs);
14
15// Check if orgs were added successfully
16console.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 object with the overall status and the individual org statuses.

1const response = await initializeAnalyticsSdk(config);
2
3// Response structure:
4{
5    "message": "Sdk Initialize Complete",
6    "status": "Success",
7    "orgStates": {
8        "https://org1.lightning.force.com": {
9            "state": "INITIALIZATION_SUCCESS",
10            "reason": ""
11        },
12        "https://org2.lightning.force.com": {
13            "state": "INITIALIZATION_SUCCESS",
14            "reason": ""
15        }
16    }
17}
18// Check initialization status
19console.log(response.status);
20// Get detailed message
21console.log(response.message);
22
23// For multi-org scenarios, check individual org states:
24if (response.orgStates) {
25    response.orgStates.forEach((state, orgUrl) => {
26        console.log(`Org ${orgUrl}: ${state.state}`);
27    });
28}

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