PowerBI-Javascript 嵌入式仪表板不可“点击"(钻取到相关的报告等)

本文介绍了PowerBI-Javascript 嵌入式仪表板不可“点击"(钻取到相关的报告等)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

然而，问题是如果我尝试单击嵌入式仪表板上的任何固定项目，则没有任何反应.相比之下，当我在 powerbi.com 上执行相同操作时，底层报告会加载，并且我会出现钻取"行为.

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

解决方案

这里是为带有浏览器历史支持的嵌入式 PowerBI 仪表板实现点击功能的完整源代码.

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

<脚本>var models = window['powerbi-client'].models;window.onpopstate = 函数(popstate){console.log("popstate 被触发了！");控制台日志(弹出状态)；//检查 popstate 是否可用；这意味着用户正在点击返回按钮并且//我们需要为该导航历史加载相关的 powerbi 工件如果(popstate.state！= null){powerbi_embed(popstate.state.type，popstate.state.id，popstate.state.embedUrl，popstate.state.viewMode, popstate.state.pageName);}};//我从 MVC 传入一个模型；如果手动刷新页面，则始终从模型加载破折号$(document).ready(function () {powerbi_embed('@Model.Type', '@Model.Id', '@Model.EmbedUrl', '@Model.ViewMode', "");})//动态嵌入powerbi神器到页面的核心助手功能 powerbi_embed(类型，id，embedUrl，viewMode，pageName){var retObj = null;确保授权到PowerBI().done(功能(令牌){//创建嵌入配置var embedConfig = {类型:类型，身份证:身份证，embedUrl: embedUrl,视图模式:models.ViewMode.View，令牌类型:models.TokenType.Aad，访问令牌:令牌，pageView: 'fitToWidth',//仅适用于仪表板；报告，见下文页面名称:页面名称，//参见 https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isesettings.html设置:{filterPaneEnabled: 真,navContentPaneEnabled: 真,背景:models.BackgroundType.Transparent，//START 报告特定设置布局类型:models.LayoutType.Custom，自定义布局:{显示选项:models.DisplayOption.FitToWidth}//END 报告具体设置}}//创建新的嵌入元素(由于 powerbi wrt 将 pbi 嵌入到已经嵌入的元素中而导致错误的解决方法)$('#topLevelContainer').html("");var newEl = $("<div class='reportContainer'></div>");$('#topLevelContainer').append(newEl);//嵌入retObj = powerbi.embed(newEl.get(0), embedConfig);//将 CURRENT embedConfig 存储在页面的 popstate 中history.replaceState(embedConfig, 'title');/************ 处理点击场景 ****************///仅为仪表板注册 tileClicked 事件(报告不可点击，并且不会引发此事件)如果(类型 === '仪表板'){retObj.on('tileClicked', function (event) {控制台日志(事件)；//在某些情况下，powerbi 事件不包含有效的 reportEmbedUrlif (event.detail.reportEmbedUrl === "") {console.log("reportEmbedUrl 在 tileClicked 事件中为空，无操作.过滤链接会发生这种情况.")返回;}//保留历史以便返回导航工作console.log("tileClicked 被触发；在 popstate 中保存当前 powerbi 状态");history.pushState(embedConfig, 'title');powerbi_embed(报告"，"",//可以留空，因为 reportId 是 reportEmbedUrl 的一部分event.detail.reportEmbedUrl,模型.ViewMode.View,event.detail.pageName);});}});返回 retObj；}</script>

<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

PowerBI-Javascript 嵌入式仪表板不可“点击"(钻取到相关的报告等)

问题描述