How to build a Responsive Navigation Menu in Power Apps

hello everyone Resa here in this video I will show you how to build a responsive navigation menu experience in canvas power apps the same navigation control will work as a topnav in a mobile device experience and will work as a left navigation in a tablet or a browser experience we will build this with very simple steps in a matter of few minutes let's check it out in [Music] action let's begin with creating a responsive power app on make. power apps.com on the home screen experience I will start with a page design and I will start with a page design called sidebar so I'll select this this creates an app with a screen that that uses the sidebar layout experience this screen comes with the screen container which includes a header and a bottom container that includes two containers a sidebar container and a main container now we are trying to build a responsive navigation menu experience that is something I would like to place in this sidebar container the screen that got created with these containers if you want to build it directly in your power app we go to new screen and pick the sidebar layout and it will create another screen that includes that same combination of containers now the first screen of mine I will rename it to my home screen if I preview this I'm currently viewing this on a desktop experience if I view this on a mobile experience held vertically you can see how both those containers are wrapping if I change the orientation of the mobile device to horizontal there is enough real estate to fit the two so they are being placed next to each other now this sidebar container has a flexible width property that is turned on the fill portion is set to three out of 10 meaning it will take 30% of the real estate available for the width of the bottom container now I would like to define a fixed width for my sidebar container so I can turn the flexible width off and for the width property of the sidebar container I'll give it a defined width of let's say 200 now if I preview you can see it's taking my defined width but if I view this on a mobile experience the sidebar container moves to the top and here there is a white space and this is something that I want to avoid to do that for the sidebar containers with property I will use the following formula if the name of my screen which is called home screen in my case Dot size the size property gives out a numerical value depending upon the type of the device for a mobile device held vertically the screen size property will result in a number one so I want to check to see if the screen size is equal to one if yes then you set the width of the sidebar container as parent. width else you set the width to the fixed width of 200 now if I preview if I go to a mobile device held vertically you can see how the sidebar container takes the full width the height here is a lot it's taking 50% of the real estate the sidebar container has a property called alignment in container by default it's set to align in container. stretch let's change this as well based on the size of the screen if home screen. size is equal to 1 then you use align in container do start else you use align in container do stretch and the sidebar container has a property called height it's set to 200 I will change this to let's say 75 now if I preview you can see how it's taking the height 75 and the alignment is at the start if I change the orientation there's enough real estate to fit the two takes the defined width back to mobile device held vertically notice there is a white space here for the main container there is a property called minimum height let's change this to parent. height let's preview there we go this is my sidebar container this is my main container let's change the orientation the sidebar sets on the left main container sets on the right next let's go ahead and build our navigation menu control and for that I will leverage a modern control to enable modern controls we'll go to the three ellipses settings under General we have modern controls and themes I'll go ahead and turn this on if I look at the insert tab now we have modern controls as well in the header container let's go ahead and insert the modern header control and in the sidebar container is where I will go and insert the tab list control which is generally available I will set alignment in container to stretch and flexible height to on minimum width the property is called layout Min width I will set this to parent dowi the tab list control has a property called alignment currently it's horizontal so the items are being stacked horizontally I can change this to Vertical so we can see how the items are being stacked vertically and Alignment is the property that I would like to change depending upon the size of my screen if my screen do size is equal to 1 then tabl list. alignment should be horizontal else vertical if I preview the app on a mobile device held vertically you can see how the tablet style is horizontal if I change the orientation that container sits on the left the navigation menu which is my TBL list control becomes vertical if you notice the TBL list control selected item sticking very close to the border of this container so what we can do for the sidebar container let give it some padding I'll give it a left padding of five I'll also give it a right padding of five and for the TBL list controls layout min withd property I will use parent. width minus 10 so now we can see that the selected item is highlighted very clearly and there is some padding from the left hand side now all we have to do is set the items for the tabl list control currently it's hardcoded to this array let's change this the value for the items property I would like to set it as a global variable on the app object we have a new feature which is generally available called formulas this is where we can create something known as named formulas so I'll go ahead and create my menu data right here I'll say menu data is equal to I'll create an array in this array I'll create objects first thing I want is the title of my menu so I'll call this menu title home comma I'll create another property in this object called go to screen meaning which screen should it navigate to if that menu item is selected I'll give the context of my home screen I'll put a semicolon at the end that completes my named formula called menu data I'll select my TBL list and set the items property to that named formula which is menu data for the TBL list we have the fields property I'll go to edit add field and choose the field that we would like to display here alpic menu title add so it shows the name of my menu title now the TBL list has a property called on select when an item in this is selected I would like to navigate the user to that specific screen self do selected dot the property go to screen and the tab list has a property called default selected items this I will use the function lookup in my menu data named formula where the goto screen is equal to app. active screen app. activ screen gives me the current screen that is active in the app that completes my setup now this home screen is currently like my template screen so if I need to create other screens in my app I can simply duplicate the screen and start building my other screens for example this is my task screen I'll duplicate the home screen again information screen now that I have my screens defined my responsive navbar in place I can start adding controls to my main container our Focus though is on the responsive Navar the data for that is coming from the named formula currently it has an entry for one item my home screen I'll put a comma and add a second item I'll call it task and the go to screen will be my task screen and then I'll create a third item called info and my go to screen will will be my information screen now if I preview I'm on the home screen I'm on the toss screen I'm on the information screen you can see how I'm navigating through my different screens let's change the orientation now it's a left navigation experience and the same experience will work on my desktop experience or on the tablet experience in different orientations and I've taken the same model and applied to one of my apps once again I have that same concept defined for my navigation the data is coming from my named formula to add some character to the Navar I've added emojis desktop experience on my home screen let's let's go to the my ticket screen let's go to the overdue ticket screen or take me to the information screen let's change this to a mobile form factor you can see how the navigation changed to a horizontal nav experience there's not enough real estate to fit all the items the TBL list control automatically provides three ellipses if you select that it will show me the other options that I can choose from

Channel: Reza Dorrani

Views: 27,085

Keywords: power apps responsive menu, responsive power apps, powerapps container responsive, responsive, navigation menu, power apps, powerapps, how to, build responsive power apps, power app responsive design, reza dorrani, powerapps left navigation, power apps navigation bar, powerapps top navigation menu, power apps responsive navigation, powerapps menu navigation, power apps navigation, powerapps left menu, microsoft powerapps, menu, navigate screens, navigation, powerapps tutorial

Id: TWcQwocLsE4

Length: 13min 59sec (839 seconds)

Published: Mon Jan 15 2024