tsInitialize();
return (
<div className="w-full h-full">
<div className="w-full h-full" id="ts-embed">
{children}
</div>
</div>
);Initializing ThoughtSpot Embed SDK
Table of Contents
The Visual Embed SDK provides an init() function that handles authentication and other shared configuration options for all SDK components.
In your code, you need to call init() before any other ThoughtSpot components are loaded.
In the tutorial app, which is only displaying ThoughtSpot content, the init() function is run as soon as the app is loaded, in the layout.tsx file, via the ThoughtSpotEmbed component.
The various configurations can be used exactly as defined within the standard Visual Embed SDK documentation, because the init() function is called within the TypeScript code of the component page, outside of the React component portions defined in JSX/TSX.
components/ThoughtSpotEmbed.tsx: running init() one time for all components🔗
The pattern within components/ThoughtSpotEmbed.tsx is important, because it defines any initial configurations and other functions, and runs the init() function only once.
At the bottom, we run the tsInitialize() function once, and then return a div with id=ts-embed that will be used as the container for any individual ThoughtSpot embed components loaded by the app later:
The tsInitialize() function wraps around the entire process of calling the init() function from the Visual Embed SDK.
Please note that authentication has not been implemented in this example. You must be signed into ThoughtSpot already in another tab in your browser. Production-level authentication methods are covered elsewhere in the documentation.
const tsInitialize = () => {
console.log("Initializing ThoughtSpot SDK");
// init() function defines basic configuration and authentication for all ThoughtSpot embed components
// See https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all configurations
const ee = init({
thoughtSpotHost: constants.tsURL,
callPrefetch: true,
customizations: {},
authType: AuthType.None
// getAuthToken: () => { return Promise.resolve('{tokenCopiedFromPlayground}'); } ,
// autoLogin: true,
} as EmbedConfig);
// Checks for Auth process completed as expected
if (ee) {
ee.on(AuthStatus.SUCCESS, () => {
console.log("Success");
})
.on(AuthStatus.SDK_SUCCESS, () => {
console.log("SDK Success");
})
.on(AuthStatus.FAILURE, (reason) => {
console.log("Failure: " + reason);
});
}
};|
Note
|
When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode using React Strict Mode, which automatically renders components twice, causing the duplication. |
Common customizations in the init🔗
As mentioned above, many configuration options can be specified as part of the init() function.
Common configurations include prefetch for better performance and the autoLogin: true property when using Trusted Authentication.
You’ll notice in the app options for some of the most common set of configurations involve style customizations such as CSS and text string replacement:
customizations: {
style: {
customCSS: customCss,
},
content: {
strings: stringsCustom
},
iconSpriteUrl: iconUrl
}