Customize menu elements

Table of Contents

Overview
Setting visible actions
Setting hidden actions
- Hiding the charts edit panel
Disabling actions
- Adding a tooltip to a disabled action
- Visible actions and disabled actions
Custom actions
Overriding the default primary action
Best practices
Additional resources

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 on the Answer page.
More (…) menu: The menu that opens from the More options icon.
Contextual menu: The menu that appears when you right-click.

When you embed a ThoughtSpot component in your app, these actions are 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:

visibleActions array
Defines a list of actions that are visible to your application users. Use visibleActions when you want to show only a small subset of actions in the embedded view.
disabledActions array
The actions specified in this array appear unavailable. You can also specify a reason for disabling the actions in the disabledActionReason attribute. 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.
hiddenActions array
Hides the actions in the embed view. If your embed requires most of the default actions, and you want to hide only a few, use hiddenActions.
primaryAction attribute
Overrides the action assigned to the primary button on Liveboard visualizations.

Setting visible actions🔗

Use the visibleActions attribute to define an array of action IDs for the actions you want to show in the embedded UI.

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:

visibleActions: [Action.Save, Action.ShowUnderlyingData, Action.Download, Action.DownloadAsCsv, Action.Pin]

If the visibleActions attribute is set as an empty array, no actions appear in the embedded UI.

visibleActions: []

Nested menu behavior🔗

When you use visibleActions with actions that belong to a nested menu, the following rules apply:

Menu actions with sub-menu items: 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]
```
Menu actions without sub-menu items: 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]
```

Upgrade considerations for visibleActions🔗

The visibleActions attribute works as an allowlist. Only the action IDs you explicitly include in the array are shown in the embedded UI. All other actions are hidden, including any new actions introduced in a later ThoughtSpot release or Visual Embed SDK version.

This means that when you upgrade your ThoughtSpot instance or SDK version, any newly introduced actions will not appear automatically if your embed already uses visibleActions. To make a new action visible, you must add its action ID to the visibleActions array.

Important

Review the Actions reference and the release notes for any newly introduced action IDs. Add the new IDs to your visibleActions array if you want them to appear in the embedded UI.

This behavior does not apply to hiddenActions. Because hiddenActions works as a denylist, any newly introduced actions are visible by default unless you explicitly add them to the hiddenActions array.

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

Action ID	Controls	Supported in `hiddenActions`	Supported in `visibleActions`
`Action.AllLiveboardFilters`	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 `disabledActions`.	✓ Supported	x Not supported
`Action.SpotterSharedConversationBanner`	The read-only data-access banner shown when a recipient opens a shared Spotter conversation.	✓ Supported	x Not supported
`Action.SpotterShareUpToCurrentInfo`	The footer note in the Spotter share modal ("Chat will be shared up to the current moment").	✓ Supported	x Not supported
`Action.SpotterSidebarHeader`	The title and toggle button in the Spotter past conversations sidebar.	✓ Supported	x Not supported
`Action.SpotterSidebarFooter`	The documentation link in the Spotter past conversations sidebar.	✓ Supported	x Not supported
`Action.SpotterSidebarToggle`	The expand/collapse toggle button in the Spotter past conversations sidebar.	✓ Supported	x Not supported
`Action.SpotterAnalystSidebar`	The sidebar in the Spotter Analyst interface.	✓ Supported	x Not supported

Action.AllLiveboardFilters

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 disabledActions.

✓ Supported

x Not supported

Action.SpotterSharedConversationBanner

The read-only data-access banner shown when a recipient opens a shared Spotter conversation.

✓ Supported

x Not supported

Action.SpotterShareUpToCurrentInfo

The footer note in the Spotter share modal ("Chat will be shared up to the current moment").

✓ Supported

x Not supported

Action.SpotterSidebarHeader

The title and toggle button in the Spotter past conversations sidebar.

✓ Supported

x Not supported

Action.SpotterSidebarFooter

The documentation link in the Spotter past conversations sidebar.

✓ Supported

x Not supported

Action.SpotterSidebarToggle

The expand/collapse toggle button in the Spotter past conversations sidebar.

✓ Supported

x Not supported

Action.SpotterAnalystSidebar

The sidebar in the Spotter Analyst interface.

✓ Supported

x Not supported

Note	If you add any of these action IDs to a `visibleActions` array, the SDK doesn’t return an error, but the setting has no effect on the embedded interface. Use `hiddenActions` to control these UI surfaces.

Visible actions versus hidden actions🔗

If you specify action IDs in both the visibleActions and hiddenActions arrays, the SDK returns a configuration error.

visibleActions: [Action.DownloadAsPdf, Action.DownloadAsCsv, Action.Save, Action.ShowUnderlyingData, Action.Pin]
hiddenActions: [Action.DownloadAsPdf, Action.DownloadAsCsv]

If you specify some action IDs in the visibleActions attribute and define hiddenActions as an empty array, only the actions that are configured to be visible 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 action IDs are specified in the hiddenActions attribute, the visibleActions definition takes precedence. Therefore, no actions 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 appear in the embedded UI.

visibleActions: []
hiddenActions: []

Choosing between visibleActions and hiddenActions🔗

The visibleActions and hiddenActions attributes take opposite approaches to controlling menu actions. Use the following guidance to choose the right approach for your application:

Consideration visibleActions (allowlist) hiddenActions (denylist)

Consideration	`visibleActions` (allowlist)	`hiddenActions` (denylist)
How it works	Only the actions you specify are shown. Everything else is hidden.	All actions are shown by default. Only the actions you specify are hidden.
New actions after upgrade	New actions are hidden by default. You must explicitly add them to the array to make them visible.	New actions are visible by default. You must explicitly add them to the array to hide them.
Best suited for	Strict control over the UI. You want to show a small, fixed set of actions and do not want new actions to appear automatically.	Flexible control. You want most default actions to remain available and only need to hide a few specific actions.

How it works

Only the actions you specify are shown. Everything else is hidden.

All actions are shown by default. Only the actions you specify are hidden.

New actions after upgrade

New actions are hidden by default. You must explicitly add them to the array to make them visible.

New actions are visible by default. You must explicitly add them to the array to hide them.

Best suited for

Strict control over the UI. You want to show a small, fixed set of actions and do not want new actions to appear automatically.

Flexible control. You want most default actions to remain available and only need to hide a few specific actions.

Setting hidden actions🔗

Use the hiddenActions attribute to hide specific actions in the embedded UI. For the differences between hiddenActions and visibleActions, see Choosing between visibleActions and hiddenActions.

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]

Hiding the charts edit panel🔗

In the embedded view, the answer, Liveboard visualizations, and search results page show the chart edit panel by default. There are no actions available in the SDK to hide this panel or its individual options. To hide the panel, you must set hideAnswerEditPanel to true in your embed configuration.

// AppEmbed
const embed = new AppEmbed('#embed-div', {
    // ... other config
    hideAnswerEditPanel: true,
});

Disabling 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]

To add a tooltip for a disabled action, specify the message text in the disabledActionReason attribute.

disabledActionReason: "Contact your administrator to enable this action"

Visible actions and disabled actions🔗

When you set both visibleActions and disabledActions to empty arrays, no actions appear in the embedded UI:

visibleActions: []
disabledActions: []

If you specify some action IDs in both visibleActions and disabledActions attributes, the specified menu actions appear in the embedded UI. However, users can’t use the disabled actions.

In the following example, the Download, Save, Share, and Pin actions are defined as visible actions and therefore are visible in the embedded UI. However, the Download menu action is disabled.

visibleActions: [Action.Download, Action.Save, Action.Share, Action.Pin]
disabledActions: [Action.Download]

Custom actions🔗

ThoughtSpot assigns an action ID to each custom action based on its name. For example, the ID of a custom action named Send Email is send-email. You can specify this ID in the visibleActions, hiddenActions, or disabledActions array.

To show a custom action when you use visibleActions:

visibleActions: [Action.Save, Action.Pin, 'send-email']

To hide a custom action:

hiddenActions: ['send-email']

To disable a custom action:

disabledActions: ['send-email']

Overriding the default primary action🔗

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 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 disabledActions or hiddenActions arrays.

Configure the new primary action:

const embed = new LiveboardEmbed('#embed-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

The primaryAction attribute doesn’t remove the default action. It replaces the action assigned to the primary button.
If you configure primaryAction, the default action moves to the More (…) menu, and your configured action appears as the primary button on Liveboard visualizations. On Answers, the new action is added as a secondary button at the top of the chart or table, along with other primary actions.

Best practices🔗

Use the appropriate action ID to show, hide, or disable a UI action. For a comprehensive list of action IDs available for ThoughtSpot components, see Actions, and check the version requirements of each action.
Don’t configure both visibleActions and hiddenActions with action IDs. The SDK returns a configuration error.
For custom actions, use the action ID that ThoughtSpot assigns based on the action name. For more information, see Custom actions.
When you configure visibleActions in full application embed, make sure the configured actions are displayed across all applicable embedded pages.
If you use an older SDK version, test your configuration to make sure all attributes are supported.
Try out the actions in the Visual Embed Playground and verify the results before updating your code.
Handle configuration errors by listening for the EmbedEvent.Error event.

Customize menu elements

Overview🔗

Setting visible actions🔗

Nested menu behavior🔗

Upgrade considerations for visibleActions🔗

Actions not supported in visibleActions🔗

Visible actions versus hidden actions🔗

Choosing between visibleActions and hiddenActions🔗

Setting hidden actions🔗

Hiding the charts edit panel🔗

Disabling actions🔗

Adding a tooltip to a disabled action🔗

Visible actions and disabled actions🔗

Custom actions🔗

Overriding the default primary action🔗

Best practices🔗

Additional resources🔗