Solved

Can I embed a dashboard without iframes (ideally using pure JavaScript or React.js)?

  • 16 December 2020
  • 2 replies
  • 121 views

I have created a dashboard and it looks like the only way to integrate it into my application is using an iframe as described in this documentation page.

Is an iframe the only option? I’d love to be able to embed it using React or vanilla JavaScript, and, ideally, to be able to manipulate the content of the dashboard programmatically.

I understand that you have the GoodData.UI component library and I can use it to create my custom dashboard programmatically. However, I’d prefer to be able to create my dashboards using your point-and-click UI because I want to minimize the amount of code we have to write in order to make GoodData work.

icon

Best answer by Dan Homola 11 March 2021, 14:46

Hi @adhira93, as @Pavel mentioned in his answer, in version 8.2.0 (which was released today) we have added a component that allows you to embed dashboards in React directly (without iframes). The component is called DashboardView and in its most basic form you can now write as little as

import React from "react";
import { DashboardView } from "@gooddata/sdk-ui-ext";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

const SimpleDashboardView = () => {
return <DashboardView dashboard="dashboard-id" />;
};

export default SimpleDashboardView;

You can find more information here:

Please note that this component is released as a beta now, there might be some changes in future releases.

View original

2 replies

Hi @adhira93, as @Pavel mentioned in his answer, in version 8.2.0 (which was released today) we have added a component that allows you to embed dashboards in React directly (without iframes). The component is called DashboardView and in its most basic form you can now write as little as

import React from "react";
import { DashboardView } from "@gooddata/sdk-ui-ext";
import "@gooddata/sdk-ui-ext/styles/css/main.css";

const SimpleDashboardView = () => {
return <DashboardView dashboard="dashboard-id" />;
};

export default SimpleDashboardView;

You can find more information here:

Please note that this component is released as a beta now, there might be some changes in future releases.

Userlevel 2

Hi @adhira93, this is something we are currently working on. We plan to introduce the new <DashboardView /> component in the 8.2 version of our GoodData.UI library.

This new component will do exactly what you are asking for, including the ability to patch an existing dashboard programmatically using JavaScript or TypeScript.

The 8.2 is currently in alpha and we expect to release a stable version in Q1 2021.

 

Reply