Build your first search-driven analytics app with the ThoughtSpot SDK

tag is where the embedded content will be placed. The SDK will insert an iframe with the content into this tag. There is also an import of the ThoughtSpot SDK and the JavaScript module we will be working with.

<div id='embed' class='hidden'>
   <p><em>Select an embedding option from the navbar.</em></p>
</div>
<script src='https://unpkg.com/@thoughtspot/visual-embed-sdk/dist/tsembed.js'></script>
<script src='tse.js' type='module'></script>

tse.js

This file contains all of the code we will use for embedding. The key methods we will be updating are the onLogin, onFullApp, etc. functions that respond to events in the UI to embed code.

Step 2: Start the webserver

At this point, you should have a folder on your file system with the files. You will also want to have a text editor for editing the files. While you can use any text editor, one specific for web documents is recommended.

To test that your webpage loads, start the server. For example, if you are going to use the Python3 server, navigate to the folder from the command line and run

$ python3 -m http.server 8000

Then, in your browser go to http://localhost:8000. You should get a page that looks similar to the following. The URL shown on the page may be different.

Step 3: Initialize ThoughtSpot embedding

Before you can embed content, you have to initialize the ThoughtSpot connection. This involves specifying the ThoughtSpot URL along with the authentication type.

To set the server, edit the tse.js file and set the tsURL value to your server. Your ThoughtSpot trial URL may begin with my1.thoughtspot.cloud or my2.thoughtspot.cloud, so match it accordingly. Save your changes.

const tsURL = "https://my1.thoughtspot.cloud/";

If you change the value to the server you are using and reload your screen, you should see the correct server. If your page doesn’t change, you may need to disable caching. See Appendix A: Development Environment for details on how to disable in Chrome.

The initialization step authenticates to ThoughtSpot for future calls. The SDK supports multiple authentication approaches, for this tutorial we are using either AuthType.None. See the documentation for more details on all the available authentication options and their parameters.

The init code looks like the following. A thoughtSpotHost and authType are required for all types of authentication. Depending on the type of authentication you may have other parameters as well.

init({
 thoughtSpotHost: tsURL,
 authType: AuthType.None
});

Note that with AuthType.None, you may be prompted to log into ThoughtSpot. ThoughtSpot will remember after the first time you log in until the session expires. Tip: if you are giving a demo, log in before the demo and your session will be active so you won’t be prompted to log in.

This code gets added to the onLogin method of the tse.js file. Make the proper changes and run the code. Note that the screen will load in either case, so you may want to open your developer console to see any errors that might occur.

After adding the code and logging in, you should see a page similar to the following:

Step 4: Embed search

We will start off by embedding search. You will use a two-step process for embedding all objects. First, you create the embed object and then you render it. By breaking this into two steps you could create a set of objects and just call render based on user activity.

You will need data and a worksheet as mentioned in the Requirements section.

First, create the embed component and then call render(). In the onSearch function add the following code:

const embed = new SearchEmbed('#embed', {
 frameParams: {},
});

embed.render();

You can also specify the datasource to use:

dataSources: ["cd252e5c-b552-49a8-821d-3eadaa049cca"]

The easiest way to get the datasource ID is to use the Developer Playground using the following steps:

1. Click the Develop tab in ThoughtSpot
2. Select Search under Playground
3. Select the datasource from the dropdown list
4. You will see a line for the dataSources get added
5. If you click Run, you will see Search update with the chosen source already selected

If you add the dataSource, the new code looks like (with your ID):

const embed = new SearchEmbed('#embed', {
 frameParams: {},
 dataSources: ["c349586f-3fd7-4105-8849-4e22f63381fc"],
});

Now if you select the Search option, you should see something like the following:

Note that your search suggestions, sources, etc. will differ.

Step 5: Embed a single liveboard

Before you can embed a liveboard you need to get the pinboard ID. To get the ID, use the Developer Playground again, but select Liveboard and then select a liveboard from the drop-down menu.

In this case, the pinboard ID is "2ba03345-d20f-4a10-9509-6e13bbb2e32a".

Now create the following code, setting the PINBOARD_ID to your pinboard ID.

const embed = new PinboardEmbed("#embed", {
 frameParams: {},
   pinboardId: "2ba03345-d20f-4a10-9509-6e13bbb2e32a",// TODO - set to your pinboard ID.

 }
);

embed.render();

Now if you select the Liveboard option, you should see something like the following:

Step 6: Embed a single visualization

You can also embed a single visualization from a liveboard. To get the link to the visualization use the Developer Playground and select Visualization. Then select a liveboard and visualization from the dropdown to get the IDs.

Now capture the pinboard ID and visualization ID.

Pinboard ID: bf2b2c6d-d29d-49f3-814c-00a3c40e77b0

Visualization ID: 12b5aae1-7c6f-4733-b731-125b29c7e5df

Next, update the code to use your IDs and add the following:

const embed = new PinboardEmbed('#embed', {
 frameParams: {},
 pinboardId: 'bf2b2c6d-d29d-49f3-814c-00a3c40e77b0',  // TODO - set to your pinboard ID.
 vizId: '12b5aae1-7c6f-4733-b731-125b29c7e5df', / TODO - set to your visualization ID.

});

embed.render();

Now select Visualization from the navbar and you should see something like the following:

Step 7: Embed the full application

Finally, you can embed the full application. You can do this with and without the navigation bar. If you don’t include the navigation bar, you will have to provide the navigation capabilities as part of your application.

In the onFull function, add code to embed. For simplicity, the error handling is not shown.

const embed = new AppEmbed('#embed', {
 frameParams: {},
 pageId: Page.Home, // loads the Home tab.  Others can be loaded.  See Page enum.
});

embed.render();

This sample shows full embedding with the starting page being the Home page. You can specify any of the pages, such as Data, Liveboards, etc. See the documentation for the full list of parameter options.

After updating the code and selecting the full navigation option, you should see a page like the following.

You can also specify a path instead of a pageId. Using the path attribute lets you go to any location, such as to a specific liveboard. When you use PinboardEmbed you get a limited number of options, for example, you can’t make a copy. But if you give a path to the liveboard, you get all available options (that aren’t disabled). These paths have a special shortcut syntax, e.g. pinboard/, so you don’t need the full URL. You get the ID as described above when embedding the liveboard.

The syntax in this scenario is:

const embed = new AppEmbed('#embed', {
 frameParams: {},
 path: "pinboard/2ba03345-d20f-4a10-9509-6e13bbb2e32a", // loads the specific pinboard.
});

embed.render();

Optional: Hiding and Disabling Features

All of the steps so far have shown embedding with the default functionality. However, it’s often desired to give customers access to only some features and provide enhanced functionality based on licensing. In this section, you will disable and hide different features. Not all actions are covered here. See the ThoughtSpot documentation for the available options.

All embedding options have three attributes you can set:

disabledActions: [Action.??],
disabledActionReason: '<reason for disable>’,
hiddenActions: [Action.??, Action.??],

• disabledActions - these are actions that will be visible but greyed out and unusable.
• disabledActionReason - this is the reason an action is disabled. It will show up as a tooltip when the user hovers on the action.
• hiddenActions - these features will not be shown to the user.

For a complete list of actions that you can disable and hide, see the ThoughtSpot documentation.

Hiding and Disabling in Search

Add the following code to your SearchEmbed component:

disabledActions: [Action.SpotIQAnalyze],
disabledActionReason: 'Enterprise feature.',
hiddenActions: [Action.Download, Action.Share, Action.DownloadAsCsv],

This change will disable SpotIQ and say it’s an “Enterprise feature”. It will hide downloading and sharing options.

Hiding and Disabling in Liveboards

Add the following code to your PinboardEmbed component:

disabledActions: [Action.DownloadAsPdf],
disabledActionReason: 'Enterprise feature.',
hiddenActions: [Action.PinboardInfo]

This change will disable the ability to download as PDF and hide the Liveboard Info option. Note that since there is only one item left, the More menu switches to just have the download button.

Hiding and Disabling in Visualizations

Add the following code to your EmbedPinboard (visualization) component:

disabledActions: [Action.Download],
disabledActionReason: 'Enterprise feature.',
hiddenActions: [Action.SpotIQAnalyze]

This change will disable the ability to download and will hide SpotIQ.