Hello everybody! I hope you are doing well!
We have created a new MVC app where we embed PowerBI Reports.
We have used the sample 'App Owns Data' project to utilize it and we managed to get the project working.
Now we are looking into further customising the app by getting the the view in desktop and mobile. So we have created a mobile portrait view of the report and we would like our app to check the device from which the report is being viewed and serve the correspending view. I have tried with multiple ways I found on the net, but with no success. I will just paste the 4 different samples i found and tried out but with no success.
Any insight on this will be greatly appriciated.
Thank you in advance
PS The code tag Javascript threw some errors while pasting the code in it and i could not post the code formated decently. Sorry about that
////////////////////////////////////// Method 1
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
let newSettings = {
layoutType: models.LayoutType.MobilePortrait
};
if (isMobile) { //this returns true or false
newSettings = {
layoutType: models.LayoutType.MobilePortrait
};
}
////////////////////////////////////// Method 2
var embedConfiguration = {
type: 'report',
id: reportId,
embedUrl: embedUrl,
tokenType: tokenType,
accessToken: accessToken,
settings: {
layoutType: models.LayoutType.MobilePortrait
}
};
/////////////////////////////////////////// Method 3
//Retrieve the page collection and check if the first page has a MobilePortrait layout.
try {
const pages = await report.getPages();
const hasLayout = await pages[0].hasLayout(models.LayoutType.MobilePortrait);
let hasLayoutText = hasLayout ? "has" : "doesn't have";
console.log("Page \"" + pages[0].name + "\" " + hasLayoutText + " mobile portrait layout.");
}
catch (errors) {
console.log(errors);
}
//////////////////////////// Method 4
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
}
});Any insight on this will be greatly appriciated
