Embed ThoughtSpot Search page

Table of Contents

Import the SearchEmbed package
Initialize the SDK
Create an instance of the SearchEmbed class
Register, handle, and trigger events
Render the embedded search
Test your embedding
Data panel experience in the embedded Search page

The SearchEmbed package in the Visual Embed SDK allows you to embed the entire ThoughtSpot Search page with the following components:

Search bar

ThoughtSpot search bar that allows passing search tokens. The embedded search bar includes the Go, Undo, Redo, and Reset buttons.
Data panel
The panel that allows your application users to choose data sources, and apply formula and filters. You can choose to hide or collapse the data panel using hideDataSources or collapseDataSources properties.
Search results
The part of the search page that displays charts and tables. The embedded page will show menu options to modify charts and tables. The SDK allows you to customize your menu options by using the visibleActions, hiddenActions and disabledActions properties, You can also choose to hide the chart or table and display the retrieved from a search query in the format you like.

Import the SearchEmbed package🔗

Import the SearchEmbed SDK library to your application environment:

npm

import {
    SearchEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';

ES6

<script type = 'module'>
    import {
        SearchEmbed,
        AuthType,
        init,
        prefetch,
        EmbedEvent
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

Initialize the SDK🔗

Initialize the SDK and define authentication attributes.

Create an instance of the SearchEmbed class🔗

Create an instance of the SearchEmbed object and customize your search page view.

const searchEmbed = new SearchEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['<%=datasourceGUID%>'],
    searchOptions: {
        searchTokenString: '<query-string>',
        executeSearch: true,
    },
});

For more information about the search embed object, classes, methods, interface properties, and enumeration members, see the following pages:

Register, handle, and trigger events🔗

searchEmbed.on(EmbedEvent.Init, showLoader)
searchEmbed.on(EmbedEvent.Load, hideLoader)

For more information about event types, see the following pages:

Render the embedded search🔗

searchEmbed.render();

Test your embedding🔗

Load the embedded object in your app. If the embedding is successful, you will see a page with the search bar along with full capabilities to edit search tokens and the resulting chart or table.
Run a search query and verify the results.
The following figure shows a chart created from search query on an embedded Search page:

Data panel experience in the embedded Search page🔗

By default, the data panel on an embedded Search page is presented in the classic experience mode. You can enable the new data panel experience either via ThoughtSpot UI or by setting the dataPanelV2 property to true in the SDK.

Important

Some action enumerations and variables for custom styling are not supported in the new data panel experience.

For more information about the new data panel experience, see ThoughtSpot product documentation.