Power Apps Navigation Menu Component (2 level menu)
HTML-код
- Опубликовано: 2 авг 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!
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.
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
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!!!
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.
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.
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
Simply incredible work!!! Thank YOU!! so much detail and helpful real world examples!!!
Glad you enjoyed it!
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
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 🙏
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!
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
Awesome job on this tutorial, very helpful and straight-forward build. Thank you.
Thank you Rick
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.
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!
This is very creative and very helpful. As usual Reza amazing job on this tutorial. Please keep it coming.
Thank You
I think RUclips should allow users to give likes more than once. Most kind thank you Reza, well done!
Thank you for your kind words
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!
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. :(
Cheers....great tutorial.....the chapters are really helpful for navigating and re-watching certain bits
Glad you like them!
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.
Top Tutorial Reza, glad I found you man! Thnx a lot
Glad to hear it!
The menu width trick is very nice. Good Job !
Thank you very much
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!
As usual wonderfully explained and great work
Thank You
Thank you!!! I'm binging all your video's. It's so helpfull
Thanks 😊
👍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.
Thank you very much, Awesome job!
Glad you liked it!
Awesome Reza, you just improved your earlier nav component.
Thanks!
Reza, thank you for sharing. I learned a lot with this video.
Glad it was helpful!
Thank you for this tutorial!
You're welcome!
Thanks Reza, really helpful video.
Glad it was helpful!
Thanks for this tutorial ,you good ! very clear and easy to understand (im french)
Glad to hear that!
This has been really helpful.. thanks Reza always.
Glad to hear!
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/
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
Thanks for sharing this tutorial, Reza. Very useful
Glad it was helpful!
Great tutorial! THANK YOU!
You're welcome!
This is a great video and very informative!
Thank you Kevin
No Words, I Just want to Thank You, Thanks..!!!!!!!
You’re most welcome
so much content! it is super helpful! thanks sir!!!
You are most welcome
Thank you! You are the best!
Thanks
Amazing content… thank you for share!
Thanks for watching
Just Excellent! Thanx Reza..
Thanks for listening
Thank You Very Much Dear,
I have used it
Great
Oh dear God, what an excellent video!!
Wow, thanks!
This is very very very usefull video, thanks a lot!
You are most welcome!
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
so awesome, thanks Reza!
Your most welcome
Good vedio thanks.
Most welcome
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
brilliant, thanks
You're welcome!
Awesome contents sir!
Thanks You
thank you!
You are most welcome!
Thanks for another knowledge shared
Thanks for watching.
It's Reza, Before watching the video first like and subscribe
Thank You 😊
video is very helpful
Glad it was helpful!
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.
Thanks!
Welcome
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!
Thank you i was able to build
Nice. Video description has link to download the component in case you want to check the code.
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!
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.
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 ruclips.net/video/J-hMMXrKMVE/видео.html & ruclips.net/video/fbDQH0vIsN8/видео.html
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
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 ruclips.net/video/dP74npyyvGc/видео.html
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.
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!
Really useful video, how would you put an action on one of the icons, so an icon to exit the application?
OnSelect function of the icon call the Exit function docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-exit
Since you cannot call function from the screen via component, you would have to insert that logic in the component.
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 - ruclips.net/video/dP74npyyvGc/видео.html
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 :)
Thank you for the video. that what I need.
How about making the menu to expand dynamically ?
Possible.
You can set heights and widths based on menu item count.
Hello Reza. The first i would like to say thank you for your job. I started learn this program 5 months ago. And most of i know about this program, it's thanks to you. Now about this video, i have the app were is i need to start work with that navigation menu not from first screen, but from second. Can you answer me, how can I do this? Thank you
Thanks for watching and liking my videos.
Best of luck with your learning on this platform.
Start navigation from screen2? You can set the order of menu items to begin from screen2.
It seems you want app landing screen to be screen2. In that case, the App object has a property called start screen, simply define the screen there.
Thanks Reza
Thanks Sundra
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
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.
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
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 ruclips.net/video/eNhCQ7Y2x7o/видео.html were recently released. I would wait to see if there is a nav control coming :)
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.
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.
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🤯
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.
Thank you for this informative video. can you tell me how could i add more than one nav menu in a single app?
By using the same component across multiple screens of the App.
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 :)
Hi! Great tutorial, can I add a LaunchLink something in the menu?
Possible. You will need to update component logic for that.
Hi Raza, I am fan of you, u r doing fabulous job, here is one question in component galary on select u put navigation function so along with how I can put resetform as when I again switch to form it can't reset
Within component you will not get the form context.
Better option would be when user leaves the form screen (OnHidden) you can reset the form.
Very nice Reza, excellent job with this menu. Can we connect privately? I am in need of expert on a project.
My email is reza.dorrani@outlook.com. It is also highlighted on the About page on my RUclips channel.
@Reza, great video. I would like to make a 3 level navigation menu. What further formula is needed to make this happen? Thanks in advance
More advanced. Another gallery within gallery which I dont think is an option.
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
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.
Thank you so much Reza, is there any way to add Tooltip to the icons as well?
You would need to pass tooltip values in the Items input property for the component.
Then use its value to set the tool tip for the icons inside the component.
@@RezaDorrani Thanks a lot!!
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
hey, thank you for this i love it,
i have an issue with 1 thing, "app.activescreen" does not work at all in 2022, is there a workaround ?
App.ActiveScreen is a property that has not been deprecated. If there is an issue with it, then it may be a bug that would need to be reported to MSFT.
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, 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! 🙂