ThoughtSpot For Developers•4w ago

ythomop - Hi. Is there any way to override live...

Hi. Is there any way to override liveboard filters using runtime filters using the embedding SDK? The use case is that there is a filter controlled by the user applied to a liveboard and, depending on some factors, our shell app has to change this filter automatically for the user. The behavior we have observer is that both liveboard and runtime filters are AND-ed in the produced queries, which is not our desired behavior. Thanks, Yannis

10 Replies

yuichirio_ha•4w ago

hey @ythomop We have filters, Which will be modifying your filter chips you see in the liveboard header. And the next one are runtimeFilters - which won't show up in UI directly. You can modify both of them / update them using hostevents. https://developers.thoughtspot.com/docs/Enumeration_HostEvent#_updatefilters https://developers.thoughtspot.com/docs/Enumeration_HostEvent#_updateruntimefilters

HostEvent

Event types that can be triggered by the host application to the embedded ThoughtSpot app.

ythomopOP•4w ago

I can't make it work. I trigger a HostEvent.UpdateFilters on LiveboardRendered but the liveboard filters don't update. Can you a share a code snippet that does what you describe using the LiveboardEmbed component from @thoughtspot/visual-embed-sdk/react? My (simplified) code looks like this:

import React from "react";
import { LiveboardEmbed as LiveboardEmbedType, RuntimeFilterOp, HostEvent } from "@thoughtspot/visual-embed-sdk";
import { LiveboardFilter } from "@/thoughtspot/events";
import { LiveboardEmbed } from "@thoughtspot/visual-embed-sdk/react";

export type VizEmbedProps = {
  liveboardFilters: LiveboardFilter[];
};

export function VizEmbed({ liveboardId, vizId }: { liveboardId: string; vizId: string }) {
  const embedRef = React.useRef<LiveboardEmbedType>(null);

  const runtimeFilters = React.useMemo(() => {
    return [
      {
        columnName: "date",
        operator: RuntimeFilterOp.BW_INC_MAX,
        values: ["2025-08-01", "2025-08-02"],
        type: "EXACT_DATE_RANGE",
      },
    ];
  }, []);

  const onLiveboardRendered = React.useCallback(() => {
    if (embedRef.current) {
      const payload = {
        filters: runtimeFilters,
      };
      embedRef.current.trigger(HostEvent.UpdateFilters, payload);
    }
  }, [runtimeFilters]);

  return (
    <LiveboardEmbed
      ref={embedRef}
      liveboardId={liveboardId}
      vizId={vizId}
      runtimeFilters={runtimeFilters}
      onLiveboardRendered={onLiveboardRendered}
    />
  );
}

import React from "react";
import { LiveboardEmbed as LiveboardEmbedType, RuntimeFilterOp, HostEvent } from "@thoughtspot/visual-embed-sdk";
import { LiveboardFilter } from "@/thoughtspot/events";
import { LiveboardEmbed } from "@thoughtspot/visual-embed-sdk/react";

export type VizEmbedProps = {
  liveboardFilters: LiveboardFilter[];
};

export function VizEmbed({ liveboardId, vizId }: { liveboardId: string; vizId: string }) {
  const embedRef = React.useRef<LiveboardEmbedType>(null);

  const runtimeFilters = React.useMemo(() => {
    return [
      {
        columnName: "date",
        operator: RuntimeFilterOp.BW_INC_MAX,
        values: ["2025-08-01", "2025-08-02"],
        type: "EXACT_DATE_RANGE",
      },
    ];
  }, []);

  const onLiveboardRendered = React.useCallback(() => {
    if (embedRef.current) {
      const payload = {
        filters: runtimeFilters,
      };
      embedRef.current.trigger(HostEvent.UpdateFilters, payload);
    }
  }, [runtimeFilters]);

  return (
    <LiveboardEmbed
      ref={embedRef}
      liveboardId={liveboardId}
      vizId={vizId}
      runtimeFilters={runtimeFilters}
      onLiveboardRendered={onLiveboardRendered}
    />
  );
}

yuichirio_ha•4w ago

can you once try by adding a button - and trigger the update onClick, I will also check the above once. onLiveboardRendered

ythomopOP•4w ago

Just tried. Nothing changed.

shikharTS•4w ago

the format for filter in payload is a bit different than the one you are using. Check the correct format here : https://developers.thoughtspot.com/docs/Enumeration_HostEvent#_updatefilters

HostEvent

Event types that can be triggered by the host application to the embedded ThoughtSpot app.

ythomopOP•4w ago

You are right, I missed that. In any case, I fixed the payload's fields, but the result is the same. For what it's worth, I added a then and a catch callback and it seems that the request that triggers the event times-out with the error message being Error: Trigger timed-out in getting a response.

yuichirio_ha•3w ago

Hey, In the code, I'm unsure why you adding runtimeFilters in the param, There are two things. - RuntimeFilters : Which will update the data in liveboard as per the applied filters. - filter chips : If the liveboard has some filter chips applied then you can use UpdateFilters to update the value of those parameters/filters. I understood your usecase I think you don't need filter chips updation. Just update UpdateRuntimeFilters in the above. Just use updateRuntimeFilters - you can check the doc once. https://developers.thoughtspot.com/docs/Enumeration_HostEvent#_updateruntimefilters If still something comes up - let's connect on call.

HostEvent

Event types that can be triggered by the host application to the embedded ThoughtSpot app.

ythomopOP•3w ago

I'm adding the runtimeFilters prop because I need it and it works. What doesn't work and none of the solutions mentioned have helped me is updating the filter chips. Triggering UpdateFilters or UpdateRuntimeFilters does not do anything. I would like to schedule a call, but I'll be on leave until 21 August. Can we schedule a call on the 22nd? Thank you

yuichirio_ha•2w ago

sure, let me dm. We can connect over a call on common time. Thanks for connecting - We checked - it's working with normal params but with date value provided in the filter related to date. Will get back with proper format to pass in the particular type of values for the date filters to work.

yuichirio_ha•2w ago

He found the solution - It was display name different from column name. We need to add column name and for date filters also the type along with the other info : https://developers.thoughtspot.com/docs/embed-liveboard#_date_filters

Embed a Liveboard

You can use the LiveboardEmbed SDK library to embed a ThoughtSpot Liveboard in your app and use it for live insights

Gaming

Programming

ythomop - Hi. Is there any way to override live...

Did you find this page helpful?