Create Responsive Power Apps from SharePoint list

[@gonzo202]

Straight to my favorites list. Thanks for posting!

[@RezaDorrani]

You are most welcome

[@gonzo202]

@@RezaDorrani I already added this into my report since my post a couple hours ago and it worked perfectly on first attempt. Thank you. This video solves a major problem my team has been facing. As you know PowerApps provides few options work with the app orientation and dimensionality, and the app template is not always available. With this video, the entire problem is solved because we can simply resize our apps to optimize the display, regardless of browser type or dimensions. I already published a new app using this technique tonight, thanks again.

[@gonzo202]

This also means that converting the report dimensions to fit on tablet view -- which requires adjusting code in a JSON editor and a very manual step by step process -- has turned unnecessary for a lot of developers (including me).

[@RezaDorrani]

@@gonzo202 So happy to hear that. Well done!!!

[@RezaDorrani]

@@gonzo202 True

[@gtrj55tgjr]

I don't know how much knowledge you have in PowerApps, it's endless, literally Amazing sir

[@RezaDorrani]

I learn and I share. A lot more to learn.

[@kevinjoseph9023]

I watched this video over a year ago. I am watching it again today and getting value from doing so. I really enjoy learning from your work. Your kit is strong and your delivery is even stronger. Happy Holidays Reza!

[@RezaDorrani]

Thanks so much Kevin

[@marciokataoka]

Very good! Not spending time fooling around. Straight to the point!

[@RezaDorrani]

Thank You

[@akosboat2007]

New to PowerApps and this video has been amazingly useful. I will be watching all your videos! Love the way you explain everything. Thank you!

[@RezaDorrani]

So happy to hear that. Welcome to my channel and I hope you enjoy all the videos.

[@poonamw26]

Thanks for sharing.... Learning how to make apps in Power apps and found this video. Thanks a lot. Keep helping community.

[@RezaDorrani]

Thank you for watching

[@meskeremyigletu5190]

I Always love what you do Thank you!!

[@RezaDorrani]

Thank You 😊

[@christopherlawes9286]

Excellent tips 🙏

[@RezaDorrani]

Thanks for watching!

[@nirmalscorpio]

Great explanation and this is very useful one. Would like to mention that even for new people its so easy to understand the way you explain the content in clear and better way.

[@RezaDorrani]

Happy to hear such feedback. Thank You!

[@steffenkingsly6771]

It's Quick and easy to learn Sir. Thank you

[@RezaDorrani]

👍

[@goodguywins]

Wow! Quick and easy. Thanks for posting such a useful how-to, Reza.

[@RezaDorrani]

My pleasure!

[@wikiwiki8924]

Brilliant works.thanks

[@RezaDorrani]

Thanks

[@prabhakarpatakamuri1707]

Excellent video. The way of explanation is awesome 👏

[@RezaDorrani]

Glad you liked it!

[@causaposer]

Excellent... ;Thank you so much..

[@RezaDorrani]

You are most welcome

[@Slash1066]

Very cool idea to use the screen size in the wrap count!

[@RezaDorrani]

Thank You

[@YogendraSingh-eq6kt]

wonderful video Reza.

[@RezaDorrani]

Thank You

[@hendrixkalusokoma7105]

Brilliant yet again. Thank you, so much

[@danielrumbak2530]

Thank you for all your hard work Reza!

[@RezaDorrani]

Most welcome

[@TheOyinbooke]

Thank you Reza for this video. I'm definitely going to build an app interface for my SharePoint list

[@RezaDorrani]

Great!!!

[@Steph-jazz]

Excellent !

[@RezaDorrani]

Thank You

[@alzaimoor79]

very easy explanation straight forward, we would like to explain how to send notifications through mobile too. thanks for sharing👏🏻

[@RezaDorrani]

Thank You. Will add your request to my backlog of 50+ videos now :)

[@busyshah]

Superb

[@RezaDorrani]

Thank you! Cheers!

[@gristy58]

Wish i had seen this before i had built a massive app :) Will have to consider this on the next one i use.

[@RezaDorrani]

There is always a next time :)

[@sundrapillay6668]

Thanks for sharing Reza

[@RezaDorrani]

Most welcome

[@Filmy_recommends]

awesome

[@RezaDorrani]

Thanks

[@gauravgoyal5]

Thanks for sharing.

[@RezaDorrani]

Thanks for watching

[@ResponsibleXI]

What I expected seeing the video suggestion is containers and what i seen here is just mind blowing. Woww, I loved it. When do you think I got to go with containers and not this technique for responsive apps?

[@RezaDorrani]

In this case because I built App from a template, as you can see only a few changes and we can make the App responsive. If App is built from scratch , I would recommend using the responsive containers.

[@govardhanam1076]

Hello Reza, Thank you so much for sharing. Please make a video about Model-driven Apps

[@RezaDorrani]

It is in my backlog of videos

[@PraveenBharadwajKR19041989]

Hi Thanks for shary this, it's very useful. Also wanted to is there any possibility that in the view screen we add feature for GoTo Next Item in the filtered gallery

[@RezaDorrani]

Can be done but I would have to try it out to provide any guidance. I will recommend you check on the forums at powerusers.microsoft.com/

[@PraveenBharadwajKR19041989]

@@RezaDorrani thanks for the reply, will check on forums

[@rishirajchoudhary3239]

This is perfect, but can you suggest something to adjust the canvas height based on the screen size?? I am actually stuck at a point where my forms do not use all the space available vertically and gives me a scroll bar till the mid of the screen.

[@RezaDorrani]

For the form control - set the height to App.Height or Parent.Height This will ensure the form control takes the entire height of the Screen.

[@rishirajchoudhary3239]

@@RezaDorrani thanks for your response ,Reza. I am afraid that the issue is not with the form control height. The whole app itself is using half of the screen height and gives me a scroll bar. It would help if we can make app height dynamic with respect to the desktop screen size. PS: I am using it to customize forms from SharePoint list. But the forms created doesn't behave responsive with respect to the height.

[@RezaDorrani]

@@rishirajchoudhary3239 What is the height property set for the sceeen? It should be Max(App.Height,App.MinScreenHeight) What is the min height set for the App - check in App object properties. Are you viewing app in landscape mode? Lock orientation is turned off?

[@minocat23]

Very good video when using cards. However , could you make another video showing what to do when using controls that are not in cards, for example when using Patch command.

[@RezaDorrani]

For that you would have to use the responsive containers. Check my responsive playlist which has a video on containers - kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@Poryotis]

Great video for simple way of making a Power App responsive. Thank you so much. I noticed that at a certain point the fields do not stack up horizontally when you have columns set up on the form. The datacards remain horizontally. Seems like a bug. The work-around I found is to turn off 'Snap to columns'. Then I also have to rearrange the order of the datacards at least once and then they finally stack up correctly. Very frustrating. Wondering if you have come across this?

[@RezaDorrani]

Datacards inside a form control with snap to columns almost always cause trouble. I have done more videos on responsive design, in one of them I think I do cover the data cards width issue. Check kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@sahilthakur03]

Awesome Video again Reza. The only catch is if you create your App using blank tablet layout, we don't get wrap count property for gallery. This is weird. Do we have any other way to make galleries responsive instead of wrapcount?

[@RezaDorrani]

Flexible height galleries dont have wrap count. Just created vertical gallery and then change layout to empty.

[@AmitKumarPune]

I learned all new examples just by seeing your videos. I was thinking, PowerApps provides 2 layouts, hence if someone is looking for mobile experience, then we can create same powerapp in 2 ways. And both the mobile and tablet URL of PowerAppss will be shared with the user. And whichever he want to use, he can click on that. Like automating this through flow, and provide 2 links inside email: Click here for Mobile view 2. Click here for tablet/laptop view. But now by seeing your responsive view, my thinking is totally changed. My question is, Will this responsive approach applicable for all PowerApps application with all kinds of controls? Are there some limitations of responsiveness in PA? Thanks.

[@RezaDorrani]

This approach works for all screen types and sizes. Check my full responsive design playlist - kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@haiqiwu-ew1dx]

Hi Reza,if I directly customize a SharePoint form, can the form be made responsive?

[@RezaDorrani]

SharePoint list form customizations do not support responsive design

[@haiqiwu-ew1dx]

Thank you for your answer.@@RezaDorrani

[@kinglion5845]

Hi Reza, I have a requirement where i need to hide the following options from the sharepoint list ribbon (Power Apps and Automate) i don't want user to see these 2 options when he open the list how can i do that please help.

[@RezaDorrani]

I know its possible through PowerShell. Here you go - mbangert.de/hide-power-apps-and-power-automate-flow-in-sharepoint-online

[@jeremytang2192]

I've tried using the sharepoint list to integrated to power app. However, only part of the list items are showing up in the 'EditForm'. I have 9 questions/items/columns with an attachment column (to capture photos), but only the first 3 questions are showing up. Anyway around this? Thanks!

[@RezaDorrani]

I will have to look at your App in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@arunn87]

Thank you for the video, I have a doubt, I am trying to create a responsive form app File -> Settings -> Display But "Fit to scale" is not visible. do I have any alternative option do i need to add containers.

[@RezaDorrani]

If you are using a SharePoint customized power app then you wont see that option as those types of apps are not responsive by design

[@legendgod]

Do you think "layout" in Power App is useful in term of responsive design? I found it almost useless against orientation. It only add a layer of complexity.

[@RezaDorrani]

Layout? You mean Tablet or Mobile?

[@legendgod]

@@RezaDorrani Regarding Layout I mean the Insert panes in left sidebar, vertical container, horizontal container, container etc

[@RezaDorrani]

@@legendgod They are useful. I have done videos on those as well. Check Power Apps Responsive Design kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@nduagubadev]

What if I don't use gallery or forms, what if I just want to put a button or two buttons at some positions the screen? How does one make them stay responsive both on mobile and web

[@RezaDorrani]

I am working on a video on responsive design for Power App. I plan to include - Tabs, controls, forms, galleries and more.

[@janethgonzalezcastillo400]

Everything works as you said in "Edit Mode" but when you use "Play Mode", It is still in mobile size

[@janethgonzalezcastillo400]

Also the video es Excelent! Thanks

[@RezaDorrani]

I will have to look at your App in action to know the reason. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@raghuvenkat1141]

Hi How can add/get more then 10k items in powerapp?

[@RezaDorrani]

Question does not relate to the video :) Check delegation - kzbin.info/aero/PLTyFh-qDKAiE6ia-D94Qk5-AzpN4dqOmD

[@deep2480]

Very nice video!! What is your email id?

[@RezaDorrani]

[e-mail] If you have a specific query or issue it would be best to post it to the community forum at - powerusers.microsoft.com/