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

Display data as a table

Displays the Answer data generated from a query in the tabular format:

Try it out

Add search tokens

Allows passing search tokens as a query string and executing 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

Hide Search bar

Hides the Search bar and renders the Search page without the Search Bar. If you are using a saved Answer as a data source, the chart/table will be visible.

Try it out

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

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

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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

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 data payload generated after a custom action is clicked.

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 features available for embedding Natural Language Search:

Go to Playground > Natural Language Search.
Select a data source.
Try out the following customization settings and click Run to preview the result.

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

Hide model selector

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

Hide sample questions

Hides the AI-Suggested sample questions.

Add search query

Allows you to define search query and execute search.

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

Hide Sage Answer header

Hides the Answer header container.

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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 data payload generated after a custom action is clicked.

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.

Spotter🔗

To explore the Spotter embedding features:

Go to Playground > Spotter.
Select a data source.
Try out the following customization settings and click Run to preview the result.

Disable changing model

Disables data source selection.

Hide model selector
Hides the data source selector.

Add search query

Allows you to define search query.

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

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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 data payload generated after a custom action is clicked.

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.

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

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

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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 data payload generated after a custom action is clicked.

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

Customize Liveboard header

Allows customizing the Liveboard header. The following settings are available:

Show or hide Liveboard title and description
Show or hide the Liveboard header
Make the Liveboard header sticky as the user scrolls page
Show or hide tab panel
Show or hide specific tabs

Try it out

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

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

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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 data payload generated after a custom action is clicked.

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.

Customize app navigation
Allows customizing navigation controls. Applicable to new homepage and navigation experience only.

The following settings are available:

Show or hide the left navigation module and the application switcher
Show or hide the menu options in the left navigation panel
Show or hide the Org switcher
Show or hide the user profile and help icons

Customize home page modules
Allows customizing the visibility of modules on the home page. Applicable to new homepage and navigation experience only.

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 and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

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

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options 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.Download,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]

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 data payload generated after a custom action is clicked.

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

Additional resources🔗

For more information about the configuration settings and parameters, see the following pages:

See the following pages for information on how to embed a ThoughtSpot component: