Let us know so we can improve!
The online Trailblazer Community is now read-only. [Read the FAQ] [Get Help]
A web component for embedding an Analytics and Visualization agent.
The AnalyticsAgent helps users see and understand data with conversational analytics.
It generates natural language insights, visualizations, and proactive alerts in your flow of work.
The agent supports two operating modes:
contextConfig in AgentProps to track a single analytics asset (dashboard, metric, or semantic model).contextConfig to automatically track all embedded AnalyticsDashboard and AnalyticsMetric components on the page.Use AgentStyleTokens to theme the agent UI to match your application’s look and feel.
| Methods | Accessors | Properties |
|---|---|---|
AnalyticsComponentnew AnalyticsAgent(
props):AnalyticsAgent
The constructor for AnalyticsAgent.
• props: AgentProps
The initialization properties for the agent component.
1//JavaScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4 initializeAnalyticsSdk,
5 AnalyticsAgent,
6 AgentContextType,
7 analyticsEventTarget,
8 EventName,
9} from "@salesforce/analytics-embedding-sdk";
10
11analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => {
12 //Listening to global ERROR event, such as SDK or component initialization failures.
13 console.log("Received a global error event", errorEvent); //Error details, such as error code and message, are available in the event object
14});
15
16await initializeAnalyticsSdk({
17 //Configuration object for initializing the Tableau Next Embedding SDK
18 authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
19 orgUrl: "<%- org-url %>", //The Salesforce org URL that hosts the Analytics component to embed.
20});
21
22// Single-context mode: provide contextConfig to track a specific asset
23const analyticsAgent = new AnalyticsAgent({
24 parentIdOrElement: "<%- parent-element %>", //The parent ID or element to render the component in
25 idOrApiName: "<%- agent-id %>", //The ID of the agent to embed
26 contextConfig: {
27 //Optional context configuration for single-context mode
28 contextType: AgentContextType.DASHBOARD, //The type of the asset to configure the agent for
29 contextTypeIdOrApiName: "<%- asset-id-or-api-name %>", //The ID or API name of the asset
30 },
31});
32
33analyticsAgent.render(); //Renders the agent in the parent HTML element1// Multi-component mode: omit contextConfig to automatically track all embedded analytics components
2const agent = new AnalyticsAgent({
3 parentIdOrElement: "<%- parent-element %>",
4 idOrApiName: "<%- agent-id %>",
5 showHeader: true,
6 showHeaderActions: true,
7 agentName: "Sales Insights",
8 welcomeText: "Ask me anything about your sales data.",
9});
10
11agent.render();1//TypeScript
2//Importing required modules and libraries from the Tableau Next Embedding SDK
3import {
4 AnalyticsAgent,
5 AgentContextType,
6 initializeAnalyticsSdk,
7 analyticsEventTarget,
8 EventName,
9 type AgentProps,
10 type AnalyticsSdkConfig
11} from '@salesforce/analytics-embedding-sdk';
12
13analyticsEventTarget.addEventListener(EventName.ERROR, (errorEvent) => { //Listening to global ERROR event, such as SDK or component initialization failures.
14 console.log("Received a global error event", errorEvent) //Error details, such as error code and message, are available in the event object
15});
16
17const config: AnalyticsSdkConfig = { //Configuration object for initializing the Tableau Next Embedding SDK
18 authCredential: "<%- authCredential %>", //The frontdoor URL required for authentication
19 orgUrl: "<%- org-url %>" //The Salesforce org URL that hosts the Analytics component to be embedded.
20};
21await initializeAnalyticsSdk(config); //Initializes the Tableau Next Embedding SDK with the provided configuration and returns a promise that resolves on successful initialization.
22
23const agentProps: AgentProps = {
24 parentIdOrElement: '<%- parent-element %>',
25 idOrApiName: '<%- agent-id %>',
26 contextConfig: {
27 contextType: AgentContextType.METRIC,
28 contextTypeIdOrApiName: '<%- asset-id-or-api-name %>'
29 },
30 showHeader: true,
31 showHeaderActions: true,
32 agentName: 'Revenue Insights',
33 welcomeText: 'Ask me about your revenue metrics.'
34};
35
36const analyticsAgent: AnalyticsAgent = new AnalyticsAgent(agentProps);
37
38analyticsAgent.addEventListener(EventName.ERROR, (event) => { //Listening to component specific ERROR event
39 console.log("Received error", event); //Error details (such as error code and message) are available in the event object
40 });
41
42analyticsAgent.addEventListener(EventName.COMPONENT_LOADED, () => { //Listening to COMPONENT_LOADED event triggered when the component gets loaded
43 console.log("Component Loaded");
44 });
45
46analyticsAgent.render(); //Renders the agent in the parent HTML elementIn multi-org scenarios, always specify the orgUrl parameter when creating components:
1// After initializing SDK with multiple orgs
2const agent1 = new AnalyticsAgent({
3 parentIdOrElement: "container1",
4 idOrApiName: "Agent1",
5 contextConfig: {
6 contextType: AgentContextType.DASHBOARD,
7 contextTypeIdOrApiName: "Dashboard1",
8 },
9 orgUrl: "https://org1.lightning.force.com", // Required in multi-org
10});
11
12const agent2 = new AnalyticsAgent({
13 parentIdOrElement: "container2",
14 idOrApiName: "Agent2",
15 contextConfig: {
16 contextType: AgentContextType.METRIC,
17 contextTypeIdOrApiName: "Metric1",
18 },
19 orgUrl: "https://org2.lightning.force.com", // Required in multi-org
20});Note: The orgUrl parameter must be a Lightning URL (e.g., https://yourorg.lightning.force.com), not the my.salesforce.com domain URL. All methods of the component operate on the org specified by this orgUrl.
AnalyticsComponent.constructor
parentIdOrElement:
string|HTMLElement
This ID of the container or the container where the analytics component is embedded.
AnalyticsComponent.parentIdOrElement
getcomponentType():string
Returns the component type: agent.
string
AnalyticsComponent.componentType
getheight():string
The height for the component, in CSS units. Acceptable string formats include:
setheight(val):void
• val: string
string
AnalyticsComponent.height
getidOrApiName():string
The ID or API name used to identify the Tableau Next component.
setidOrApiName(val):void
• val: string
string
AnalyticsComponent.idOrApiName
getorgUrl():undefined|string
The org URL for the component.
Multi-org Note: In multi-org scenarios, this property identifies which org the component belongs to. Returns a Lightning URL (e.g., https://yourorg.lightning.force.com).
setorgUrl(val):void
• val: string
undefined | string
The org URL, or undefined if not set.
AnalyticsComponent.orgUrl
getwidth():string
The width for the component, in CSS units. Acceptable string formats include:
setwidth(val):void
• val: string
string
AnalyticsComponent.width
reload():
Promise<void>
Reloads the component to retrieve the latest data from the server.
Promise<void>
AnalyticsComponent.reload
render():
Promise<string>
Renders the component by appending it to the specified parent element.
Promise<string>
A promise that resolves when the component is loaded successfully, or rejects with an error message if the loading fails.
AnalyticsComponent.render
startNewAgentSession():
Promise<void>
Starts a new session for the agent, clearing the current session history. This is useful for resetting the agent context when the user navigates to a different part of your application.
Promise<void>
A promise that resolves when a new session is created.
1const analyticsAgent = new AnalyticsAgent({
2 parentIdOrElement: "<%- parent-element %>",
3 idOrApiName: "<%- agent-id %>",
4 contextConfig: {
5 contextType: AgentContextType.DASHBOARD,
6 contextTypeIdOrApiName: "<%- asset-id-or-api-name %>",
7 },
8});
9
10await analyticsAgent.render();
11
12// Start a fresh agent session, clearing conversation history
13await analyticsAgent.startNewAgentSession();