TFD
ThoughtSpot For Developers•2mo ago
Thao

Embedding multiple Vizs/Liveboards on the same page

Hi TS team, I tried to embed multiple liveboards on different tabs on the same page, but it didn't work. How can I fix it? Thank you!
8 Replies
Anand Pushpraj
Anand Pushpraj•2mo ago
@priyanshu.kumar
utsav.kapoor
utsav.kapoor•2mo ago
Can you expand on this a little more ? Can you share a video and the error that ypu are seeing ?
Thao
ThaoOP•2mo ago
I embedded two different liveboads on two different tabs (Usage and Users). If I click the Usage tab first, the embedded liveboard on that tab will display, but the one on the Users tab will not. And vice versa, if I click the Users tab first, its liveboard will work. It doesn't return any error. So I am wondering if ThoughtSpot support embedding multiple liveboards on the same page.
Thao
ThaoOP•2mo ago
shikharTS
shikharTS•2mo ago
Can you create a new liveboard embed upon clicking on the new tab rather than loading it beforehand? That might help.
Thao
ThaoOP•2mo ago
I thought I might need to do that. I'm just trying to see if anything else before I go down that path. Thank you!
shikharTS
shikharTS•2mo ago
@yuichirio_ha
yuichirio_ha
yuichirio_ha•2mo ago
Hey @Thao , I can provide you the sandbox to checkout and compare your environment. You can do something like below and that should work out. You can do something like this : https://codesandbox.io/p/sandbox/two-liveboards-test-r7t7q9?file=%2Fsrc%2Fcomponents%2Fembed%2Fliveboard.tsx%3A12%2C39 Test it on here. 1. Enter the credentials click on init 2. wait for : Init login success Popup message. 3. Navigate to liveboard in the sandbox. 4. check by toggling the liveboards. they should have loaded and you can quickly toggle between the views. Hit the limit: 2000 characters breaking in another message. Thanks. 
export function LiveboardsPage() {
  const embedRef1 = useEmbedRef<typeof LiveboardEmbed>();
  const embedRef2 = useEmbedRef<typeof LiveboardEmbed>();

  const { liveboardIdOne, embedConfig } = useAppConfig();
  const [activeTab, setActiveTab] = useState<"liveboard1" | "liveboard2">(
    "liveboard1"
  );

  return (
    <div className="MyLiveboardContainer">
      <div className="tab-bar">
        <button
          className={`tab ${activeTab === "liveboard1" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard1")}
        >
          Liveboard 1
        </button>
        <button
          className={`tab ${activeTab === "liveboard2" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard2")}
        >
          Liveboard 2
        </button>
      </div>

      {/* Keep both liveboards mounted, but toggle visibility */}
      <HostEventBar
        embedRef={activeTab === "liveboard1" ? embedRef1 : embedRef2}
      />
      <div className="liveboard-container">
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard1" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={liveboardIdOne || LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef1}
          />
        </div>
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard2" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef2}
          />
        </div>
      </div>
    </div>
  );
}
export function LiveboardsPage() {
  const embedRef1 = useEmbedRef<typeof LiveboardEmbed>();
  const embedRef2 = useEmbedRef<typeof LiveboardEmbed>();

  const { liveboardIdOne, embedConfig } = useAppConfig();
  const [activeTab, setActiveTab] = useState<"liveboard1" | "liveboard2">(
    "liveboard1"
  );

  return (
    <div className="MyLiveboardContainer">
      <div className="tab-bar">
        <button
          className={`tab ${activeTab === "liveboard1" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard1")}
        >
          Liveboard 1
        </button>
        <button
          className={`tab ${activeTab === "liveboard2" ? "active" : ""}`}
          onClick={() => setActiveTab("liveboard2")}
        >
          Liveboard 2
        </button>
      </div>

      {/* Keep both liveboards mounted, but toggle visibility */}
      <HostEventBar
        embedRef={activeTab === "liveboard1" ? embedRef1 : embedRef2}
      />
      <div className="liveboard-container">
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard1" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={liveboardIdOne || LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef1}
          />
        </div>
        <div
          className={`liveboard-wrapper ${
            activeTab === "liveboard2" ? "visible" : "hidden"
          }`}
        >
          <LiveboardEmbed
            liveboardId={LB_ONE}
            frameParams={{ height: "100vh" }}
            ref={embedRef2}
          />
        </div>
      </div>
    </div>
  );
}

Did you find this page helpful?