# Customize menu elements

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/action-config

# Customize menu elements

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]({{navprefix}}/{{embed-actions}}#standard-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:

```Javascript
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.

```Javascript
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:

```Javascript
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.

```Javascript
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.

```Javascript
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.

```Javascript
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.

```Javascript
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:

```Javascript
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.

```Javascript
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 ![the more options menu](/docs/doc-images/images/icon-more-10px.png), specify the `ShowUnderlyingData` action ID in the `disabledActions` array.

```JavaScript
disabledActions: [Action.ShowUnderlyingData]
```

Similarly, to disable multiple actions, you can specify the action IDs in the `disabledActions` attribute.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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:

```JavaScript
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.

```JavaScript
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:

1.  Check if the SDK includes an action ID for the action you want to use as the replacement.
    
2.  Ensure that the action that you want to use is not hidden or disabled via `disabledActions` or `hiddenActions` arrays.
    
3.  Configure the new primary action:
    
    ```JavaScript
    const embed = new LiveboardEmbed("#your-own-div", {
        liveboardId: "<Your-Liveboard-ID>", // Replace with your Liveboard ID
        primaryAction: Action.Download,
    });
    ```
    
4.  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

```JavaScript
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.
    

## Additional resources

-   [Action ID]({{navprefix}}/{{Action}})
    
-   [Action ID reference]({{navprefix}}/{{embed-action-ref}})