visibleActions: [Action.Save, Action.ShowUnderlyingData, Action.Download, Action.DownloadAsCsv, Action.Pin]Customize menu elements
Table of Contents
The Visual Embed SDK allows you to customize the menu actions for the ThoughtSpot components embedded in your app.
Overview🔗
Menu actions in ThoughtSpot UI are available as:
-
Primary buttons
Buttons that trigger an action for an entire page or a container. For example, the Save button in the Answer page. -
More (
…) options -
Contextual menu that appears on right-clicking
When you embed a ThoughtSpot component in your app, these actions will be available to all users by default. However, your application users may not require all the menu actions, or you might want to restrict access to certain features.
Visual Embed SDK provides a set of attributes and action IDs to control the availability and appearance of actions:
-
visibleActionsarray
Defines a list of actions that are visible to your application users. UsevisibleActionswhen you want to show only a small subset of actions in the embedded view. -
disabledActionsarray
The actions specified in this array will appear as grayed-out and unavailable. You can also specify a reason for disabling the actions in thedisabledActionReasonattribute. For example, your application might need a specific privilege to schedule a Liveboard job. In this case, you may want to disable the Liveboard schedule action and display the message "Contact your administrator to enable this feature" on hover. -
hiddenActionsarray
Hides the actions in the embed view. If your embed requires most of the default actions, and you want to hide only a few, usehiddenActions. -
primaryActionattribute
Allows overriding the action assigned to a primary button in the visualization UI.
|
Important
|
|
Visible actions🔗
The Visual Embed SDK packages support the visibleActions attribute, which allows you to define an array of action IDs that correspond to the action in the UI element.
For example, to show only the Save, Show underlying data, Download as CSV, and Pin menu actions in the embedded UI, specify the action IDs in the visibleActions array:
If the visibleActions attribute is set as an empty array, no actions will appear in the embedded UI.
visibleActions: []If the actions are in a nested menu, you must specify the action ID for parent element along with action ID. For example, to show only PDF option in the Download menu, specify the action ID for both:
visibleActions: [Action.Download, Action.DownloadAsPdf]Nested menu behavior🔗
When you use visibleActions with actions that belong to a nested menu, the following rules apply:
-
Parent and child required — To show a specific child action, include both the parent action ID and the child action ID. If you include only the child without the parent, the child action does not appear because the parent container is hidden.
// Correct: show only the PDF option in the Download menu visibleActions: [Action.Download, Action.DownloadAsPdf] // Incorrect: DownloadAsPdf will NOT appear because its parent (Action.Download) is absent visibleActions: [Action.DownloadAsPdf] -
Parent without children — If you include a parent action without specifying any of its children, all default children of that parent appear.
// All children of the Download menu (PDF, CSV, XLSX, PNG) will appear visibleActions: [Action.Download]
Actions not supported in visibleActions🔗
The visibleActions array works as an allowlist for discrete menu actions and buttons. It does not control structural UI elements such as sidebars, banners, and panels. The following action IDs control structural UI surfaces and are supported only in hiddenActions (and where noted, disabledActions):
| Action ID | Controls | Supported in hiddenActions | Supported in visibleActions |
|---|---|---|---|
| All filter surfaces on a Liveboard (filter chips, parameter chips, cross-filter chips). Note: parameter and cross-filter chips are hide-only and do not support | ✓ | ✗ |
| The read-only data-access banner shown when a recipient opens a shared Spotter conversation. | ✓ | ✗ |
| The footer note in the Spotter share modal ("Chat will be shared up to the current moment"). | ✓ | ✗ |
| The title and toggle button in the Spotter past conversations sidebar. | ✓ | ✗ |
| The documentation link in the Spotter past conversations sidebar. | ✓ | ✗ |
| The expand/collapse toggle button in the Spotter past conversations sidebar. | ✓ | ✗ |
| The sidebar in the Spotter Analyst interface. | ✓ | ✗ |
|
Note
|
If you add any of these action IDs to a |
Visible actions and hidden actions🔗
If both visibleActions and hiddenActions attributes are defined, the SDK will return a configuration error.
visibleActions: [Action.DownloadAsPdf, Action.DownloadAsCsv, Action.Save,Action.ShowUnderlyingData, Action.Pin]
hiddenActions: [Action.DownloadAsPdf, Action.DownloadAsCsv]If you specify some action strings in the visibleActions attribute and define hiddenActions as an empty array, only the actions that are configured to be visible will appear in the embedded UI.
visibleActions: [Action.DownloadAsPdf, Action.DownloadAsCsv, Action.Save, Action.ShowUnderlyingData, Action.Pin]
hiddenActions: []If the visibleActions attribute is set as an empty array and the action strings are specified in the hiddenActions attribute, the visibleActions definition takes precedence. Therefore, no actions will appear in the embedded UI.
visibleActions: []
hiddenActions: [Action.DownloadAsPdf, Action.DownloadAsCsv]If both visibleActions and hiddenActions attributes are defined as an empty array, the visibleActions definition takes precedence and no actions will appear in the embedded UI.
visibleActions: []
hiddenActions: []Visible actions and disabled actions🔗
When both visibleActions and disabledActions attributes are set as empty arrays, no actions will be visible in the embedded UI:
visibleActions: []
disabledActions: []If you specify some action IDs in both visibleActions and disabledActions attributes, the specified menu actions will appear in the embedded UI. However, users will not be able to use the disabled actions.
In the following example, the Download, Save, Share, and Pin actions are defined as visible actions and therefore will be visible in the embedded UI. However, the Download menu action will be disabled.
visibleActions: [Action.Download, Action.Save, Action.Share, Action.Pin]
disabledActions: [Action.Download]Disable actions🔗
The disabledActions attribute in the Visual Embed SDK allows you to specify one or several actions and disable these actions on a Liveboard, Answer, or visualization page. For example, to disable the Show underlying data action from the More options menu 
, specify the ShowUnderlyingData action ID in the disabledActions array.
disabledActions: [Action.ShowUnderlyingData]Similarly, to disable multiple actions, you can specify the action IDs in the disabledActions attribute.
disabledActions: [Action.AddFilter, Action.Present]Disable a custom action🔗
To disable a custom action, specify the ID of the custom action in the disabledActions attribute.
For example, if a custom action is labeled as Send Email and its ID is set as send-email, specify send-email in the disabledActions attribute.
disabledActions: ['send-email']Add a tooltip to disabled action🔗
To add a tooltip for the disabled attribute, you can specify the message text string in the disabledActionReason attribute.
disabledActionReason: "Contact your administrator to enable this action"Hide actions🔗
The Visual Embed SDK allows you to hide specific actions that you may not want to show in the embedded UI. From the list of available actions, you can either define a list of visible actions using the visibleActions attribute or hide specific actions that your application may not require using the hiddenActions attribute. Configuring actions in both visibleActions and hiddenActions attributes leads to an error in embedded content rendition.
For example, if you want to hide only the Download and Pin actions for an embedded visualization and show all other actions, specify the attribute as shown here:
hiddenActions: [Action.Download,Action.Pin]Hide a custom action🔗
To hide a custom action, specify the ID of the custom action in the disabledActions attribute.
For example, if a custom action is labeled as Send Email and its ID is set as send-email, specify send-email in the hiddenActions attribute.
hiddenActions: ['send-email']Override default primary actions🔗
For Liveboards embedded in your app, the Visual Embed SDK provides the primaryAction attribute that allows you to override the default action assigned to the primary button on Liveboard visualizations.
If Spotter is enabled on your instance, the Spotter button appears by default as the primary action on embedded Liveboard charts. If Spotter is not enabled on your instance, the Explore button is displayed as the default primary action.
To replace the action assigned to this primary button:
Check if the SDK provides an action ID for the action you want to use as the replacement. Ensure the action you want to use is not hidden or disabled via the hiddenActions or disabledActions arrays. Define the new primary action in the SDK configuration:
-
Check if the SDK includes an action ID for the action you want to use as the replacement.
-
Ensure that the action that you want to use is not hidden or disabled via
disabledActionsorhiddenActionsarrays. -
Configure the new primary action:
const embed = new LiveboardEmbed("#your-own-div", { liveboardId: "<Your-Liveboard-ID>", // Replace with your Liveboard ID primaryAction: Action.Download, }); -
Render your embed and verify that the default action is replaced with the action you defined.
|
Note
|
|
Hide the answer edit panel🔗
|
Note
|
|
The answer edit panel is a sidebar panel that allows users to edit the search tokens behind an Answer. It is shown by default in embedded views.
To hide the answer edit panel, set hideAnswerEditPanel to true in your embed configuration. This flag is available on SearchEmbed and AppEmbed.
// SearchEmbed
const embed = new SearchEmbed('#embed-div', {
// ... other config
hideAnswerEditPanel: true,
});
// AppEmbed
const embed = new AppEmbed('#embed-div', {
// ... other config
hideAnswerEditPanel: true,
});| Property | Details |
|---|---|
Type |
|
Default |
|
Supported in |
|
Not supported in |
|
Available from | SDK: 1.54.0 | ThoughtSpot Cloud: 26.11.0.cl |
Code sample🔗
import {
LiveboardEmbed,
Action,
AuthType,
} from '@thoughtspot/visual-embed-sdk';
const embed = new LiveboardEmbed('#embed-div', {
thoughtSpotHost: 'https://your-instance.thoughtspot.com', //Replace it with your ThoughtSpot instance URL
authType: AuthType.None,
liveboardId: '<Your-Liveboard-ID>', // Replace it with your Liveboard ID
visibleActions: [Action.Save, Action.Pin, Action.Download, Action.DownloadAsPdf, Action.DownloadAsCsv, Action.DownloadAsPdf, 'send-email'],
hiddenActions: [Action.Share, Action.Present],
disabledActions: [Action.Download],
disabledActionReason: 'Download is restricted for your role. Contact your administrator to enable this action',
primaryAction: Action.Explore,
customActions: [
{
id: 'custom-action',
label: 'Send Email',
onClick: (context) => {
// Custom logic here
alert('Custom action triggered!');
},
},
],
});
embed.render();Best practices🔗
-
Check the actions IDs in the SDK documentation for version requirements.
-
If using older SDK versions, test your configuration to ensure all attributes are supported.
-
To handle errors, use embed event listeners.