Embed a Dashboard

Overview

Embedding a dashboard creates a version of the dashboard minus platform functions for use in your own product.

• If you are a Growth or Enterprise customer, embedding Analytical Designer (insights) and Dashboards will remove all the GoodData branding.

• If you are a Free customer, the following Powered by GoodData logo will be displayed on embedded tools. 

Note: Clicking the logo redirects you to either the GoodData product documentation (Administrators) or the GoodData website (other roles). See User Roles.

Create a URL for embedding a dashboard

This article assumes that you access your workspaces at https://secure.gooddata.com/ .

• If you are a GoodData Free user, replace secure.gooddata.com with the domain from the link that you received in your GoodData Free confirmation email (for example, free123ab.na.gooddata.com ).
• If you are a GoodData Growth user, replace secure.gooddata.com with the domain from the link that you received in your GoodData confirmation email (for example, yourcompanyname.na.gooddata.com ).
• If you are a white-labeled customer, replace secure.gooddata.com with your white-labeled domain.

Steps:

1. Log in to the GoodData Portal.

2. Click the Dashboards tab.

3. To embed an empty dashboard in the edit mode, use the following URL:

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/new-dashboard
   

4. To embed an existing dashboard:

   1. From the list of dashboards, select the dashboard that you want to embed.

   2. Check the URL in the browser address bar. For example:

      https://secure.gooddata.com/dashboards/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}/
      

   3. Add the string /embedded/ into the URL after /dashboards. For example:

       https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}/
      

    For more details about formats of the embedded URL, see [Embedding Code Formats](../../../../expand-your-gooddata-platform/gooddata-integration-into-your-application/embed-gooddata-elements-into-your-applications/embedding-code-formats).

Advanced configuration options

1. If you want the navigation panel listing the dashboards to be visible (by default, it is hidden), add the showNavigation parameter to the URL and set to true.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?showNavigation=true
   

2. If you want to use tags to display or hide only certain attributes, facts, metrics, or dates in the drop-down menus in the edit mode, add either of the following parameters to the URL: ?includeObjectsWithTags=[tag_name] - to show only the attributes, facts, metrics, and dates with the specified tag ?excludeObjectsWithTags=[tag_name] - to hide the attributes, facts, metrics, and dates with the specified tag

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?includeObjectsWithTags=[sales]
        
   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?excludeObjectsWithTags=[marketing,hr]
        
   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?excludeObjectsWithTags=[finance]&showNavigation=true
   

   • The tags must include only lowercase characters, uppercase characters, and numbers.

   • To specify multiple tags, separate them with a comma.

   • If you specify both parameters at the same time, only the includeObjectsWithTags parameter is applied and the excludeObjectsWithTags parameter is ignored.

   Hiding and displaying attributes, facts, metrics, and dates is not a security feature. Items are hidden and shown depending on the parameter in the URL, and anyone who can access and edit the URL can change the parameters.

   For more information about the tags, see Add a Tag to an Attribute, Add a Tag to a Metric, Add a Tag to a Fact, and Add a Tag to a Dataset.

3. To hide the filter bar, add the ?hideControl=[filterBar] parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?hideControl=[filterBar]
   

4. To hide individual attribute filters from a dashboard, add ?hidefilters=attributeDisplayformIdentifier parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?hidefilters=attributeDisplayformIdentifier
   

   To hide multiple filters, separate the identifiers with a comma: ?hidefilters=label.restaurantlocation.locationname,label.restaurantprofile.restaurantcategory

   For more information about attribute identifiers, see Determine the Attribute Value ID

5. To hide the list of insights and other items that you can add to dashboards, add the ?hideControl=[widgetsCatalogue] parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?hideControl=[widgetsCatalogue]
   

   To hide multiple parameters, separate them with a comma: ?hideControl=[filterBar,widgetsCatalogue]

6. To hide the Embed button, add the ?showEmbedButton=false parameter to the URL. 

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?showEmbedButton=false
   

7. To hide the top bar, add the ?hideControl=[topBar] parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?hideControl=[topBar]
   

8. To hide the Save as new or Delete buttons, add the ?hideControl=[deleteButton,saveAsButton] parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?hideControl=[deleteButton,saveAsButton]
   

9. To send a postMessage with drilling parameters instead of opening the URL in a new window when drilling to a URL from an insight, add the redirect-drill-url-to-message=all parameter to the URL.

   https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}?redirect-drill-url-to-message=all
   

Use the completed URL as the basis for embedding your dashboard. For example:

https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}/?hideControl=[filterBar,topBar]

Add the embedded dashboard to your page

The following is an example reference using the workspace ID in your URL:

<iframe src="https://secure.gooddata.com/dashboards/embedded/#/workspace/{workspace_id}/dashboard/{dashboard_identifier}/" frameborder="0" id="frame"></iframe>

If you use the scrolling=no parameter in the URL, verify that the iframe is resized according to its content so it is handled by JavaScript:

<script> 
window.addEventListener('message',function(event) {
        switch(event.data.gdc.event.name) {
            case 'resized':         
                var height = event.data.gdc.event.data.height;
            
                if (height) { 
                    document.getElementById('frame').style.height = height + 'px'; 
                }   
                break;
        }
    },false);
</script>

Embedding limitations

• If you use less than 1170 px of horizontal space for the embedded component, the Edit button and all controls for saving in edit mode are not displayed.
• When you add an alert to a KPI, the email notification that is generated when the KPI value meets the alert parameter, may or may not include a link to the dashboard. This depends on the user access to the GoodData Portal:
  • If the user does not have access to the GoodData Portal, the email does not contain a link to the dashboard.
  • If the user has access, the email contains the link. To hide this link for users with access to the GoodData Portal, contact https://support.gooddata.com/.
• If you use the scrolling=no parameter in the URL, table headers will not stick to the top of the visible area to ease reading the table.
• The layout of the KPIs and insights on an embedded dashboard (that is, how many KPIs and insights are placed in one row and spacing between them) depends on the size of horizontal space where the dashboard is embedded. Resizing the frame of the embedded dashboard changes the layout automatically in a predefined way, which cannot be adjusted manually.
• If the dashboard cannot be found within the workspace, GoodData displays the last opened dashboard from the same workspace. Any parameters specified in the URL are disregarded.
• If the workspace cannot be found, GoodData displays your last opened workspace. Any parameters specified in the URL are disregarded.

Example of HTML page with an embedded dashboard

You can copy the following code and use your own URL in the iframe section to try embedding.

<html>
<head>
    
</head>
<body>
    
    <button type="button" id="postMessageApiButton">Send message</button>
    <input type="text" id="input" value="" size="50"> 

    
    <iframe id="iframe0" src="{embed_dashboard_URL}?showNavigation=true&disabladEditMode=true" width="80%" height="80%" style="border:1px solid black;">
    </iframe>
    
    <div id="received">
    </div>
    
    <script>
        var targetFrame = document.getElementById("iframe0").contentWindow;
        var targetOrigin = '*';
        var received = document.getElementById("received");
        
        
        document.getElementById("postMessageApiButton").addEventListener('click', () => {
            var input = document.getElementById("input").value;
            var input = JSON.parse(input);
            console.log(input);
            targetFrame.postMessage(input, targetOrigin);
            
        });
        
        window.addEventListener('message', (event) => {
            console.log(event.data.gdc);
            received.innerHTML += "<p>"+JSON.stringify(event.data)+"</p>";
            
        });
        </script>
    
</body>
</html>

Communication with the embedded Dashboard

For detailed information, see Communication with Embedded Dashboards.