// Required for referencing the LiveboardEmbed that is created in other code
const embedRef = useEmbedRef<typeof LiveboardEmbed>();
return <LiveboardEmbed
frameParams={{width:'100%',height:'100%'}}
liveboardId={renderContent.split("|")[0]}
ref={embedRef}
onLiveboardRendered={afterEmbedRendered}
onData={removeLoader}
onSave={updateMenuSystem}
/>Event handling
Table of Contents
The ThoughtSpot Visual Embed SDK provides a set of Embed events that can be listened to and handled via callback functions.
Event listener props🔗
Every EmbedEvent has an equivalent prop in the React components where the event is applicable, with the naming pattern on{EmbedEvent}:
Use embedRef to update ThoughtSpot component🔗
By setting the ref prop to the embedRef const declared earlier within the page, functions can reference the embed component within their code to trigger a HostEvent without causing the React page to attempt to re-render the embedded ThoughtSpot component.
For example, the handler function afterEmbedRendered assigned to onLiveboardRendered above might look like:
const afterEmbedRendered = () => {
embedRef.current.trigger(HostEvent.SetVisibleVizs, [
"3f84d633-e325-44b2-be25-c6650e5a49cf",
"28b73b4a-1341-4535-ab71-f76b6fe7bf92",
]);
};The embedRef.current syntax allows for issuing the .trigger() method of calling in a HostEvent in when the EmbedEvent has fired off.
You can use the same syntax to link other UI elements within the React page to the ThoughtSpot component without generating unnecessary and disruptive re-rendering.