Step 5: Menu items

ThoughtSpot menus are accessible in the top right corner with the ellipsis icon (…) or via a right-click on a chart axis or data point. The … menu is referred to as the More options menu.

On Liveboards, a top menu for the Liveboard and a separate menu for each visualization is available. The menu from right-clicking a data point is referred to as the Context menu.

Hiding or disabling items🔗

Individual menu items are controlled by their capabilities and are referred to as Actions. The Visual Embed SDK reference guide for Actions contains a complete list of named capabilities.

In the Playground, select the checkbox for Modify available actions. You’ll see the following code in the code editor:

  disabledActions: [],
  disabledActionReason: "Reason for disabling",
  // visibleActions: [], /* Removes all actions if empty array */
  hiddenActions: [],
  /* Use either visibleActions or hiddenActions */

If you want to show only a small set of selected menu items, use visibleActions (an allowlist) and comment out hiddenActions (a deny list).

Let’s show only the DownloadAsPdf action:

  disabledActions: [],
  disabledActionReason: "Reason for disabling",
  visibleActions: [Action.DownloadAsPdf], /* Removes all actions if empty array */
  //hiddenActions: [],
  /* Use either visibleActions or hiddenActions */

When you click Run, the Liveboard reloads with only a single menu item in the More options menu as specified in the visibleActions array.

Note	The above example also hides the right-click context menu items, including the Drill down action (`Action.DrillDown`).

The disabledActions array keeps the item in the menu but grays it out, and shows disabledActionReason when hovering over the disabled action.

Triggering hidden menu items with HostEvents🔗

ThoughtSpot Visual Embed SDK defines two types of events:

EmbedEvents - to listen to actions within ThoughtSpot components
HostEvents - to send messages to the ThoughtSpot components from the embedding application.

If a menu item has been hidden, you can still send in a HostEvent to cause the same behavior.

In the Playground, select the Use Host Event checkbox. You’ll see the following code block in the code editor:

 document.getElementById('tryBtn').addEventListener('click', e => {
      // Trigger events can be added here to bind to try button click!
      // eg use the Reload Event so that clicking on "Try event" button reloads the embed:
      embed.trigger(HostEvent.Reload);
 });

The above code block adds a click event to the Try Event button above the preview panel in the Playground. Clicking Try Event triggers the HostEvent.

Let’s replace the default Reload event with DownloadAsPdf:

 document.getElementById('tryBtn').addEventListener('click', e => {
     // Trigger events can be added here to bind to try button click!
     // eg use the Reload Event so that clicking on "Try event" button reloads the embed:
     embed.trigger(HostEvent.DownloadAsPdf);
 });

Testing this requires the following steps:

Click Run to reload the embedded component.
Click Try Event.

You should see the PDF export modal dialog button pop up within the embedded component area.

If you do not want the modal dialog to appear, you could instead use the ThoughtSpot REST API to accomplish the task either within the browser or in a back-end process. This allows for choosing vastly different behaviors than those allowed by the ThoughtSpot modal dialogs.

Adding new menu items with custom actions🔗

ThoughtSpot allows you to add new items called custom actions to the menu system, either to the More options menu on a given visualization of a Liveboard or the context menu that appears when a single point is right-clicked.

The Callback custom actions require a three-part setup:

Define the custom action within ThoughtSpot, with a particular id.
Assign the custom action to the visualization.
Add the EmbedEvent.CustomAction listener within the Visual Embed SDK code.

To try it out, select the Handle custom actions checkbox. You’ll see the following code block in the code editor:

 .on(EmbedEvent.CustomAction, payload => {
     const customActionId = 'insert Custom Action ID here';
     if (payload.id === customActionId || payload.data.id === customActionId) {
         console.log('Custom Action event:', payload.data);
     }
 })

Some EmbedEvents such as VizPointClick fire off without involving the menu system and function similarly to context menu custom action.

← Previous Next →