Hello, I’m embedding a dashboard using react SDK version

8.12.3

. However, there’s an issue with the filter options not loading when embedded directly, whereas they load correctly when using an iframe. Any thoughts on how to address this?

Hi Bianca, can you please tell us if you’re using our Platform or Cloud product? Also, can you tell us if this is was previously working, and you’re running into this issue now? Lastly, if you could provide us with a snippet of the embedding code this could also help. Thank you!

Hi @Michael Ullock, • using Cloud • it was working and it stopped about 2 months ago

import React, { useState, useEffect } from "react";
import { getFactory } from "@gooddata/api-client-bear";
import bearFactory, { ContextDeferredAuthProvider } from "@gooddata/sdk-backend-bear";
import { Dashboard } from "@gooddata/sdk-ui-dashboard";
import { idRef } from "@gooddata/sdk-model";
import "@gooddata/sdk-ui-dashboard/styles/css/main.css";
import "@gooddata/sdk-ui-filters/styles/css/main.css";
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import "@gooddata/sdk-ui-pivot/styles/css/main.css";
import "@gooddata/sdk-ui-kit/styles/css/main.css";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

export function GooddataDashboard({ workspaceId, dashboardId: dashboardIdStr }) {

  const dashboardId = idRef(dashboardIdStr);
  const dashboardConfig = {
    isEmbedded: true,
    isReadOnly: true,
    menuButtonItemsVisibility: {
      pdfExportButton: false,
      deleteButton: false,
      saveAsNewButton: false,
      scheduleEmailButton: false,
    }
  };

  const [backend, setBackend] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const bearClient = getFactory();

        if (!(await bearClient.user.isLoggedIn())) {
          await bearClient.user.login("username", "password");
        }

        const bear = bearFactory().withAuthentication(new ContextDeferredAuthProvider());
        setBackend(bear);
      } catch (err) {
        console.error(err);
      }
    })()
  }, []);

  if (backend) {
    return (
      <Dashboard
        backend={backend}
        workspace={workspaceId}
        dashboard={dashboardId}
        config={dashboardConfig}
      />
    );
  } else {
    return null;
  }
}

Hi Bianca, sorry for the delay in getting back to you - but my colleague is looking into this issue now and should be reaching out to you shortly to assist with this 🙂

@Michael Ullock this video might help your colleague

Hi Bianca, Radek from the GoodData technical team here! I can't help but notice you're using the api-client-bear and other Bear imports - these are meant to work together with GoodData Platform, the GD Cloud imports are the _tiger_ ones. 🙂 Considering the products are different, this can have unintended side-effects (or sometimes straight up break things); can you try changing these accordingly?

hi @Radek Novacek I might have been wrong when saying we are using Cloud product, but it’s not clear to me how to find out which product we use, is that something you can find from my account?