Let us know so we can improve!
Class: AnalyticsAgent
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:
- Single-context mode: Provide
contextConfiginAgentPropsto track a single analytics asset (dashboard, metric, or semantic model). - Multi-component mode: Omit
contextConfigto automatically track all embeddedAnalyticsDashboardandAnalyticsMetriccomponents on the page.
Use AgentStyleTokens to theme the agent UI to match your application’s look and feel.
| Methods | Accessors | Properties |
|---|---|---|
Extends
AnalyticsComponent
Constructors
new AnalyticsAgent()
new AnalyticsAgent(
props):AnalyticsAgent
The constructor for AnalyticsAgent.
Parameters
• props: AgentProps
The initialization properties for the agent component.
Returns
Usage
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 elementMulti-org Usage
In 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.
Overrides
AnalyticsComponent.constructor
Properties
parentIdOrElement
parentIdOrElement:
string|HTMLElement
This ID of the container or the container where the analytics component is embedded.
Inherited from
AnalyticsComponent.parentIdOrElement
Accessors
componentType
getcomponentType():string
Returns the component type: agent.
Returns
string
Overrides
AnalyticsComponent.componentType
height
getheight():string
The height for the component, in CSS units. Acceptable string formats include:
- Pixel values (e.g., “800px”)
- Percentages (e.g., “100%”)
- Relative units (e.g., “2rem”, “1.5em”)
- Other valid CSS height values. If an invalid value is provided, the value defaults to 100%.
setheight(val):void
Parameters
• val: string
Returns
string
- Returns the height of the component.
Inherited from
AnalyticsComponent.height
idOrApiName
getidOrApiName():string
The ID or API name used to identify the Tableau Next component.
setidOrApiName(val):void
Parameters
• val: string
Returns
string
- Returns the ID or API name of the component to embed.
Inherited from
AnalyticsComponent.idOrApiName
orgUrl
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
Parameters
• val: string
Returns
undefined | string
The org URL, or undefined if not set.
Inherited from
AnalyticsComponent.orgUrl
width
getwidth():string
The width for the component, in CSS units. Acceptable string formats include:
- Pixel values (e.g., “800px”)
- Percentages (e.g., “100%”)
- Relative units (e.g., “2rem”, “1.5em”)
- Other valid CSS width values. If an invalid value is provided, the value defaults to 100%.
setwidth(val):void
Parameters
• val: string
Returns
string
- Returns the width of the component.
Inherited from
AnalyticsComponent.width
Methods
reload()
reload():
Promise<void>
Reloads the component to retrieve the latest data from the server.
Returns
Promise<void>
- A promise that resolves when reload is complete.
Async
Inherited from
AnalyticsComponent.reload
render()
render():
Promise<string>
Renders the component by appending it to the specified parent element.
Returns
Promise<string>
A promise that resolves when the component is loaded successfully, or rejects with an error message if the loading fails.
Inherited from
AnalyticsComponent.render
startNewAgentSession()
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.
Returns
Promise<void>
A promise that resolves when a new session is created.
Example
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();Let us know so we can improve!