PowerBI-Javascript 嵌入式仪表板不是 "clickable"（用于钻取相关报表等）

Question

我有一个场景需要嵌入 PowerBI 仪表板，我通过执行以下操作来完成：

使用ADAL.JS使用AD验证浏览器用户；然后使用 AD 应用程序向 powerbi 应用程序请求访问令牌。
将此访问令牌传递给 PowerBI-Javascript (powerbi.embed) 并将给定的仪表板嵌入到我的页面中。
此时，仪表板及其所有固定内容显示在我的页面上。

但是，问题是如果我尝试单击嵌入式仪表板上的任何固定项目，则什么也没有发生。相比之下，当我在 powerbi.com 上执行相同操作时，基础报告加载并且我得到 "drill thru" 行为。

如何在嵌入式案例中实现相同类型的 "drill thru" 行为？

Answer 1

区别在于 PowerBI.com 中的行为是 'go to relevant report'.. 而在 Power BI Embedded 中，单击嵌入式磁贴会触发 tileClicked 事件，然后您可以使用该事件导航到另一个嵌入式报表（通过 Report Embed）。

这是一种选择点击行为的方式，因为一些开发人员可能不想授予从他们的应用程序免费访问其他报告的权限。

有关活动的更多详细信息： https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events#example

Answer 2

这是为嵌入式 PowerBI 仪表板实现点击功能的完整源代码，并支持浏览器历史记录。

    <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>

PowerBI-Javascript 嵌入式仪表板不是 "clickable"（用于钻取相关报表等）

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

javascript

powerbi

powerbi-embedded