Visual Embed Playground

Visual Embed Playground

The Playground allows developers to try Visual Embed APIs, play with the code, and view results instantly.

You can explore the following SDK components in the Playground.

To explore the Search embed function:

  1. Go to Playground > Search.

  2. Select a data source or a saved Answer.

  3. Try using any of the following customization settings and click Run to preview the result.

Collapse data panel

Minimizes the data panel on the left navigation bar.

Try it out

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 or hide the primary buttons or menu actions that appear in More the more options menu and the contextual menu. You can use this function to define a list of visible actions, disable or hide actions.

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, therefore logs it as a configuration error.

  • 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. The following example sets Save, Show underlying data, and DownloadAsPDF as visible actions to show only these actions in the embedded UI.

    visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]

    If you do not specify any actions and define the attribute as an empty array, no actions will appear in the UI.

  • To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu the more options menu, specify Action.Download in the disabledActions attribute as shown here:

    disabledActions: [Action.ShowUnderlyingData]
  • To display a tooltip for the disabled menu item, specify the text string 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, you must specify the ID of the custom action as the action string in the disabledActions, hiddenActions, and visibleActions attributes.

For more information, see Show or hide actions.

Add search tokens

Allows constructing a TML-based search query string to set search tokens 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.

Visualization🔗

To explore the visualization embedding function:

  1. Go to Playground > Visualization.

  2. Select a Liveboard or visualization.

  3. Try using any of the following customization settings and click Run to preview the result.

Modify available actions

Allows you to show or hide the primary buttons or menu actions that appear in More the more options menu and the contextual menu. You can use this function to define a list of visible actions, disable or hide actions.

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, therefore logs it as a configuration error.

  • 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. The following example sets Save, Show underlying data, and DownloadAsPDF as visible actions to show only these actions in the embedded UI.

    visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]

    If you do not specify any actions and define the attribute as an empty array, no actions will appear in the UI.

  • To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu the more options menu, specify Action.Download in the disabledActions attribute as shown here:

    disabledActions: [Action.ShowUnderlyingData]
  • To display a tooltip for the disabled menu item, specify the text string 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, you must specify the ID of the custom action as the action string in the disabledActions, hiddenActions, and visibleActions attributes.

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.

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 +

Liveboard🔗

To explore the Liveboard embedding SDK functions:

  1. Go to Playground > Liveboard.

  2. Select a Liveboard.

  3. 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 or hide the primary buttons or menu actions that appear in More the more options menu and the contextual menu. You can use this function to define a list of visible actions, disable or hide actions.

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, therefore logs it as a configuration error.

  • 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. The following example sets Save, Show underlying data, and DownloadAsPDF as visible actions to show only these actions in the embedded UI.

    visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]

    If you do not specify any actions and define the attribute as an empty array, no actions will appear in the UI.

  • To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu the more options menu, specify Action.Download in the disabledActions attribute as shown here:

    disabledActions: [Action.ShowUnderlyingData]
  • To display a tooltip for the disabled menu item, specify the text string 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, you must specify the ID of the custom action as the action string in the disabledActions, hiddenActions, and visibleActions attributes.

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.

Full application🔗

To explore the full ThoughtSpot embedding function:

  1. Go to Playground > Full app.

  2. Select a tab to set a default page view for embedded application users.

  3. Try using any of the following customization settings and click Run to preview the result.

Modify available actions

Allows you to show or hide the primary buttons or menu actions that appear in More the more options menu and the contextual menu. You can use this function to define a list of visible actions, disable or hide actions.

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, therefore logs it as a configuration error.

  • 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. The following example sets Save, Show underlying data, and DownloadAsPDF as visible actions to show only these actions in the embedded UI.

    visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.DownloadAsPDF]

    If you do not specify any actions and define the attribute as an empty array, no actions will appear in the UI.

  • To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu the more options menu, specify Action.Download in the disabledActions attribute as shown here:

    disabledActions: [Action.ShowUnderlyingData]
  • To display a tooltip for the disabled menu item, specify the text string 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, you must specify the ID of the custom action as the action string in the disabledActions, hiddenActions, and visibleActions attributes.

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

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.