Background
So I'm trying to change the layout type of a report by using report phasing.
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile
Problem
When calling updateSettings() my new LayoutType isn't adhered to, although other settings are, such are filterPaneEnabled.
The filter pane does disappear, however the type of report doesn't change.
Am I missing something?
My Logic
- Preload report
- Create config
- Load report using config
- Check device is mobile, and check report is mobile compatible
- Update config settings with new report type
- Render Report
My Code
Preload
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);
});
}
Load MetaData and then render
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);
}
