Visual Embed Playground

Search🔗

To explore the Search embed function:

Go to Playground > Search.
Select a data source or a saved Answer.

Try out the following customization settings and click Run to preview the result.

Collapse data panel
Minimizes the data panel on the left navigation bar.

Hide data panel

Hides the default data panel. You can use this function to create a custom data panel when embedding the search module in your application.

Try it out

Hide chart or table

Hides the charts and tables that appear beneath the search bar by default. For example, if you want to create a custom visualization using raw data from an existing Answer, you can enable this checkbox.

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu actions that appear in More or the contextual menu.

Note	Use either `visibleActions` or `hiddenActions` to show or hide actions in the UI. The SDK does not support simultaneous execution of `visibleActions` and `hiddenActions` APIs.

To define visible actions, specify the action strings in the visibleActions attribute.

Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu , specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.

To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.

hiddenActions: [Action.DownloadAsPDF]

Try it out

Note

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. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.

For more information, see Show or hide actions.

Try it out

Enable Search Assist

Enables the Search Assist feature that provides a custom onboarding experience for users searching data on an embedded instance. With Search Assist, data engineers and Worksheet owners can create a set of questions to assist users with the search.

Try it out

Set runtime filters

Enables Runtime Filters.

Runtime filters provide the ability to filter data at the time of retrieval. To apply Runtime Filters, pass the columnName, operator, and value parameters in the runtimeFilters attribute.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

Try it out

Add search tokens

Allows you to pass search tokens as query string and execute search.

The following example shows how to create a search a searchTokenString and execute search:

searchOptions: {
    searchTokenString: '[product][sales][date].daily',
    executeSearch: true,
}

Try it out

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the event generated by the custom action and send ThoughtSpot data as a payload.

Try it out

Use Host Event Allows registering a host event. The registered event triggers an action in the embedded on clicking Try Event.

Try it out

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Try it out

Natural Language Search🔗

To explore the Search embed function:

Go to Playground > Natural Language Search.
Select a Worksheet.

Try out the following customization settings and click Run to preview the result.

Disable changing worksheet
Disables the Worksheet selection option. Users can search data only from the Worksheet specified in the SDK.

Hide worksheet selector

Hides Worksheet selector. Users can search data only from the Worksheet specified in the SDK.

Add search query

Allows you to define search query and execute search.

searchOptions: {
    searchQuery: 'average sales by country and product type',
    executeSearch: true,
}

Hide sample questions

Hides the AI-Suggested sample questions.

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu actions that appear in More or the contextual menu.

Note	Use either `visibleActions` or `hiddenActions` to show or hide actions in the UI. The SDK does not support simultaneous execution of `visibleActions` and `hiddenActions` APIs.

To define visible actions, specify the action strings in the visibleActions attribute.

Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu , specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.

To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.

hiddenActions: [Action.DownloadAsPDF]

Try it out

Note

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. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.

For more information, see Show or hide actions.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the event generated by the custom action and send ThoughtSpot data as a payload.

Use Host Event

Allows registering a host event. The registered event triggers an action in the embedded on clicking Try Event.

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Visualization🔗

To explore the visualization embedding function:

Go to Playground > Visualization.
Select a Liveboard or visualization.
Try using any of the following customization settings and click Run to preview the result.

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu actions that appear in More or the contextual menu.

Note	Use either `visibleActions` or `hiddenActions` to show or hide actions in the UI. The SDK does not support simultaneous execution of `visibleActions` and `hiddenActions` APIs.

To define visible actions, specify the action strings in the visibleActions attribute.

Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu , specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.

To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.

hiddenActions: [Action.DownloadAsPDF]

Try it out

Note

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. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.

For more information, see Show or hide actions.

Set runtime filters

Enables Runtime Filters.

Runtime filters provide the ability to filter data at the time of retrieval. To apply Runtime Filters, pass the columnName, operator, and value parameters in the runtimeFilters attribute.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

Try it out

For more information, see Runtime filters.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the event generated by the custom action and send ThoughtSpot data as a payload.

Try it out

Use Host Event Allows registering a host event. The registered event triggers an action in the embedded on clicking Try Event.

Try it out

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Try it out

Liveboard🔗

To explore the Liveboard embedding SDK functions:

Go to Playground > Liveboard.
Select a Liveboard.
Try using any of the following customization settings and click Run to preview the result.

Full Height

Dynamically resizes the embedded Liveboard frame according to the height of the Liveboard.

If the embedded Liveboard does not fit vertically within your application page, a second scroll bar may appear. When Full Height is selected, the embedded Liveboard container is automatically adjusted according to the height of the Liveboard.

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu actions that appear in More or the contextual menu.

Note	Use either `visibleActions` or `hiddenActions` to show or hide actions in the UI. The SDK does not support simultaneous execution of `visibleActions` and `hiddenActions` APIs.

To define visible actions, specify the action strings in the visibleActions attribute.

Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu , specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.

To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.

hiddenActions: [Action.DownloadAsPDF]

Try it out

Note

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. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.

For more information, see Show or hide actions.

Set runtime filters

Enables Runtime Filters on a visualization in a Liveboard.

Runtime filters provide the ability to filter data at the time of retrieval. To apply Runtime Filters, pass the columnName, operator, and value parameters in the runtimeFilters attribute.

runtimeFilters: [{
    columnName: 'Revenue',
    operator: RuntimeFilterOp.EQ,
    values: [100000]
}]

Try it out

For more information, see Runtime filters.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the event generated by the custom action and send ThoughtSpot data as a payload.

Try it out

Use Host Event Allows registering a host event. The registered event triggers an action in the embedded on clicking Try Event.

Try it out

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Try it out

Full application🔗

To explore the full ThoughtSpot embedding function:

Go to Playground > Full app.
Select a tab to set a default page view for embedded application users.
Try using any of the following customization settings and click Run to preview the result.

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu actions that appear in More or the contextual menu.

Note	Use either `visibleActions` or `hiddenActions` to show or hide actions in the UI. The SDK does not support simultaneous execution of `visibleActions` and `hiddenActions` APIs.

To define visible actions, specify the action strings in the visibleActions attribute.

Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu , specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.

To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.

hiddenActions: [Action.DownloadAsPDF]

Try it out

Note

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. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.

For more information, see Show or hide actions.

Show navigation bar

Displays the ThoughtSpot top navigation bar. By default, the navigation bar is hidden.

Try it out

Hide profile and help

Hides the user profile and help icons in the top navigation bar.

Try it out

Navigate to URL

Allows you to define a specific URL path for loading a ThoughtSpot application page.

For example, you can set the path to a specific Liveboard page as shown here:

path: 'pinboard/d084c256-e284-4fc4-b80c-111cb606449a'

If both pageID and path attributes are defined, the path definition takes precedence.

Set runtime filters

Enables Runtime Filters on a visualization in a Liveboard.

Runtime filters provide the ability to filter data at the time of retrieval. To apply Runtime Filters, pass the columnName, operator, and value parameters in the runtimeFilters attribute.

runtimeFilters: [{
    columnName: 'Revenue',
    operator: RuntimeFilterOp.EQ,
    values: [100000]
}]

Try it out

For more information, see Runtime filters.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the event generated by the custom action and send ThoughtSpot data as a payload.

Try it out

Use Host Event Allows registering a host event. The registered event triggers an action in the embedded on clicking Try Event.

Try it out

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Try it out

Visual Embed Playground

Search🔗

Natural Language Search🔗

Visualization🔗

Liveboard🔗

Full application🔗

Related information🔗