ThoughtSpot For Developers•5w ago

Prathic_BD - I am trying to add an event listen...

I am trying to add an event listener to all things as documented here: https://developers.thoughtspot.com/docs/Enumeration_EmbedEvent#_all. I am not too sure exactly where to hook this listener onto though. Currently we init the sdk like this: authStatus = init({ thoughtSpotHost: TS_HOST, authType: AuthType.TrustedAuthTokenCookieless, username: user, getAuthToken: getAuthToken, autoLogin: true }); And then in our react pages just use the AppEmbed component from (import { AppEmbed } from '@thoughtspot/visual-embed-sdk/react'). But I am struggling on what this appEmbed mentioned in the document object actually is since I don't ever create an object like that when i initalize the sdk.

EmbedEvent

Event types emitted by the embedded ThoughtSpot application.

6 Replies

Aditya•5w ago

You can do something like this -

<AppEmbed
          ref={embedRef}
          onALL={() => {console.log('hello world!')}}
        />

Aditya•5w ago

You can follow this documentation as well - https://developers.thoughtspot.com/docs/code-samples#_event_trigger_on_react_components

Code samples

Code samples for embedding ThoughtSpot features in an external application, product, or web portal.

shikharTS•5w ago

Also this would help @Prathic_BD https://developers.thoughtspot.com/docs/react-app-embed#_embed_full_app on how to embed using reach components and use hostevents/embedevents

Embed with React components

You can use visual embed SDK to embed ThoughtSpot search, Liveboard, visualizations, or the full app in a React application

Prathic_BDOP•4w ago

I have tinkered with this quite a bit but haven't been able to do what I need. I simply need to just log the payload for this emebedevent.ALL enum regardless of which page/route on my web app is used. All the pages on the web are essentially just the TS SDK. Example Liveboard Subpage: function Liveboard() { const { id } = useParams<{ id: string }>() return ( <section> <Typography variant="h6" component="h2" gutterBottom> </Typography> <LiveboardEmbed frameParams={{ height: 800 }} liveboardId={id} isLiveboardHeaderSticky={true} showLiveboardTitle={true} showLiveboardDescription={true} onLoad={onLoad} onRouteChange={onRouteChange} /> </section> ) } export default Liveboard Dashboard subpage: import { Typography } from '@connected-web/ui-components' import { Page } from '@thoughtspot/visual-embed-sdk'; import { AppEmbed } from '@thoughtspot/visual-embed-sdk/react'; import { onLoad, onRouteChange } from '~/AppState' function Dashboard() { return ( <section> <Typography variant="h6" component="h2" gutterBottom> </Typography> <AppEmbed frameParams={{ height: 800, }} pageId={Page.Liveboards} onLoad={onLoad} onRouteChange={onRouteChange} /> </section> ) } export default Dashboard and we have several pages like this (data, favorite, spotIQ, etc). I am not too familiar with TypeScript/React but is there someway for me to simply log these events or do I have to change how I am embedding you alls sdk? I did try the onALL but that didn't lead to anything that logging.

shikharTS•3w ago

you can use this code as example

import {
  useEmbedRef,
  AppEmbed,
  Page,
  EmbedEvent
} from "@thoughtspot/visual-embed-sdk/react";

import { HostEventBar } from "./hostEventBar";

export function MyAppEmbed() {
  const embedRef = useEmbedRef<typeof AppEmbed>();

  const handleEmbedEvent = (event: EmbedEvent) => {
    console.log('Embed Event:', event);
  };

  return (
    <>
      <HostEventBar embedRef={embedRef} />
      <div className="MyLiveboardOne">
        <AppEmbed
          ref={embedRef}
          onParameterChanged={(d) => {
            console.info("onParameterChanged", d);
          }}
          {...(embedConfig?.fullApp || {})}
          customizations={commonStyles}
          onALL={handleEmbedEvent}
        />
      </div>
    </>
  );
}

import {
  useEmbedRef,
  AppEmbed,
  Page,
  EmbedEvent
} from "@thoughtspot/visual-embed-sdk/react";

import { HostEventBar } from "./hostEventBar";

export function MyAppEmbed() {
  const embedRef = useEmbedRef<typeof AppEmbed>();

  const handleEmbedEvent = (event: EmbedEvent) => {
    console.log('Embed Event:', event);
  };

  return (
    <>
      <HostEventBar embedRef={embedRef} />
      <div className="MyLiveboardOne">
        <AppEmbed
          ref={embedRef}
          onParameterChanged={(d) => {
            console.info("onParameterChanged", d);
          }}
          {...(embedConfig?.fullApp || {})}
          customizations={commonStyles}
          onALL={handleEmbedEvent}
        />
      </div>
    </>
  );
}

Does this not work for you? I can see all the embed events being logged to console. Also, it you do have any doubts you can always use the askdocs on the developer site. It might give you some hallucinations, but will help you get examples and get a gist of the solution for an embed problem that you have.. In the code you have given , you are using

onLoad={onLoad}

onLoad={onLoad}

Do you have an onLoad function defined? What will it do? Are you using this function to log somewhere? cc @yuichirio_ha

yuichirio_ha•3w ago

Hey @Prathic_BD , you can confirm if the above is what you want to accomplish. Add a onX on the liveboard to handle event X from the thoughtspot Side. onALL as suggested by @shikharTS should work-it-out. If you want to accomplish something specific or have any doubts you can add. Thanks.

Gaming

Programming

Prathic_BD - I am trying to add an event listen...

Did you find this page helpful?