Sample HTML for Drill Eventing

Drill eventing in embedded mode enables you to drill from reports and insights directly to records outside of GoodData.

For general information, see Setting up Events for Drilling in Embedded Analytical Designer and KPI Dashboards.

This article provides an example HTML page that:

  • Embeds an insight from Analytical Designer.
  • Adds eventListener to capture postMessages from GoodData.
  • Sets drill eventing for one item (with ID 1251).
  • Listens for drill events when user clicks on the drillable item. For information about the data format, see the Capturing events sent from GoodData section in Setting up Events for Drilling in Embedded Analytical Designer and KPI Dashboards. 
  • Uses API to acquire details about the object that user clicked. You can get information whether it’s an attribute or fact, and then acquire, for example, their displayForms. For details, see the GoodData SDK website.

Additionally, the page contains console log which you can consult in case of any issues.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eventing Example</title>
    <script src="./gooddata.min.js"></script> <!-- to get the script visit https://www.npmjs.com/package/gooddata -->
</head>
<body>
    <!-- embed iframe with specific insight opened in AD in embedded mode (use `/embedded/` in URL) -->
    <!-- column chart with 'Activity Type' attribute in metric bucket (i.e. Count of Activity Type) -->
    <iframe id="gooddata" src="https://localhost:8443/analyze/embedded/#/qdscskolseuundoub5ltlcn68fcx01le/75868/edit" width="1300" height="800"></iframe>
 
    <script>
        window.addEventListener("message", function(e){
            // activate drilling of Activity Type attribute (uri: '/gdc/md/qdscskolseuundoub5ltlcn68fcx01le/obj/1251')
            if (e.data.gdc.event.name == 'listeningForDrillableItems') {
                var postMessageStructure = {
                    gdc: {
                        product: "analyticalDesigner",
                        event: {
                            name: "drillableItems",
                            data: {
                                identifiers: [],
                                uris: ['/gdc/md/qdscskolseuundoub5ltlcn68fcx01le/obj/1251'],
                                composedFrom: { 
                                    identifiers: [],
                                    uris: []
                                }
                            }
                        }
                    }
                };
                document.getElementById('gooddata').contentWindow.postMessage(postMessageStructure, '*');
                console.log('drilling activated, you can now click the column chart now');
            }
 
            // respond to fired drillEvent (i.e. click on column in chart)
            if (e.data.gdc.event.name == 'drill') {
                console.log('column chart clicked, retrieving data...');
                var drillEvent = e.data.gdc.event.data;
                var attributeUri = drillEvent.executionContext.measures[0].definition.measure.item.uri;
 
                gooddata.md.getObjectDetails(attributeUri).then(attribute => {
                    const attributeDisplayFormUri = attribute.attribute.content.displayForms[0].meta.uri;
                    const attributeDisplayFormId = attributeDisplayFormUri.split('/').slice(-1)[0]; // id: 1251
 
                    gooddata.md.getValidElements('qdscskolseuundoub5ltlcn68fcx01le', attributeDisplayFormId).then(validElements => {
                        const items = validElements.validElements.items.map(item => item.element);
                        console.log('data retrieved!', items);
                        // see the console in your browser dev tools
                    });
                });
            }
        }, false);
    </script>
</body>
</html>
Capture the Save an Insight Event from Embedded Analytical Designer