PowerBI-Javascript embedded dashboard is not "clickable" (to drill to associated Reports, etc)

Question

I have a scenario where I need to embed PowerBI dashboards that I am accomplishing by doing the following:

1. Use ADAL.JS to authenticate the browser user with AD; then use an AD app to request an access token to powerbi App.
2. Pass this access token to PowerBI-Javascript (powerbi.embed) and embed a given dashboard into my page.
3. At this point, the dashboard shows up embedded on my page, along with all its pinned contents.

HOWEVER, the problem is that IF I try to click on any of those pinned items on the embedded dashboard, nothing happens. In contrast, when I do the same on powerbi.com, the underlying report loads and I get a "drill thru" behavior.

How can I implement the same type of "drill thru" behavior in the embedded case as well?

Answer 1

Here is the full source for implementing click through functionality for embedded PowerBI dashboards complete with browser history support.

    <div id="pbiIframe" class="desktop-view" style="display: block;">
    <div class="reportContainer" id="topLevelContainer"></div>
</div>

    <script>
        var models = window['powerbi-client'].models;
        window.onpopstate = function (popstate) {
            console.log("popstate fired!");
            console.log(popstate);
            // check if popstate is available; this means user is hitting back button and 
            // we need to load the associated powerbi artifact for that nav history
            if (popstate.state != null) {
                powerbi_embed(popstate.state.type, popstate.state.id, popstate.state.embedUrl,
                    popstate.state.viewMode, popstate.state.pageName);
            }
        };
        // I pass in a Model from MVC; if page is manually refreshed, load dash from Model always
        $(document).ready(function () {
            powerbi_embed('@Model.Type', '@Model.Id', '@Model.EmbedUrl', '@Model.ViewMode', "");
        })

        // Core helper to embed a powerbi artifact into the page dynamically
        function powerbi_embed(type, id, embedUrl, viewMode, pageName) {
            var retObj = null;

            ensureAuthorizationToPowerBI()
                .done(function (token) {
                    // create embed config
                    var embedConfig = {
                        type: type,
                        id: id,
                        embedUrl: embedUrl,
                        viewMode: models.ViewMode.View,
                        tokenType: models.TokenType.Aad,
                        accessToken: token,
                        pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                        pageName: pageName,

                        // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                        settings: {
                            filterPaneEnabled: true,
                            navContentPaneEnabled: true,
                            background: models.BackgroundType.Transparent,
                            // START Report specific settings
                            layoutType: models.LayoutType.Custom,
                            customLayout: {
                                displayOption: models.DisplayOption.FitToWidth
                            }
                            // END Report specific settings
                        }
                    }

                    // create new embed element (workaround due to errors from powerbi wrt embedding pbi into an already embedded element)
                    $('#topLevelContainer').html("");
                    var newEl = $("<div class='reportContainer'></div>");
                    $('#topLevelContainer').append(newEl);

                    // embed
                    retObj = powerbi.embed(newEl.get(0), embedConfig);

                    // store the CURRENT embedConfig in the page's popstate
                    history.replaceState(embedConfig, 'title');

                    /************ HANDLE CLICKTHRU SCENARIOS ****************/
                    // register for tileClicked event only for dashboards (reports are not clickable, and do not raise this event)
                    if (type === 'dashboard') {
                        retObj.on('tileClicked', function (event) {
                            console.log(event);
                            // in some cases, powerbi event does not contain a valid reportEmbedUrl
                            if (event.detail.reportEmbedUrl === "") {
                                console.log("reportEmbedUrl is empty in tileClicked event, no-oping. This happens for filtered links.")
                                return;
                            }

                            // preserve history so back nav works
                            console.log("tileClicked fired; save CURRENT powerbi state in popstate");
                            history.pushState(embedConfig, 'title');

                            powerbi_embed(
                                "report",
                                "", // can be left empty as reportId comes as part of reportEmbedUrl
                                event.detail.reportEmbedUrl,
                                models.ViewMode.View,
                                event.detail.pageName);
                        });
                    }
                });

            return retObj;
        }
    </script>