https://www.gooddata.ai/ logo
Join Slack
Powered by
How to embed individual visualization in front end...
# gooddata-cloud
k
How to embed individual visualization in front end web application using react SDK. Give me code snippet.
k
Thinking completed To embed an individual visualization into a React front-end application using the GoodData.UI React SDK, you can use the 
InsightView
component. Prerequisites Before rendering the component, ensure you have: 1. Installed the necessary dependencies (such as 
@gooddata/sdk-ui-ext
). 2. Set up the 
AnalyticalBackend
and 
WorkspaceProvider
(or passed backend and workspace props) in your application. 3. Handled Cross-Origin Resource Sharing (CORS) [Embed Visualizations Using React SDK]. Code Snippet You can reference a saved visualization directly by its ID:
Copy code
import React from "react";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";

const insight = "<visualization_id>";
const showTitle = "Demo Column Chart";
const style = { height: 300 };

export function MyComponent() {
    return (
        <div style={style}>
            <InsightView
                insight={insight}
                showTitle={showTitle}
            />
        </div>
    );
}
[React SDK; Slack forum user question] How to Get the Code Directly from the UI You can also copy a pre-generated snippet directly from GoodData: 1. Open the saved visualization in GoodData. 2. Click the 
</>
 (Embed) button in the top-right corner and select Embed visualization [Embed Visualizations Using React SDK]. 3. Select the React tab, configure your options (referential or programmatic, title display, and height), and click Copy code [Embed Visualizations Using React SDK]. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
s
Hi Krishti, Please try our AI agent's solution and let us know if you need any further help. You can tag our AI agent (@kapa.ai) directly with your question here in this thread to receive a fast response.
k
Thinking completed I am here and ready to help! If you run into any issues implementing the 
InsightView
component or need assistance with setting up authentication, the analytical backend, or configuring visualizations, please feel free to share your questions or error details in this thread. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
k
How to provide access to certain group for embeded visuals @kapa.ai
k
Thinking completed In GoodData, access control for embedded visuals differs depending on whether you are embedding an individual visualization (insight) or a dashboard. 1. Embedded Individual Visualizations (Insights) Individual visualizations (insights) do not have granular, object-level permissions like dashboards do [Slack forum user question]. To control access for a specific user group: • Workspace-level permissions: Access is governed at the workspace level. The user group must have at least 
VIEW
permission on the workspace containing the visualization [Slack forum user question]. • Row-level data restrictions (User Data Filters): If users in the group should only see specific data within the visualization, configure User Data Filters (UDFs) for that user group [Building Real-time, Multi-Tenant Analytics: 10 Questions and Answers; Slack forum user question]. • Front-end / Application-level control: If you need to restrict the visibility of the visual itself to a specific group, control whether the component (such as 
InsightView
) is rendered in your front-end application based on the user's role or group in your app. 2. Embedded Dashboards If your embedded visual is part of an embedded dashboard, dashboards support explicit object-level sharing. Via the User Interface: 1. Open the dashboard in the GoodData UI and click Share in the top right [Share a Dashboard]. 2. Click + Add and select the target User Group [Share a Dashboard]. 3. Choose the permission level (e.g., Can view, Can view and share, or Can edit and share) [Share a Dashboard]. 4. Click Share to confirm [Share a Dashboard]. _(Note: The user group must first have at least 
VIEW
access assigned to the workspace to appear in the share dialog and access the dashboard [Share Dashboards; Community Slack].)_ Programmatically (Python SDK): To manage dashboard permissions for a group using the Python SDK:
Copy code
from gooddata_sdk import (
    GoodDataSdk,
    CatalogAssigneeIdentifier,
    CatalogPermissionsForAssigneeIdentifier,
)

sdk = GoodDataSdk.create("GOODDATA_HOST", "GOODDATA_TOKEN")

sdk.catalog_permission.manage_dashboard_permissions(
    workspace_id="<workspace_id>",
    dashboard_id="<dashboard_id>",
    permissions_for_assignee=[
        CatalogPermissionsForAssigneeIdentifier(
            assignee_identifier=CatalogAssigneeIdentifier(
                id="<group_id>", type="userGroup"
            ),
            permissions=["VIEW"],  # Options: VIEW, SHARE, EDIT
        )
    ],
)
[Automate User Provisioning and Assign Content] 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
k
@kapa.ai - Can we have view access for a group for individual visualization
k
Thinking completed No, you cannot set view access for a specific group on an individual visualization (insight) directly in GoodData. In GoodData, insights and metrics do not have object-level permission settings like dashboards do [Slack forum user question]. Access is managed at the workspace level: • Any user or user group with at least the 
VIEW
permission on a workspace can view the insights in that workspace [Supported Permissions; Slack forum user question]. • There is no native mechanism within GoodData to permit a user group to view one specific visualization while hiding others within the same workspace [Slack forum user question]. Alternative Approaches If you need to restrict access: 1. Embed on a Dashboard: Add the visualization to a dashboard and manage access at the dashboard level, where sharing and view permissions can be assigned to specific user groups [User and User Group SEE Permission; Slack forum user question]. 2. Workspace Separation: Place visualizations meant for different groups into separate workspaces and assign group permissions at the workspace level [Slack forum user question]. 3. Application-Level Logic: If you are embedding via the React SDK (e.g., using 
InsightView
), control the rendering logic in your host web application so that the component is only displayed if the logged-in user belongs to the allowed group [React]. 4. User Data Filters (UDF): If the goal is to restrict the data returned inside the visualization for that group rather than hiding the visual itself, apply User Data Filters to the group [Slack forum user question]. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
k
If a user has view only access for workspace and vies for few dashboard. User does not see Analyze tab at all. Can this user still see emebed visualization in embedded site. and can it filter based on udf. @kapa.ai
k
Thinking completed Yes, the user can still see the embedded visualization, and it will be filtered by User Data Filters (UDF). Here is how both aspects work: 1. Viewing Embedded Visualizations with VIEW Access • A user with 
VIEW
access at the workspace level can load and view visualizations [Slack forum user question]. • Not having access to the Analyze tab simply means the user lacks the 
ANALYZE
permission (which allows creating and editing visualizations in Analytical Designer). However, embedding an existing visualization (for example, using the React SDK's 
InsightView
component) only requires read/view access to execute and display the insight [Slack forum user question]. 2. Filtering Based on UDF (User Data Filters) • Yes, the embedded visualization will automatically apply and filter based on the user's UDF. • User Data Filters apply row-level security at the Logical Data Model (LDM) level across the entire workspace [Slack forum user question]. • Whenever an insight or dashboard queries data on behalf of that user, the assigned UDF is evaluated and restricts the data returned [Slack forum user question; Slack forum user question]. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
k
@kapa.ai — I just checked this behavior. The user has view-only access to the specific dashboard, but when they try to open a individual visualization using its direct link, it does not work. Our use case is to embed the visualization in our web application, and we cannot grant the user more than view access at the workspace level. With the current permissions, the user also does not have access to the Analyze tab. Is there a way to allow a user with view-only dashboard access to open/view a visualization through a direct link, without granting additional workspace permissions or exposing the Analyze functionality?
k
Thinking completed No, there is no way in GoodData to open or view an individual visualization directly via its URL without providing access to the Analyze interface. Here is why this occurs and what the available options are: Why the Direct Link Does Not Work Direct links to individual visualizations run through the Analyze interface (e.g., 
.../analyze/embedded/#/...
or the main platform Analyze tab) [Slack forum user question; Slack forum user question]. • When opening a standalone URL link to a visualization, GoodData routes the request through Analytical Designer. • If a user only has 
VIEW
access and does not have the 
ANALYZE
permission, they cannot access the Analyze tool, and opening the direct URL fails. • GoodData only provides standalone URL/iframe embedding endpoints for Dashboards and Analytical Designer (
/analyze/...
)—there is no dedicated standalone view-only URL for individual visualizations [Embed Visualizations Using Iframes; Slack forum user question]. Recommended Workarounds If you cannot grant 
ANALYZE
permissions and must avoid exposing the Analyze interface: 1. Embed via the React SDK (
InsightView
) Instead of using an iframe or direct URL link, embed the visualization inside your web application using the GoodData.UI React SDK:import "@gooddata/sdk-ui-ext/styles/css/main.css"; import { InsightView } from "@gooddata/sdk-ui-ext"; export function MyVisualization() { return ( div style={{ height: 400 }} <InsightView insight="visualization_id" /> /div ); }Because 
InsightView
only executes and renders the visualization component without loading the Analytical Designer UI, it renders cleanly in your web application [Slack forum user question]. 2. Embed a Single-Visualization Dashboard via Iframe If your web application relies strictly on URL/iframe embedding: ◦ Create a minimal dashboard containing only that single visualization. ◦ Grant the user or user group 
VIEW
permission to that specific dashboard [Automate User Provisioning and Assign Content]. ◦ Embed the dashboard via iframe using URL parameters such as 
?hideControl=[topBar,filterBar]
to hide navigation, toolbars, and dashboard controls so that only the chart itself is visible [Slack forum user question]. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
k
@kapa.ai - We embed using React SDK. Can you give me code snippet for individual viz embed.
k
Thinking completed To embed an individual visualization using the GoodData.UI React SDK, use the 
InsightView
component from the 
@gooddata/sdk-ui-ext
package [InsightView]. Basic Code Snippet You can reference the visualization directly using its identifier:
Copy code
import React from "react";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";

export function EmbeddedVisualization() {
    return (
        <div style={{ height: 400, width: "100%" }}>
            <InsightView
                insight="<visualization_identifier>"
                showTitle={true}
            />
        </div>
    );
}
[React SDK; InsightView] Example with Custom Configuration You can also pass additional chart configuration (such as colors or legend settings) via the 
config
prop:
Copy code
import React from "react";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";

export function ConfiguredVisualization() {
    return (
        <div style={{ height: 400, width: 600 }}>
            <InsightView
                insight="<visualization_identifier>"
                config={{
                    colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
                    legend: {
                        enabled: true,
                        position: "bottom"
                    }
                }}
            />
        </div>
    );
}
[InsightView; Embed a Visualizations Created in Analytical Designer] Alternative: Referencing via URI If you prefer referencing the visualization by its URI instead of its identifier, use the 
uriRef
helper from `@gooddata/sdk-model`:
Copy code
import React from "react";
import "@gooddata/sdk-ui-ext/styles/css/main.css";
import { InsightView } from "@gooddata/sdk-ui-ext";
import { uriRef } from "@gooddata/sdk-model";

export function UriVisualization() {
    return (
        <div style={{ height: 400, width: 600 }}>
            <InsightView
                insight={uriRef("<visualization-uri>")}
            />
        </div>
    );
}
[InsightView] Requirements • Make sure your app wraps the component with 
BackendProvider
and 
WorkspaceProvider
(or passes 
backend
and 
workspace
directly to 
InsightView
) so it knows which workspace and backend to query [Slack forum user question]. • Always specify a container height (or wrap it in an element with a defined height), as 
InsightView
adjusts its size to fit its parent container [InsightView]. 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed.
Open in Slack
PreviousNext
Powered by