How to build Responsive Power Apps | Responsive Layouts, Tabs, Galleries & Forms

[Music] hello everyone reza here in today's video i will show you how to build fully responsive canvas powerapps leveraging the responsive container controls we will build responsive headers galleries forms tabs and much more here is the sample app on a tablet device here is that same app on the mobile experience even if i was to change the orientation the controls on the app would automatically reposition themselves so let's check it out in action i have a fully responsive canvas power app that is a service desk application that i designed and connected to sharepoint as a data source now on the home screen i have the header on the top i have dynamic contextual responsive tabs so when the user selects a specific tab the details associated with that tab are showcased to the user so for example on the all tickets tab i can see all the tickets in my service desk application if i click my tickets this will only showcase the tickets that were created by me assigned to me shows the tickets that are currently pending my action i can even refine and filter the data there is overdue tickets which shows all the tickets that are currently overdue basically they have passed the due date we have a slider filter here which the user can change and it will only show those tickets that are overdue by the number of days defined by the slider so if i move this up of 30 i will get the new user request ticket which has been overdue since 22 days if i keep increasing this here comes another one which is create a new user account that has been overview since 43 days and then i have an information tab that talks more about this application in this scenario it talks more about the responsive design containers if i start decreasing the width of my screen you will observe how live the app will be responsive in nature so as i shrink the width the gallery here moved from a three card format to a two card format if i shrink the width down further observe how in the header the user and the welcome image now are not showcased because there's not enough real estate so if i increase this you will notice that the welcome message and the user's image is here the moment the width goes below a certain point it goes ahead and hides it if we look at the tabs if i reduce the width completely which is more or less like a mobile experience here the tabs now only showcase the icons and when the user hovers on it the tooltip showcases the information around these tabs so if i select assign to me the filters here as well that i had defined have wrapped because there's not enough real estate if i increase the width the moment there is enough real estate available more or less looking like a tablet experience right now we can see that the filters have realigned themselves the same thing goes with the height as well so this screen is completely responsive and if i was to select a specific ticket this takes me now to the form screen where i can see the details of the ticket i can edit the details of the ticket save it or i can go back to the home screen form screen is responsive the moment i start reducing the width of this screen observe how the cards start realigning themselves and here in the mobile format it's going to sit in the one card format the tabs are loaded dynamically based on the logged in users role now in this case i have tasks or tickets that are assigned to me that's why i get the tab for assigned to me now logging into the same application using a different user sarah sarah has no tasks that are assigned to her there are only four tabs loaded for sarah the assigned to tab does not show up that is because there are currently no tasks assigned to sarah the moment the task is assigned to sara in this application that specific tab will showcase for sarah now let's try and build the key components of this solution from scratch so in make make.powerapps.com i will head over to create and create a canvas app from blank here i will recommend you to start with the tablet form factor because there are certain responsive layouts that are only available in the tablet form factor i will give my app a name and click create in canvas studio the first step to enable or begin with responsive design is to head over to settings go to display and ensure that scale to fit is turned off once you have the setting in place you can close this and now if i head over to insert on the left hand side and search for container i will get these responsive containers that i can leverage to design my screen not just that if i head over to new screen i will get these three responsive layouts that i can select and start from and these three responsive layouts come with those same responsive containers so for example if i select the header main section and footer responsive layout this will go ahead and create the screen which has those responsive containers baked in and you can add a container within another container and you can make this multi-level now once your screen is created based on a screen template that you select you are free to make modifications to it so for example here in my case i do not want the footer container so i can just select this and delete this so now i just have the header container and the main section container now let's start with the header container so i'll head over to insert and i will insert a label and this label will be the header text so i'm going to call this service desk in the header i want to also showcase the image of the logged in user so i'll go to media and add the image control for the image property i will use user dot image so this will get the profile image of the user if they have one in my container i will add another label i will put the text welcome and concatenate this with user dot full name so this now puts a welcome with the full name of the user here if i try and increase the height or the width of the controls in the container it's not going to allow me to do that and that's because all the properties of positioning height width are controlled by the container now this container which is my header container is a horizontal container that's why the controls that i'm adding within this are stacked horizontally i can even define the order of the control so if i select this specific label go to three ellipses go to reorder and move it left the welcome message comes on the left and then it's followed up with the image so you can move controls around just by reordering them right here for my header container if you look at the justification horizontal it's currently justified at the start so that's right at the left if i put this at the center all of those controls will head to the center center of the width of that container in position at the end or put some equal space between them now from a vertical alignment standpoint they're currently aligned at the top if i put this in the middle this will try and align those controls in the center or i can ask it to stretch and take the full height of this container i'm going to justify them from the start so let's first start with service desk now i want this to occupy the major portion of the width that's available in my header so for this label control if you look at flexible width it's turned off if i turn this on it's going to go ahead and take a portion of the width that's available in this container now the portion says one of one that means it's going to take the full flexible width that's available there are two other controls they are taking their minimum widths that are specified for this label control i will head over to the home tab center align it give it a background color and i've just gone ahead and added basic formatting now for my container if you look at the height property the height is set at 75 and if i look at the image control the minimum height set is 100. if i want this to fit in that space i just need to change this to 75 and now it sits right inside that space i'm going to change the position of the image to fill so it's going to fill that space that's available next for my label which is my welcome message label once again i can either make this flexible with so if i turn this on this is also going to take a portion of the width in that header container so it's one by two that means both of these now service desk label and the welcome label are taking 50 each if i want the service desk to take more flexible width i can increase this by one so this takes two thirds this takes one third of the space so i can define those fill portions or if i want to define a fixed width for this i will select this label again turn off flexible width so it's going to take that width that i have defined here once again i'll just add some formatting and this now completes my header section let's go ahead and preview the app and let's try and reduce the width so as i decrease the width observe how the entire header is responsive now in my scenario before i did not have any real estate to fit on a mobile device because i had additional controls here on the top in that case i wanted to get more real estate so i wanted to hide specific controls so let's say we would like to hide the welcome label control when the width of the screen is in a mobile form factor so for this specific label control if we head over to the visible property by default it's true and i will change this to the name of my screen which is home screen dot there is a property called size the size of the screen will return either one two three or four depending upon the width of my current screen and if you look at the blog post around the screen's size property it will return four values one two three four depending upon the width of your screen and it is based on the form factor of the app that you started with in my case i started with the tablet app so any width less than 600 it will return the value one that means the screen size is small which is perfect for mobile devices two is widths for tablet devices held vertically three is for tablet devices held horizontally and four is extra large more or less for your desktop experiences and these values can be customized in the power app so in the app if i head over to the app object and go to advanced we have something known as size breakpoints this is what defines those values if i would like to define my own screen size so let's say i want to add 1400 if i do this now it will also return 5 depending upon my screen size so back to my label controls visible property i will make this visible if my home screen dot size is not equal to 1. as i start reducing the width observe how the moment the screen size goes below 600 that is the size goes to one that specific welcome label now disappears automatically the container recalculates the width that's available and positions the elements next we will try and design responsive tabs now here i have my header container that is inside my main screen container i want to add another container now within this so i'll select my screen container head over to insert and add a horizontal container now the moment i added this first step is rename it so you know what's the use of that container i've called this my tabs container notice how it is sitting at the bottom that's because i need to reorder this so i will go to reorder and move this one step up i want this to sit above the main section container and this tabs container if i head over to its properties flexible height is turned on for this that is because the container in which this container is sitting in is a vertical container and here if i enable flexible height it's going to dynamically take the height that's available and it's going to share it with other controls that have flexible height turned on so in this case because i want to define the height of my tabs i'm going to turn this off so i will set the height of my tabs container to 100 now i highly recommend to create tabs by using galleries galleries are like repeating controls the tabs that we are going to create we will try and make it dynamic by loading the information of the tabs in a collection and providing that collection to the gallery so the gallery can render the tabs based on the number of items in that collection i will select the tabs container go to insert gallery and in my case i need a horizontal gallery so i will pick the blank horizontal gallery and for the items property of the gallery is where i would like to define my collection of data which are my tabs so i would like to load my tabs once when the user launches the app so for the app object if i head over to advanced we have the onstart function this is where i can start creating my tabs i will write the following formula clear collect which allows me to create a collection i'll give my collection a name so collection of tabs and in the items i would like to define the information of my tabs and here i will open the curly braces since i'm creating a record i will define different properties associated with my tabs the first is the id so i'll give the first tab the id1 i can give my tab a name so i'll create a property called name and i will give my first tab the name all tickets and i like to use icons for my tab in powerapps we have the icon library that we can leverage so here i will add something called as logo and if i search for icon dot this will list out all the icons that are available in the icon suite that we can select from so for my all tickets i'll pick the tag icon and i will close this record so this is my first tab so if i close this function and click format text if i want to create a second tab i'll put a comma and then add a record and in this i will create my second tab so i've just gone ahead and added additional items in this collection since i am in the edit experience of my app i will right click on the app object and click run start so that the onstart function runs and if i double click on the collection of tabs here just to confirm i have the information loaded right here for the items property of the gallery control i will set this to the collection of tabs and with the gallery control selected i will click on this pencil icon to edit the template of the gallery i will insert a label control to put the text i will add an icon control for now i'll just add the first one and to show the selected tab i want to show a bar so i will go to icons again and there are some shapes right here at the bottom i'll pick the rectangle shape now for the gallery control when i click on this pencil icon i get the template item of this gallery as my label control i'll change the text to this item dot and here all the properties of my collection will show up one of them was name so this will give me the name of my tab if i head over to the icon control and head over to the icon property it said to icon dot add we will change this to this item dot logo and for the rectangle shape just reduce the height place it right here for now back to my gallery control template item if i head over to the template size property there is a formula associated with this now i'm going to change this to parent dot height and when i do that it's actually setting it to 100 which is the height of my container that's because the parent of the gallery is the container and now i can see that the template item is sitting within that space if i had to go to properties for this gallery i also have something called as wrap count a wrap count defines how many items will be shown on one row my collection currently has four so let's say if i change this to four it will try and squeeze all those four items in the available width i want the wrap count to be dynamic it should be based on the number of items in this gallery which is in that collection of tabs count rows of collection of tabs that means how many rows are there on the tabs in my case four set the wrap count as four so it automatically has the template width defined based on the wrap count for me this icon control that i have i would like to place it right in the center of this gallery item now i can position it right here in the center but if i preview my app and if i start reducing the width you will observe that the position is going off balance and that is because i have hard coded its position so if you look at the x property it's hardcoded to 140. so the way we can make this dynamic is parent dot template with minus self dot with and now i'm gonna put this in brackets and divide this by two so just a little bit of maths and at exactly center aligns this control inside the gallery template now for my label control i want to do something similar first step is i want the width to be the entire width of the template and i can easily do that by setting the width as follows parent dot template width so it will span the entire width of the template and if i want to center this i'll go to the home tab place this right in the center maybe give this a color blue positioning it here remember my container has a fixed height so i can play with the height manually here but the width is something that definitely has to be dynamic and last i have my rectangle shape so i'll place it right here at the bottom left and now for the width property i will set this once again as parent dot template width so let's preview this and we can see now how the controls are aligned if i start reducing the width observe how all the controls are aligning themselves right in the center i need to change the visible property of this rectangle depending upon whether the tab is selected or not and for that whenever the user clicks on a tab we need to set a variable so when the user selects anything in this gallery i would like to set that variable the on select function of all of these controls it says select of parent it selects the parent what's the parent the parent is the gallery and the gallery has an on select function i will set a variable so i'll use the set function give my variable a name that's where tab selected and in there i will store the unique id of the tab so this item dot id so this variable will have a value now depending upon the tab that the user selects and the rectangle control should be visible when that variable is equal to this item dot id when it matches it should show up now if i preview the app observe that the rectangle is not showing up for any of the options that's because the variable is empty and when the user signs in i want to have a default value so once again on the app objects onstart function set that variable and i will set this to the first id which is one i am in edit mode of the app so i will right click and run this now if i preview my app the first tab is selected if i select this it will highlight the second tab and so and so forth i would also like to define a background color for the non-selected tabs for the template item of the gallery there is a property called template fill if this item dot is selected so there is an is selected property in the gallery which tells us which item is selected if it is selected then keep the color as is else put the color light gray let's close this observe how the tabs that are not selected are cray the moment i select it that tab becomes active if you want the cursor icon to change to hand so if you notice it changes when i'm hovering over this icon but not on any other part of the gallery in the template item once again just go ahead and insert button control set its x position to zero y to zero with will be parent dot template width height will be parent dot template height so basically i am taking the entire space that's available in that gallery item i will make the text of this control as empty set the fill color to transparent set the whole fill color to self dot fill set the pressed fill color to self dot fill now if i just preview the app the moment i hover over a gallery item which is my tab it will have the cursor symbol which showcases that i can select it so basically there's a button control that is sitting on top of all the other controls and we can see it's positioned right here it's on the top and that's why you get that cursor hand icon when you hover on it now for the first two tabs which is all tickets and my tickets i want to add a gallery that will change its behavior depending upon the tab that the user has selected now i need to connect to my data source so i'll go to data go to add data my case the data source is sharepoint so i'll select sharepoint select my sharepoint site select my sharepoint list and click connect so this will have my sharepoint list connected inside the app now to add my gallery i want to add it in my main section container so here i will go to gallery and in this case i will select a vertical gallery and here i will keep the styling simple so i will go ahead and pick this particular layout style now if you observe the gallery is not taking the full width that's available here for the main section container if you look at horizontal alignment i can click on stretch so it stretches all the controls within it so it's even stretched the gallery within it if i was to make a change here to the wrap count of this gallery which is a vertical gallery let's say i change this to three this will fit three records in a single row and if i preview my app observe if i start reducing the width how those label controls are automatically self aligning or positioning themselves and trying to fit in the real estate that's available so when you pick one of these layout options the controls that are added there have specific formulas let's check one of them let's take the title control here if you observe the width parent dot template width so it's already calculating and it's subtracting 104. so there is some maths already in there which is making it responsive if i was to just change the width manually here i have now broken that formula the formula that was placed in before if i preview this app now and if i start reducing the width observe how that center section is no longer responsive that's because the formula has been changed so if you're adding your own controls inside the gallery you have to write your own formulas i want to change the gallery wrap property based on the size of my screen and we've used that property before so for this gallery if i head over to wrap count i can simply change this to home screen dot size so now based on the size of my screen it will place those many items in a single row so here i have five items that's because in the app objects size breakpoints property i had defined an additional breakpoint if you go back to the original state of the app which was this if i preview this now it will only place four items and as the width reduces it will change to 3 2 and 1 depending upon the real estate that's available now the items that i'm showcasing in this gallery control needs to change depending upon the tab that's selected if it's all tickets then it should show me all the data from my sharepoint list if it's my tickets it should only show the tickets that i have created if where tab selected if this is equal to 1 then get me everything else filter my data source where the created by user's email property is equal to the current logged in users email property all tickets is showcasing all the tickets if i select my ticket the where tab id variable changed to 2 and now the formula changed now the gallery is not spanning the entire height we can see there's a little bit of space left well that's because i just have to go and turn on flexible height now let's say for assign to me i want to showcase another gallery and maybe it looks completely different so i'll go and insert another gallery and this gallery control as well has flexible height turned on i will just set the items property as filter my data source where the assign to property which is the person type column if the assigned to user's email is the current logged in user's email and for this gallery let's say for now i just showcase one property which is the title now if you notice that this gallery control kind of expanded that's because flexible height got turned off so i'll turn this on once again and for this to take the full width here the alignment i'm going to set it to stretch so it will stretch across the entire width and for this gallery just going to add a background color of light blue so we can distinguish between the two galleries now the first gallery should show up only when the tab selected is either all tickets or my ticket so for this gallery for the visible property i can set it to where tab selected equal to one or where tab selected equal to two in this case the third tab is selected so that gallery now is hidden and this gallery which is my new assigned to gallery takes the full width and this assigned to gallery should show up only when the where tab selected is equal to three so now check this out if i preview my app if i select this or this the first gallery shows up if i select this that gallery is hidden and the assigned to gallery shows up and if i click on the information tab here it doesn't show anything because both those galleries are hidden and let's say i would like to give some information about my app right here so i go to text and let's say i add the html text control observe the control that i added is spanning the entire width but not the height so i will set it to flexible height visible property for this control i will set it to where tab selected equal to four i just have some text pre-created so i'm just going to paste it in right here check this out how the behavior changes based on the tab selected and all of this is responsive now for my tickets i have a property called department so let's say i would like to provide a filter to the user to filter based on the department or search based on the title of the ticket now i need to define certain filters here and for that i need to add controls now if i start adding individual controls here like i did for the html text i would have to write show and hide for all of those controls so rather than doing that why not insert another container so i'll go to insert and i will pick the horizontal container so that container now gets added inside the main section container and i'm going to call this my filter container and i want the filter to be positioned above the gallery so i'm going to reorder this and move this to the top and for my filter container i want to define a height so i will turn off flexible height and set its height to let's say 100 this is a horizontal container so elements will get stacked horizontally within this container and in this is where i want to define my controls so just like my demo app earlier i would like to define these filter controls but observe here as the width shrinks these controls also wrap based upon the real estate that's available and the way i did that is by grouping these controls together so for that once again i want to add another container within this container as well and in there i will add those controls i will head over and add a horizontal container so here's my container this time i'll just copy this select my filter container paste it here so i have two containers within my filter container here i will add a label control and i will add a drop down control for this container i want these controls to be placed in this middle and i want them to be center aligned so it's right here the text of this label would be department and for this drop down the data will come from choices of my data source dot department department is a choice field so this should load up all my departments right here and when the user selects a department i would want to filter the data i've just added a label for title and added a text box now if you want these to be aligned close to each other so i'll select this container turn off flexible with and i'll select this container i will turn off flexible width they will sit right next to each other and for the filter container here i will go ahead and turn on this wrap property and if i start reducing the width observe that the title property is gone that's because there's not enough height available to fit that it's actually there but it's just hidden behind so i need enough height to fit both of these in here and this is where it kind of gets a little bit challenging when you're trying and playing with control so you'll have to do a little bit of trial and error here to figure out the sweet spot so for this container here i'm going to change the height here to 50 and for this container as well i'll change the height to let's say 50. these containers now have left a little bit of space here so if i just preview this and if i start reducing the width this time you observe how they wrapped the moment there was not enough real estate to fit both of them and the reason why this worked right now is because my filter container has a height of 100 and these have heights of 50. so when there's not enough space it wraps so 50 50 they kind of fit perfectly now the filter container has a height of 100 when the screen is wide there's some spacing here so what we can do is we can even make that dynamic so the height property of the filter container i will change it as follows if my screen which is the home screen dot size property if this is equal to one or this is equal to 2 i will set this to 100 else i will set it to 50. as i start reducing the width observe how it wrapped and observe how the height also got recalculated so there is a little bit of maths involved here to get independent controls working but if you get it right it works pretty neat now these filters that i added if i want to apply it to my gallery i'll simply go to the items property of my gallery and write the filter function right here so filter my service desk where the department the choice column dot value is equal to my drop down control dot selected dot value and i want to check to see if the title of my ticket in my data source starts with the text that the user enters in that text box so i'll close my formula and i'll close the filter function and i can add the same condition here for tab 2 as well but let's say i don't do that if i preview my app right now observe all tickets it's showcasing the data based on the selection so this is it this is marketing this is security and so and so forth and i can even check to see if the title starts with the text that i enter so let's say the text is create now if i head over to my tickets i still see these filters but they are not being applied because i didn't add the formula and let's say my use case is such that i do not want to provide any filters here for this scenario and all i literally have to do is go to the main filter container go to visible property and set this as follows where tab selected is equal to one because i want to only show it for the first tab let's preview this these are my tickets these are all tickets with filters and heading back to my demo app for my tickets and all tickets tabs i did exactly the same thing with the gallery the gallery is just nicely formatted in the form of cards the filters though i made it different i added the filters as well in the form of a gallery and i've adjusted the width here see the width is dynamic i've set the width depending upon the screen size you can type in one or type in the enum which is small the moment the screen size becomes small observe the width of these buttons here you see how it reduces that's because there's not enough real estate and as there is more real estate it will set the width accordingly and this container is visible when the tab selected is one or two if we look at the assign to me tab here i have a data table and i have my container which is that filter container with those controls there with that same wrap logic if i go to overdue tickets i have a completely different gallery i have another container that's showcasing that filter option on the top and the main container here is visible when the tab selected is four now here i see five tabs when sarah logged in she saw four tabs and the way i did that is simply on load of my app when i'm creating the collection i have added my tabs here but i have not added tab number three that tab i am adding based on a condition i'm checking to see if the logged in user has any task assigned if yes only then i am loading that item into that collection of tabs otherwise it won't add this tab and that's why sarah does not even see tab number three and you can make this based on security i have done videos on how to check to see if the user is in a security group or in a sharepoint group i'll place all those links in the description of this video so you can add that logic and load your tabs dynamically and now to build that responsive form all i did was i went to screen template once again i just picked this one and in the main section here i need to add the form control so i'm going to go to form click edit it's added the form control i will connect it to my data source i will select all the data cards that i need and how do i make this form control responsive first step for the number of columns set this to the maximum size of your screen so i'll pick four so it places it in four cards and now for the form control if i open this i have my data cards once you have all your data cards added select a data card hold the control key select another data card then select another one and then do control a this will select all the cards at once and the data cards on the form control have a property called with fit just turn this on it will automatically fit the cards based on the width or the real estate that's available once i have this defined i'm just going to connect my form control to the gallery i will set this to gallery three dot selected item and on the home screen if i go to that specific gallery the first one when the user clicks on this icon let's say i just navigate the user to that form screen so let's preview the app let's check this out i'll select this serve how it loaded that item right here and if i start reducing the width observe how the form also is responsive and in the mobile form factor it automatically positions itself in a one column layout you can change every aspect of your app based on the dimensions of the screen and i feel the screen size property is something that is extremely powerful here as you can see i'm using it to even change the text if my screen size is extra large then show the full text you can even use it to change the size of the text observe how the text size here changes based upon the screen size so for a mobile form factor the text size becomes smaller if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 22,978

Rating: 4.9725556 out of 5

Keywords: power apps responsive design, power apps, powerapps, responsive power apps, power apps responsive, power apps responsive canvas apps, power apps responsive containers, powerapps container control, responsive form, power apps responsive form, powerapps responsive ui, power apps responsive layout, responsive, responsive powerapps, microsoft powerapps, responsive design, power apps tutorial for beginners, powerapps responsive gallery, reza dorrani, powerapps responsive design

Id: 1o2L0DADzKQ

Length: 40min 48sec (2448 seconds)

Published: Tue Jul 27 2021

Reddit Comments

[u/DaLurker87]

I love your videos!