Style customization tutorial

There are many more configurations available for each component than those available in the Playground. To see all available options, see Embed Classes and Embed Interfaces.

To use a setting that is not automatically generated by the Playground, go to its definition within the reference page and look at the example code.

To override user’s locale settings:

If there are elements of the page that you can’t find an option to hide in the embedded interface configuration options, you may need to use the CSS customization framework to hide a given element directly.

If your implementation requires hiding certain elements, let ThoughtSpot know the element for which you need a configuration option by submitting an idea to the ThoughtSpot Community.

ThoughtSpot provides many pre-defined CSS variables to control the styling of the embedded component UI and its elements.

The style definitions can all be declared directly within the variables block of the customCSS code.

The customization framework also allows using any CSS selector to target specific elements with changes that do not have a defined variable. Selectors can be declared within the rules_UNSTABLE block inside customCSS. However, selectors may change with new releases as elements of ThoughtSpot are updated.

Let’s add a selector to the code in our Playground. First, comment out the customCSSUrl line, then add the rules_UNSTABLE block below variables:

Variables declare a single property, therefore are defined as "{var-name}" : "{value}", whereas selectors allow you to assign several properties to the selected elements.

One use case of the rules_UNSTABLE section is @font-face declarations, which have many properties for one selector.

We’ll switch the main font to Poppins, available from Google Fonts:

You can collect a set of variables and selectors into a CSS file, rather than declaring them in the JavaScript code block. CSS files can be included from any domain, but they must be added to the CSP style-src domains and CSP font-src domains on the Develop > Customizations → Security settings page.

Both https://cdn.jsdelivr.net and https://fonts.gstatic.com sites are automatically added to ThoughtSpot’s CSP allowlist.

In your CSS file, the global variables must be declared in the :root { } block, while @font-face declarations of a named font can be placed anywhere:

As seen in the CSS file example above, one of the use cases for selectors is to hide embed component elements that do not have a configuration option.

display: none!important is the most typical property to accomplish this, but you may choose any CSS rule that causes the desired effect.

Make sure that the selector you use is specific and does not affect other elements that you don’t intend to hide.

If you have been hiding certain elements via CSS selectors, contact ThoughtSpot to request configuration options for such elements, so that the overall configurations can be expanded over time. Similarly, provide feedback on properties that variables are unavailable by submitting an idea to the ThoughtSpot Community.

Let’s add the content property above the style property in the customizations code and then add the strings property block within this code. Now we can declare the exact text elements to replace within ThoughtSpot:

Icon sprite replacement requires creating a file of SVG icon definitions, the format for which is available in the icon sprite customization documentation. After you have the SVG file saved and accessible to ThoughtSpot, add the iconSpriteUrl property in the customizations block:

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:

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:

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

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

ThoughtSpot Visual Embed SDK defines two types of events:

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:

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:

Testing this requires the following steps:

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.

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:

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

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