Create Responsive Power Apps from SharePoint list

hello everyone this is reza durrani in today's video we will build a responsive power app from existing data we will leverage sharepoint as a data source so when you build an app from existing data power apps creates a simple three screen mobile form factor app experience we will enhance that experience to add responsive design in which that app will work in a mobile device on the desktop browser or your tablet device we will also add that app as a web part on a sharepoint page so let's get started with the video but first my introduction so to get started with building a power app from a sharepoint list i have an asset tracking sharepoint list and i created this list using one of the sample microsoft list templates called asset manager and in this i have put some sample data and my use case here is i need a power app so that users can interact with this sharepoint list directly via a mobile app so in my modern sharepoint list if i head over to powerapps i have the option here to create an app directly from this sharepoint list when i select create an app the first thing is i need to name my app i am calling my app asset tracking and i will click on create and this now will open powerapps studio and generate a simple three screen app connected to the sharepoint list and here's the app that just got generated and in this app there are three screens a browse screen which allows me to search for the items in my sharepoint list a detailed screen where i can view the details of the item that i select in the browse screen and then an edit screen which allows me to add or update records depending upon the action i take so if i go and play this app i can search for items so let's say i want to search an item that has the text fd 100 here's my item i can select my item it will take me to the view screen i can edit the item make modifications right here i can delete the item or i can go and create a new item now this app that gets generated is not responsive by design it is built keeping the mobile experience in mind if i go to file settings and check the screen size and orientation observe it is designed with the mobile experience so that's the dimensions for which this app is designed but i would like to make this app responsive so if i use this app on my mobile device or my tablet device or from my browser or even a sharepoint web part this app needs to automatically be responsive in nature the first setting to make an app responsive is we need to turn off scale to fit so once i turn this off and apply this setting to my app if i head back to my app now and if i preview this on the browser you will observe that the app does not scale anymore but the app is not truly responsive in nature if i was to create a new item you will observe that the form itself is still sitting in a one card format or a one column format on the left hand side of the screen right here even the gallery is in a one column format whereas i have a lot of real estate here to fit more items so let's see a few quick changes that we can make to make this app fully responsive so first step is the gallery now the gallery has a property called wrap count and by default the wrap count is one now if i change the wrap count to four what's going to happen is it's going to place the data in four columns now if i play this app it's going to work well in a desktop experience but as the width of my app shrinks let's say a tablet experience or a mobile experience it does not work that well so how do i change the wrap count basically the number of columns that are showing up in my gallery depending upon the width of my screen now for that in power apps there is something known as screen dot size that gives you the actual size of the current screen and the size property returns four values one two three and four depending upon the size of your screen and these are the different widths based on which the size property is being calculated now in our case when we built the app from sharepoint directly the app was designed keeping the phone experience in mind so if i head back to the app and select the app node right here and go to the advanced property you will notice that the size breakpoints are 1200 1800 and 2400 and that's exactly what's being represented right here that's because it's the phone layout if i search for parent.size it's going to give me the actual size depending upon the width of my current screen now the size is going to return a number depending upon the width of the screen so what we can do here for the gallery control is this for the wrap count property currently the wrap count is hard coded to four let's change this to parent dot size now what is parent parent is the parent element in which this gallery is currently located so the parent of this gallery is the screen now if i was to go ahead and play this app you will note that because i'm viewing this in a desktop wide screen experience right now the parent dot size is returning the number four and that's why it's placing the elements in four columns and as i start reducing the width of my screen you will note that the columns in the gallery now has changed to three because right now the parent dot size is three it is in this width range which is 1800 to 2400 which is defined by the size three so if i head back to the app now and start reducing the width based upon the parent dot size i have my gallery accordingly resizing it's changing its behavior based on the real estate available next let's say if i select an item on the gallery this is going to take me to the view screen now once again when i'm viewing the date higher it's showing the data in a one column format and that is because if i look at the detail screen and go to the detail form and head over to the properties of the form form has a property called columns and the columns here defines how many columns you want to place in a single row so let's say i change this to four it's going to try and place four columns in a single row so now if i want to change the behavior of my form so that it places the columns depending upon the size of the screen again for that what i have to do is this in the form control there are these data cards that are getting generated so what i can do right here is hold the control key and select a couple of data cards and then do control a so it will select all my cards that ways i can change the properties of all these cards at once and i'm going to head over to the property called width now the width of these cards are currently hard coded as you can see the width is 160 but i would like to change the width to the following so the width i'm going to set it up as my screen dot width so the name of my screen which is detail screen 1 dot width so whatever is the width of my screen so right now the width of my screen is 640 that's why the width of all of these cards is 640 and it's automatically placing it in a one column format because there is not enough real estate available now if i divide this by the detail screen dot size that is the size of my screen now it will do the calculation based on the real estate available let's go ahead and preview the app the screen width divided by the screen size is getting calculated and it is placing it in a four column format because the size of my screen right now is four and as i start reducing this you will note that the behavior of this form keeps changing depending upon the real estate that is available now one thing i have observed in this is that when the width is three for some reason the data cards i believe this is a bug does not place the controls in a three column format right it placed three columns here and the next one it just placed one as you can see so to get around this the technique is once again go ahead and select all your data cards and in the width property let's try and plug in this formula so we will add an if condition right here and we will check to see what's the size of the screen so if the size of the screen is equal to screen size dot and we want screen size number three which is large in that case what we want to do is this we want to go ahead and divide the width of the screen by four so we are hard coding four in case of three and for all of the cases we would like to divide the width by the actual screen size now if i was to preview the app so screen size 4 is showing four columns and right now the screen size is three but it is still placing it in four columns that's because of the formula we plugged in and now the screen size is two and once we reduce it it goes down to one so that's how easily we can change the behavior of the form control to make this screen responsive now another change is the edit screen or the new screen so if i select edit the screen is also has the cards stacked in a one column format and now for the edit screen i will go ahead and take exactly the same steps as before first step change the snap to columns to four so it sits in a four column format and next step once again i'm going to hold the ctrl key select a couple of cards and then ctrl a so it selects all the cards go to the width property and i have gone ahead and plugged in the same formula as before wherein i'm checking to see if the size of the screen is large that is three in that case divide the width of the screen by four because i know that there is an issue with the three column format and if the screen size is anything other than three in that case just divide the width of the screen by the size of the screen now if i go ahead and play this app once again you will observe a very similar behavior to my viewform as the width of the screen decreases automatically the number of columns in which my data cards are getting stacked also changes so that's how i quickly transformed a very simple three screen app that was built directly from sharepoint as a data source into now a responsive app that changes its behavior based on the real estate available on the screen and also important to note that this is a fully functional power app with full crud operations which is create read update and delete against my sharepoint list i will also go ahead and change the theme of my app here and i will select one of the office themes so i'm going to select blue the theme of my app is going to change now once you have this app built i'm going to go ahead and save this and i will go ahead and publish this app and once i publish this app this app is now available for me to use on the web or on my mobile device now if i go to make.powerapps.com here is my asset tracking app that just got created and if i select this app now it's going to play the app directly in the browser experience and it is going to be fully responsive as you can see same thing goes for the form controls if i was to go ahead and create a record and now logging into my mobile app for powerapps i can even access the app of course from my mobile device so right there on the top is my asset tracking powered app if i select this app this will now launch that same asset tracking app on my mobile device and because i'm viewing this on my mobile device you will note that the app is responsive so everything is going to be stacked in a one column format also in sharepoint let's say if i create a new page i'm calling this my asset tracker page i'm going to change the header size to play and in this page let's say i change the section to a two column format and in this on the left hand side i will add a list which is my asset tracking list so i can see all my assets right here and on the right hand side i will go ahead and add powerapps webpart and this will now require the id of the app if i head back to the powerapps maker portal and for my app if i head over to details here is the id of the app so i can just copy this go back to my sharepoint page add the id of the app here is my app that is sitting in this section now if you notice the app is sticking to the base format this is one of the limitations right here if you add it in a web part it's going to stick to that base format to start with it's not going to be responsive but what you could potentially do is right at the bottom here if you notice there's this small little circle you can select this you can change the size of this app and because we've built the app in a responsive manner the app will automatically transform itself the size of this app right now is still being calculated as one that's because of the real estate available here so let's say if i publish this app right now you will note that the app is showing up in a one column format but if i edit this screen again and let's say i change the section sizes i select the one and one thirds on the right so i get a little bit more real estate to play with once again i have to click and increase the size and this time if you observe the app understood that the size of the screen is two so now if i publish this app it's going to place it in the two column format yes there's going to be a scroll bar because it is adjusting both the height and width together but as you can see even on my sharepoint site if i place the app because i have built it to be responsive it can transform its behavior if you create your app and start from data and that could be any data source it will create that three screen app experience for you but now with these simple tricks that i just showed as part of this video you can make those apps truly responsive if you like this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 23,437

Keywords: responsive power apps, Create Responsive Power Apps from SharePoint list, power apps responsive design, powerapps responsive layout, microsoft powerapps responsive design, power apps responsive canvas apps, power apps, powerapps responsive components, responsive canvas apps, power apps responsive form, powerapps responsive canvas apps, responsive app powerapps, powerapps responsive gallery, powerapps responsive screen, reza dorrani, powerapps sharepoint list

Id: uABDL7_EDCs

Length: 15min 18sec (918 seconds)

Published: Thu Feb 04 2021

Reddit Comments

[u/Lewsyfer]

Very clear and well put together video, thank you.