Customize menu elements

Table of Contents

Overview
Visible actions
- Visible actions and hidden actions
- Visible actions and disabled actions
Disable actions
- Disable a custom action
- Add a tooltip to disabled action
Hide actions
- Hide a custom action
Override default primary actions
Code sample
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 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:

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 will appear as grayed-out and 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
Allows overriding the action assigned to a primary button in the visualization UI.

Important

The SDK doesn’t support configuring both visibleActions and hiddenActions.
Use the appropriate action ID to show or hide a UI action. For a comprehensive list of action IDs available for ThoughtSpot components, see Actions.
For custom actions, ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. You can use this action ID the disabledActions, hiddenActions, or visibleActions array.
When configuring visibleActions in full application embed, ensure that the configured actions are displayed across all applicable embedded pages.
Try out the actions in the Visual Embed Playground and verify the results before updating your code.

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:

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

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]

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

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

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

The primaryAction parameter does not remove the default action; it replaces the action assigned to the primary button.
If primaryAction is configured, the default action is moved to the More options (…) menu, and the action you configured appears as the primary button on your Liveboard visualizations. On Answers, the new action is added as a secondary button, positioned above the chart or table along with other primary actions

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.