topic Re: Power BI MVC - Help with Mobile views in Developer

Power BI MVC - Help with Mobile views

s_papaioannou — Tue, 28 Dec 2021 10:27:29 GMT

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

Re: Power BI MVC - Help with Mobile views

Anonymous — Fri, 31 Dec 2021 01:21:20 GMT

HI @s_papaioannou,

How did you design the report phone view version? Did you mean to manually change the layout to vertical?
If that is the case, they may not work well as phone views. (it only mean the report with vertical layout instead of phone view)

For this scenario, I'd like to suggest you refer to the following documents to design the phone view version and enable the phone view on your report:

Optimize reports for the Power BI mobile apps - Power BI | Microsoft Docs

Embedding a Power BI report with mobile layout in Power BI embedded analytics | Microsoft Docs
Regards,

Xiaoxin Sheng

Re: Power BI MVC - Help with Mobile views

s_papaioannou — Mon, 03 Jan 2022 07:25:41 GMT

Hi v-shex-msft and a happy new year!

The uploaded report has a mobile view which was created in powerbi desktop.

Re: Power BI MVC - Help with Mobile views

Anonymous — Wed, 05 Jan 2022 06:46:55 GMT

HI @s_papaioannou,

Perhaps you can take a look at the following link about the online power bi embedded online sandbox testing environments. It should include a sample code of embedded usages which you required:

Power BI Embedded Playground
Regards,

Xiaoxin Sheng

Re: Power BI MVC - Help with Mobile views

s_papaioannou — Wed, 05 Jan 2022 07:49:43 GMT

Thank you for the information. I have already taken a look at the Developer Playground and I have pasted the sample code I used from the Playground in my initial post.

Re: Power BI MVC - Help with Mobile views

Anonymous — Fri, 14 Jan 2022 07:18:20 GMT

HI @s_papaioannou,

Perhaps you can take a look at the following link about mobile device detection with ASP.NET MVC applications if help: Mobile Device Detection and Redirection Using ASP.NET/MVC | CodeGuru

After you get the access device type, you can use it as if statement conditions to trigger the configuration to switch the report to 'phone view' mode.

Regards,

Xiaxoin Sheng