因此,我试图通过使用报告阶段来更改报告的布局类型。
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile
呼叫updateSettings()
时,虽然遵循其他设置,例如LayoutType
,但我的新filterPaneEnabled
并没有得到遵守。
过滤器窗格确实消失了,但是报告的类型没有改变。
我想念什么吗?
预加载
function PreloadReport(accessToken, embedUrl, embedReportId, reportTitle) {
// Create embedding config
var config = {
type: 'report',
embedUrl: 'https://app.powerbi.com/reportEmbed'
};
var PreloadElement = powerbi.preload(config);
$(PreloadElement).on('preloaded', function () {
console.log("Report Preloaded.");
LoadMetadata(accessToken, embedUrl, embedReportId, reportTitle);
});
}
加载元数据,然后呈现
function LoadMetadata(accessToken, embedUrl, embedReportId, reportTitle) {
try {
// Get navigation container.
ReportPagesList = $('#reportpagesbuttons');
// Add on click event.
ReportPagesList.on('click', 'a', function (event) {
var button = event.target;
var report = $(button).data('report');
var page = $(button).data('page');
//console.log('Attempting to set page to: ', page.name);
Report.setPage(page.name)
.then(function (response) {
ReportPageName = page.displayName;
// For appsights custom event.
ReportFullName = ReportTitle + ": " + ReportPageName;
});
});
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: false,
background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.Master,
customLayout: {
displayOption: models.DisplayOption.FitToWidth
}
}
};
// Get a reference to the embedded report HTML element
var embedContainer = $('#reportContainer')[0];
// Embed the report and display it within the div container.
Report = powerbi.load(embedContainer, config);
Report.on("loaded",
function () {
console.log("Report loaded");
if (jQuery.browser.mobile) {
//Do we need to load a different report based on view screen size?
Report.getPages().then(function (pages) {
pages[0].hasLayout(models.LayoutType.MobilePortrait).then(function (hasLayout) {
console.log("Has mobile layout = " + hasLayout);
console.log("Is Mobile device = " + jQuery.browser.mobile);
if (hasLayout === true) {
const newSettings = {
filterPaneEnabled: false,
layoutType: models.LayoutType.MobilePortrait
};
console.log("Updating mobile layout");
Report.updateSettings(newSettings);
}
});
});
}
Timer = new Timer();
Timer.Start();
//Generate nav items.
generateReportNav(Report);
Report.render();
});
} catch (ex) {
//Send to app insights.
appInsights.trackException(ex);
}
答案 0 :(得分:0)
为解决此问题,您需要首先检查设备是否可移动,然后使用正确的layoutType加载报告(切换步骤3和4)。 如果这样做,加载后甚至不需要更改layoutType。