PowerBI-Javascript 嵌入式仪表板不可“点击”（钻取到关联的报告等）

Question

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

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

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

如何在嵌入式案例中也实现相同类型的“钻取”行为？

Answer 1

这里是为嵌入式 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>

Answer 2

不同之处在于 PowerBI.com 中的行为是“转到相关报告”。 而在 Power BI Embedded 中，单击嵌入式磁贴会触发 tileClicked 事件，然后您可以使用该事件导航到另一个嵌入式报表（通过 Report Embed）。

这是一种选择点击行为的方式，因为一些开发者可能不希望从他们的应用中授予对其他报告的免费访问权限。

更多活动详情： https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events#example