Embedded PowerBi report using mobile layout - powerbi-embedded

Question

I'm trying to display an embedded PowerBi report from an external website (a html page served by nodejs). I can display the report with desktop layuot but not with mobile layout (the mobile layout is already created and published).
¿How can I embed a report using the mobile layout?
This is my report configuration:
let reportLoadConfig = {//type: report
type: "report",
tokenType: models.TokenType.Embed,
accessToken: embedData.accessToken,
// Use other embed report config based on the requirement. We have used the first one for demo purpose
//embedUrl: embedData.embedUrl[0].embedUrl,
embedUrl:embedData.embedUrl[0].embedUrl,
// Enable this setting to remove gray shoulders from embedded report
settings: {
//background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.MobilePortrait,
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
// Embed Power BI report when Access token and Embed URL are available
let report = powerbi.embed(reportContainer, reportLoadConfig);

Answer 1

If you are using the Embed Power BI GitHub Examples, please verify:
1- All report pages have to have a mobile layout created.
2- Set the property layoutType to MobilePortrait in report Config var (client side JavaScript code)
3- If your code uses powerbi.bootstrap, verify this part:
//powerbi.bootstrap(reportContainer, { type: "report" }); //This was the default code example
//I changed the code to:
powerbi.bootstrap(
reportContainer,
{
type: 'report',
hostname: "https://app.powerbi.com",
settings: {
layoutType: models.LayoutType.MobileLandscape
}
}
);
4- Inside index.js (client side JavaScript) Verify the code:
let reportLoadConfig = {//type: report
type: "report",
tokenType: models.TokenType.Embed,
accessToken: embedData.accessToken,
// Use other embed report config based on the requirement. We have used the first one for demo purpose
//embedUrl: embedData.embedUrl[0].embedUrl,
embedUrl:embedData.embedUrl[0].embedUrl,
// Enable this setting to remove gray shoulders from embedded report
settings: {
//background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.MobilePortrait,
filterPaneEnabled: false,
navContentPaneEnabled: false
},
};
5- Finally, you can write a custom javascript function (on client side) to verify the screen size and load landscape or portrait layout, something like this:
window.addEventListener('resize', async ()=>{
//write a function to detect the screen size
let isMobile=await isMobileScreen();
let newSettings = {
layoutType: models.LayoutType.MobileLandscape
};
if(isMobile){ //this returns true or false
newSettings = {
layoutType: models.LayoutType.MobilePortrait
};
report.updateSettings(newSettings);//update the report settings
}else{
report.updateSettings(newSettings); //update the report settings
}});

Answer 2

Here's our script. I'm just the middle man, so I don't fully undertand it. What I understood was that Luis' script needed to refresh the page before the new layout took effect. Our changes address that.
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
let newSettings = {
layoutType: models.LayoutType.MobileLandscape
};
if (isMobile) { //this returns true or false
newSettings = {
layoutType: models.LayoutType.MobilePortrait
};
}
// Initialize iframe for embedding report
//powerbi.bootstrap(reportContainer, { type: "report" });
powerbi.bootstrap(
reportContainer,
{
type: 'report',
hostname: "https://app.powerbi.com",
settings: newSettings
}
);
$.ajax({
type: "GET",
url: "/embedinfo/getebiriver",
success: function (data) {
embedData = $.parseJSON(data);
reportLoadConfig = {
type: "report",
tokenType: models.TokenType.Embed,
accessToken: embedData.EmbedToken.Token,
// You can embed different reports as per your need
embedUrl: embedData.EmbedReport[0].EmbedUrl,
// settings config
settings: newSettings
};
Feel free to copy/combine and roll the answer into your own, and then i'll delete this.