Power Apps Navigation Menu Component (2 level menu)
Вставка
- Опубліковано 8 лип 2024
- In this video on Power Apps 2 level Navigation Menu Component, we will go through a step-by-step walkthrough of building a responsive PowerApps Navigation Menu Component / Left Navigation component / Menu Bar Component.
PowerApps Menu navigation component can be reused across multiple screens or Apps.
Canvas components make it easier to build reusable controls, such as navigation menus and dialogs.
The ‘master’ / ‘instance’ behavior makes it easy to reuse them as building blocks inside the app or shared between apps.
By creating a component library, app makers easily share and update one or more components with other makers.
Download component: github.com/rdorrani/PowerApps...
Component Features:
✅ Dynamic 2 level navigation
✅ Change configuration using input properties
✅ Show hide Power Apps Hamburger Menu Component
Table of Contents:
00:00 - Intro
00:32 - Creating a Component Library
01:35 - Create a Navigation Menu Component
03:26 - Create input property for component for Menu Items
05:16 - Configure UI for the Menu component
09:18 - Show or hide Navigation menu on click of Hamburger Icon
10:51 - Create more input properties to configure the Menu colors
13:44 - Test Menu component within the Component Library
15:23 - Set Menu component width dynamically and show hide Menu from screen
23:08 - Add 2 level navigation (multi level) for Menu component
26:53 - Test multi-level navigation menu from Component Library
28:46 - Save and Publish Component Library
29:28 - Add and configure Left Navigation Menu to App with Tablet form factor
32:49 - Add and configure Left Navigation Menu to App with Phone form factor
34:00 - Subscribe to Reza Dorrani channel
#PowerApps #Components #PowerAppsMenu
I just want to thank you. I designed the menu and I think its impossible to have a better tutorial. Just Thanks
You are most welcome & thanks for the awesome feedback.
i guess Im randomly asking but does anyone know of a way to log back into an instagram account?
I was stupid lost my password. I love any help you can offer me!
@Zakai Kamdyn instablaster :)
@Maddox Caiden i really appreciate your reply. I got to the site thru google and I'm trying it out atm.
I see it takes a while so I will get back to you later when my account password hopefully is recovered.
@Maddox Caiden it did the trick and I actually got access to my account again. Im so happy:D
Thank you so much, you saved my account !
Reza - thank you so much for this tutorial. I love how you anticipate what users will be doing during each step of navigation, what they will expect, and how to solve for each scenario. This is outstanding!
You're very welcome!
This is a lot cleaner than the second level menu that I tried making myself--so glad to see a better way to implement them in my apps!
Glad I could help!
Excellent tutorial. You move very quickly which works perfectly in this format. Was able to stop the video and work along side your examples and your contect was spot on! Keep up the good work and thank you!!
Great to hear!
Amazing job, thanks for sharing your knowledge! I usually get frustrated an hour in but your so easy to follow and understand. Thanksaton!
You are most welcome
Such a great yet simpler way to understand, I am sure when I will try to create this in my apps environment it's going to be handy to follow step by step thereby creating another great user experience for our users. Thanks a TON!! You make learning an experience in itself.🙏🙏
You are most welcome and thanks for the amazing feedback.
Simply incredible work!!! Thank YOU!! so much detail and helpful real world examples!!!
Glad you enjoyed it!
Merci pour tout. Les explications sont claires et très utiles. Je customise mes applis grave à vos tutos.
Glad to hear that! Thank You so much for watching.
Thank you very much, Awesome job!
Glad you liked it!
Reza, first of all; Thank you so much for this video. It helped me make a great left nav menu. I just wanted to add that I revised your component to: be able to use menu to navigate to a URL if its a URL, to: collapse submenu until menu item (galitem) that has a submenu gets clicked and collapses submenus that may be open already, and to add a line below a menu item if there is a submenu. Thanks again.
Awesome!!!
Awesome job on this tutorial, very helpful and straight-forward build. Thank you.
Thank you Rick
Thank you so much for this video. The menu works perfectly! I am going to try and have the submenu's expandable / collapsable. THANK YOU!
Thanks for watching
Absolutely incredible. You talk fast, but I was able to follow along and got this to work on the first try. Thank you for sharing this great information!
Thank you for watching. I am working on my speed. I feel it has improved over the course of last year. Will continue to work on the speed of my speech. Appreciate the feedback.
Top Tutorial Reza, glad I found you man! Thnx a lot
Glad to hear it!
Hi Reza, thank you for this incredibly detailed tutorial, I learned so much just by following the step by step tutorial.
I modified the component by adding a MenuState output property that points to showMenu variable and in the component height property I'm using If(MenuLeftNav.MenuState,App.ActiveScreen.Height,50), that way when the menu is not pressed the Hamburger menu just minimizes to the icon size. I had to do this because even with the slim width when component is not active it was interfering with my app layout.
Again, thank you for the awesome videos, big fan of your projects and teaching skills! 👍🏼
Thank You for sharing the cool update you made to the component.
Thank you so much Angel. I was looking for this
As usual wonderfully explained and great work
Thank You
Very nice, the component feature is now truelly coming into its own.
+1
Thank you so much Reza for this detailed video. This is extremely helpful :)
My pleasure!
Thank you bro. Whatever I want to learn just found here. Thank you so much.All videoes making me expert gradually.
Glad to hear that
Thanks once again for such a detailed explanation. Helps out a lot!!
Glad to hear that!
Thank you! You are the best!
Thanks
Thanks Reza, really helpful video.
Glad it was helpful!
The menu width trick is very nice. Good Job !
Thank you very much
as I am waiting. Great job. Thanks,Reza
Hope you enjoyed the video
@@RezaDorrani I love all of your videos. Clearly, understandable, and always fully useful. I learn many things from you.Thanks, Reza
@@necdetsaritas8722 Thank you
Great tutorial! THANK YOU!
You're welcome!
so awesome, thanks Reza!
Your most welcome
Cheers....great tutorial.....the chapters are really helpful for navigating and re-watching certain bits
Glad you like them!
Thank you for this tutorial!
You're welcome!
Just found your channel and contents looks amazing. Very well explained. Thanks a lot posting such video and helping us to improve our skills.
Awesome, thank you!
Reza, thank you for sharing. I learned a lot with this video.
Glad it was helpful!
Thanks lot Reza Dorrani, as I am newbie to PowerApps.
But your explanation never give me feel of it.
Glad to hear that! Thanks so much for watching and liking the videos.
This is a great video and very informative!
Thank you Kevin
Just Excellent! Thanx Reza..
Thanks for listening
This is very creative and very helpful. As usual Reza amazing job on this tutorial. Please keep it coming.
Thank You
Now I am become a Fan of Mr.reza ...More over I remember Mr.Amir Parmar Who is very much Sucess tutor for MsAccess.. They way of Speech is very similar.. Awesome Dynamic Personality you are... God Bless You
Many many thanks 🙏
so much content! it is super helpful! thanks sir!!!
You are most welcome
Thank you!!! I'm binging all your video's. It's so helpfull
Thanks 😊
I think UA-cam should allow users to give likes more than once. Most kind thank you Reza, well done!
Thank you for your kind words
This has been really helpful.. thanks Reza always.
Glad to hear!
Amazing content… thank you for share!
Thanks for watching
Hello. Thank you for all your videos.
I'm a beginner at Power Apps and honestly by following your videos, I have already been able to set up two applications in two weeks that work perfectly. This is thanks to your explanations.
Thanks again, everything is great. 👍
Awesome! So happy to hear that. Thanks so much for watching and learning from the videos
Oh dear God, what an excellent video!!
Wow, thanks!
Thanks for this tutorial ,you good ! very clear and easy to understand (im french)
Glad to hear that!
Hi Reza, this is a very helpful way to improve my app more professional. Tankyou for your time and for sharing your amazing knowledge. tanks a lot !!
Happy to hear that!
best video.. thank you. we have used this in our project too. It is a very good solution for navigation menu component. keep posting such videos
Thank you Sonal. Will keep trying my best.
Good video, Probably worth mentioning that if you don't want the box taking up any of the screen on the left at all when its hidden, follow the same instructions but instead of width do it for height instead.
Good point
I wish we could do screen shots. I cannot get the menu to shrink in width or height. :(
No Words, I Just want to Thank You, Thanks..!!!!!!!
You’re most welcome
Thanks for sharing this tutorial, Reza. Very useful
Glad it was helpful!
Thanks!
Welcome
thank you!
You are most welcome!
👍I want to thank you for such nice tutorial video for two step component. I am now able to create the same for my apps.
Awesome! Thanks for watching the video.
Thanks for another knowledge shared
Thanks for watching.
brilliant, thanks
You're welcome!
Awesome Reza, you just improved your earlier nav component.
Thanks!
Awesome contents sir!
Thanks You
Thank You Very Much Dear,
I have used it
Great
Thank you i was able to build
Nice. Video description has link to download the component in case you want to check the code.
video is very helpful
Glad it was helpful!
Good vedio thanks.
Most welcome
Awesome video! Appreciate the detail. I am attempting to make a variation of this where a simple menu sits at the bottom of the app and a pop up menu would appear from the bottom when a button is clicked with more menu options . So pretty much a reverse "L" shaped menu. The problem is when I have the size of the component dynamically change based on clicking the button, it shrinks the component from the top portion and not the bottom, making my gallery menu appear off screen. There doesn't seem any way to adjust the position of the component. Is there a work around for this?
Hi Mike, it is surely possible. Something that I would have to try out and test. Not sure of a quick workaround though.
Thank you for this! I've been trying to build something similar in a few apps and now have a roadmap to follow. One question, though: to ensure the menu is collapsed after changing screens, do you really need to set the "ShowMenu" variable to true, then to false? I realize it should be so quick that nobody will notice, but some people might. Also, would it be possible to make that a context variable (rather than global) and pass it along in the navigate formula?
Yes you could make it a context variable. You can also set that variable on screen hidden which would then negate that flick effect.
Excellent video, it helped a lot. The only issue I encountered was that if there are more than one menu item with submenus, when you click on the menu item it expands all the submenus. I haven't been able to figure out how to just expand one submenu at the time, and then close all other when one submenu is expanded. Sorry, but I'm pretty new with PowerApps. Thanks.
That would require additional work in the component. Something that I would have to try out.
I will recommend you check on the forums at powerusers.microsoft.com/
It's Reza, Before watching the video first like and subscribe
Thank You 😊
Love this menu component, it's very useful and flexible. A very tiny issue I have is the sub menus always show whatever main menu is selected. It becomes a problem when there are lot of sub menus.
You could customize the menu further and add show/hide logic for submenus.
@@RezaDorrani Agree
Hi Reza, thank you for this tutorial, by following the step by step process, I have been able to develop several useful components for a variety of use cases. I do have some questions related to the use of gallery controls.
Specifically, at 10:20, the names of the custom table fields (MenuID, MenuIcon, etc.) appear with dropdowns on the right side of the screen when viewing the component properties in the Advanced tab. When I have been creating properties/components in the past, these column dropdowns do not show up even though I would like them to - why is that? what change(s) can I make to ensure that they appear?
Not sure about why they do not appear for you. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Very nice tutorial, thank you so much. I'm using this menu now in many screens. I also made a change that the canvas is the size of the hamburger icon so the space underneath is also usable. I also tried to change it so I can use the component also for menu's with action buttons instead of navigation buttons so I can run a piece of code instead of going to a certain screen. any idea if that is possible?
Not sure.
Thank you for a great tutorial. I only required 1 level of menu & was wondering how i can put that in the App onStart and any other changes I would have to make? Is it just a point of copying the code from the menu items variable in the component (i didnt use component library as there was no need)
Table(
{
MenuLabel: "Home",
MenuIcon: Icon.Home,
MenuScreenNavigate: 'Home Screen',
MenuID: 1
}
)
Single level nav - ua-cam.com/video/dP74npyyvGc/v-deo.html
Thanks Reza
Thanks Sundra
How do you respond to all these comments? Wow.
Anyways this is my third time watching this video in a space of 3months. A very good piece. Thank you.
Thanks for watching again
Excellent video, at the beginning I forgot to bring to front the component :-) not options showed even though I had my collection ready :-)
Glad I could help!
This was an amazing tutorial, is there anyway to hide the submenu until the specific menu button is pressed. For example, If you click on the Form Menu Item it then would display the submenu under it to allow for selected the sub items. and then it would hide if Form was clicked again or another selection was selected?
Possible. Would require additional logic in component to track if menu was clicked to open close respective submenu. It would be a lot more work though. The modern controls ua-cam.com/video/eNhCQ7Y2x7o/v-deo.html were recently released. I would wait to see if there is a nav control coming :)
Thanks for the video, super useful! I tried to build this in my app, however I would constantly get a loading spinner for the nested gallery - is there anyway to remove / prevent this?
I have not come across this issue and hence not sure how to prevent it. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Thank you for this! When I add the component to a screen however, the Doctor flags it as 'Inefficent delay loading' - MenuLeftNav_4.MenuWidth. I have about 26 screens and they were laggy but as soon as I removed all the menu components it became smooth. Any advice?
That is because the menu width is being calculated on the fly based on the screen width & if menu was open/close.
It has a dependency & has the inefficiency in delay loading.
If you make menu width fixed it will resolve the issue.
Overall, a great video Reza the menu worked very well. I did however have an issue where the submenu items were getting set to a height of 1 when I import the component into my main app, undoubtedly due to changes in PowerApps since this video was made. I fixed this by hard coding the TemplateSize of the galSubMenu to the size I wanted instead of using the code shown in the video. This makes it to where the submenu items do not get set to a height of 1 when importing. Just in case anyone else runs into this issue and needs a quick fix.
Thanks so much for sharing your findings. These are definitely due to updates in studio.
I have a video coming next week that shows a simple approach for building navigation and flyout menus.
@@RezaDorrani I look forward to seeing it!
Thank you for this very helpful tutorial. One question though, how do you highlight a menu if its screen selected/ active?
Its part of the component I believe. I showcased it here as well ua-cam.com/video/dP74npyyvGc/v-deo.html
Such an amazing job! thanks for sharing you knowledge
I just have a question, its possible to disable a button based on user?
Thanks in advance!
Thank You.
Disable a button for a user. Check my videos on role-based Apps ua-cam.com/video/J-hMMXrKMVE/v-deo.html & ua-cam.com/video/fbDQH0vIsN8/v-deo.html
Thank you so much! This is excellent. I'm having trouble with the MenuItems using the collection on App Start, if I change the MenuItems property to the table of items directly, it works fine, as soon as I put the collection variable there instead - it shows no menu items. Have I missed something?
Ensure you right click on App object on left nav and Run OnStart.
This will load your collection when editing the App.
When you run the App, OnStart runs immediately.
@@RezaDorrani fab that works! Quite new to PowerApps so wasn't aware of that, thank you very much for your help and so quickly too!
@@michellecurtis5711 Great! No worries. We are all new and learning together.
Working as advertised, but looking to make one small change, if possible (didn't see this listed in the comments). How would we go about making the hamburger menu essentially a toggle? As in, you click on it to open the menu. All the navigations on the other screens will stay open as well, until you click on the hamburger again to close it. This is how the Office 365 menus work now inside their system.
I would have to try it out to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
I built this and it works well with a mouse. Any suggestions on how to get the tab index set? I want to ensure that the Accessibility is correct for everyone.
I have not thought about the tab index part :)
Hi Reza, love your videos as they have helped me tremendously. I am having a slight issue that I do not understand where it is coming from. My issue is regarding setting the Visible variable for the rectangle, ThisItem.MenuScreenNavigate = App.ActiveScreen. I have ported over the component using this syntax but the rectangle is always showing for each menu item, no matter which screen I am on. Any suggestions on how to troubleshoot this? Thanks!
I figured it out. I was working on the component from the wrong library in the wrong environment. Whoops!
Thanks for watching and liking the videos.
Looks like you figured it out based on your response comment :)
Thanks for such a great video tutorial! Question. I implemented your menu into my app and around when you implement the "colMenu" at 20:57, is where I hit a snag. I built the function you put into your button in my App OnStart. When I run the Onstart it does build the collection, however when I go to the component and add the "colMenu" to the MenuItems parameter, ir shows me an error stating: "There is an error in the formula, try revising and running it again". I'm not sure why it is stuck on this. Any pointers?
Never mind. I figured out the issue.
Looks like you figured out the issue based on your second comment.
👍
Hi Reza, what would I be doing wrong where my menu doesn't collapse when going on to a new screen (specifically my Home Screen). Was working before but a copied a new version over from my component tab
No idea
Thnx for you example. I have a question: I have doing all the steps of you explanation and it will works in the online envoirment, but when I publice the app, I didn't see the information of the navigationscreen in the app. I will see the Hamburger Icon and when I click on it, there will come the navigation screen. How can I solve this problem?
Its probably because your items are not loading in the colNavItems collection. You need to add that on App OnStart and also ensure you have cleared your browser cache after publishing the App.
I would also recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
I added an Image control instead of an icon in order to use SVGs, but it won't show in my apps. I added the SVG encoding to the Icon property in my table and ThisItem.Icon to the Image control, but it still appears blank. It works in my component library but not in my app, not sure why. Any assistance is greatly appreciated.
Oh, I also tested the SVG encoding on a separate control to confirm it works and it does.
I have not tested with SVG. It should not cause any issues. I will have to look at your App in action to provide any guidance. I would recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
Thank you for this Reza. Appreciate it. Question, wha tif I have one screen with two tabs and I want to link Submenu to respective tabs of the screens. Can we pass variable of some sort in Table of Menu Object?
Components has output parameters. You would need to pass those on menu click and set them in variable. I do not have a specific video on this scenario though.
@@RezaDorrani Thank you. I had done that and somehow variable was not reflecting. But your word gave me confidence and turns out i had to hard refresh browser so Components changes reflect in my app. Thank you again.
Hi there; when I add MenuID to the MenuItems property table under the MenuLeftNav, it doesn't actually work like it did for you. Has something changed since this video? Please advise.
Nothing has changed since and should work.
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
Hey Reza,
My Menu hides well between the screens at preview but not on the published app. Why do you think so?
I have put Set(varShowMenu, true);Set(varShowMenu, false) at OnVisible property of all screens I have and Set ExpandMenu property to varShowMenu. Preview of the app dont have a problem. Only on published app is the issue. Any idea?
Must have to do with some setting that is not executing in published mode. I would have to recreate your scenario or look t your App in action to provide any guidance. I would recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
Hey Reza! I just wanted to thank you for putting out these videos. They've been such a big help at work.
I do have a question though. Is it possible to shrink that "Invisible wall" when the Hamburger menu is minimized? I have buttons that span along the left side of the screen in the app I'm making (like your Editable Grid Video) Whenever I minimized the hamburger menu, the buttons are getting blocked by that invisible wall. Is there a way to shrink that wall so that only the hamburger icon is there and not that long strip?
Please let me know if you need me to clarify anything!
You would need to make the height property of the component dynamic for that.
@@RezaDorrani Would I need to create a new Property like SetMenuHeight and a MenuHeight?
@@JC-tt5lj Probably
Hello, I'm looking to do the same thing as a filter with ComboBox, my problem is that I have to connect the ComboBox to my database and I don't know what command to put in the "Menultems" table.
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
This is great. I love your videos I'm learning a lot from them. I have a query, how would i add in visibility changes to each button based on a variable pulled from data in a sharepoint list? For example, only certain users can see specific buttons.
I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend posting your query on forums at powerusers.microsoft.com in case someone has done something similar
@@RezaDorrani is there any chance you are going to do a video on this? I am really struggling to get this to work.
@@alexebradley7610 I have no plans for a video on this. It would be best to leverage the forums.
Hello, thanks for this excellent video.
In the table menu I want one of the options to be a link to an internet site and not to another screen of the application, how can I do that?
You would need to update the component. There is a function called Launch which will allow you to open links.
You will also need to update the input property for component to distinguish between screen references and links.
Is it possible for the height to change as well once the hamburger menu is selected to be opened (e.g. HamburgerIcon.Height if not open to Parent.Height if opened)? I feel like otherwise it can get in the way of things on the rest of the screen.
Possible! You will need to update the logic in the component.
Hi Reza. Another great video which I’ve now implemented. How would I leverage the navigation menu to launch other apps or external websites? The MenuScreenNavigate isn’t allowing a Launch() definition.
Thanks.
You would have to add another input param of type text. You can pass url there and then within component use Launch function on that property value.
@@RezaDorrani can you share the syntax of doing this or how to do this ? I have been trying and not sure how to follow your instruction you have stated there
@@yutikapatel5995 I would have to try it out to provide the exact steps. I would suggest you post your query with screenshots on the forums at powerusers.microsoft.com
How would you set the menu height base on the available items ? It tried to customize the menu, but i'm running to a problem with inconsistent result.
You would need to set height of container dynamically based on number of menu items. Pass a param to component and check the gallery items count. I will recommend you give it a shot & in case of issues post screenshots on the forums at powerusers.microsoft.com/
Reza - thanks for so many useful easy to follow tutorials. I have used this for several apps, but now I like to expand and add my own icons, this gives me some trouble :-) I have them as images, I can easily add an image control instead of an icon control, but how to have different images that gives me more gray hairs 😀 Thanks so much in advance if you have time to answer!
I found out myself 😀
Looks like you found it on your own. Awesome!
Thanks for sharing this great component. It's really made my app so much more accessible! I'm having one slight issue however. Whenever the menu is opened on a new page, it opens in an expanded format, then shrinks to the correct size when you hover or press on it. This only happens the first time you navigate to each page. Once the page has been visited, the menu will display correctly. Any suggestions as to how i can fix this?
Never mind. I fixed my problem by setting (if using your naming convention) the TemplateSize property of galMenu
Looks like you got it to work based on your reply comment.
@@sjrobertson1984 could you please elongate this a bit. I’m having this issue and not finding any solution🤯
At 13:22 you mentioned that instead of icons you can pass images or SVGs. What would the call to those look like? The stock icon are very limited and I would like some alternatives. Is there another video that addresses this?
thank you again for what you offer
You would need to modify the component. Replace icon control with image control and pass images as part of the incoming collection data.
I do not have another video on it.
Hi Reza I modified thec omponent, as the gallery doesnt go invisible instead i shrink the size of the menuwidth { If(showMenu, Navigation.SetMenuWidth,icoMenu_1.Width+rectShape_1.Width)}.
and the visible property of the 2nd levle gallery as this {showMenu}. Everytime an user first go on the site, the width is correctly but the 2nd gallery is visible. He has to clik on the hamburger first to correct the design?
What do I do wrong?
I will have to look at your component & App in action to know the cause of your issue. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hi Reza, I hope you're well. Still loving this expanding menu! 🙂 There is one thing I'm not sure how to fix - when there is a control such as a dropdown below the menu, we are unable to click on the dropdown because the menu gallery (that is hidden at that point) is covering the dropdown. Is there a way to ensure it doesn't cover up controls when hidden? Many thanks again 🙂
When menu shrinks it should also update the width of the component. Video description has link to download sample component. Video shows how to set width dynamic (from what I remember).
I would also recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani thank you so much for your time! I had the component width set manually, I must've absent mindedly overridden the formula set to component.MenuWidth at some point! 🙂
Hi Reza Dorrani, to do all tasks in your all videos. Should we have a licensed one or can be done with the Trail version too. Please let me know.
A standard Office 365 license will suffice as long as the Apps/flows are not using premium connectors.
@@RezaDorrani Thank you for your response