Embed an Insight

Learn how to use GoodData.UI to embed an Insight into your web application.

Embed an Insight Using GoodData.UI


  1. Generate a React application skeleton using the GoodData.UI Accelerator Toolkit.

    npx @gooddata/create-gooddata-react-app --backend tiger
  2. When prompted, enter the application name and the hostname of your GoodData.CN deployment.

    ? What is your application name? gooddata-cn-demo
    ? Insert your hostname: http://localhost:3000
    ? What is your application desired flavor?
    ❯ TypeScript

    The toolkit generates the application skeleton and it will guide you through the next steps.

    Success! Your GoodData-powered application "gooddata-cn-demo" was created.
    You can start it using the following commands:
        cd gooddata-cn-demo
        yarn start
  3. Start the application.

    cd gooddata-cn-demo
    yarn start

    The application starts running in your browser. If port 8443 is available the application should run on localhost:8443 by default.

    Empty application

  4. Provide your workspace identifier in src/constants.ts.

    export const workspace = "<your-workspace-id>";
  5. Load the logical data model and all its entities to the application.

    export TIGER_API_TOKEN=<tiger-api-token>
    yarn refresh-md

    If you are running GoodData.CN locally, you can check the install page where the Bearer token is mentioned.

    An output is generated:

    |  GoodData Catalog Export Tool v8.5.0         |
    ✔ Catalog loaded
    ✔ Date data sets loaded
    ✔ Insights loaded
    ✔ Analytical dashboards loaded
     ✔ SUCCESS  All data have been successfully exported
    |  The result generated from workspace with id demo is located at src/md/full.ts  |
    ✨  Done in 2.65s.

    Review the src/md/full.ts file to validate the generated content.

  6. Embed the insight into the prepared home page. To do so, open src/routes/Home.tsx and update the content to the following:

    import React from "react";
    import { InsightView } from "@gooddata/sdk-ui-ext";
    import Page from "../components/Page";
    import { Insights } from "../md/full";
    const Home = () => {
        return (
                <div style={{ height: 400 }}>
                    <InsightView insight={Insights.OrdersByStatusAndCategory} />
    export default Home;
  7. Return to your application in the browser, and click Home in the navigation bar. The embedded insight opens.

    Saved Insight