This was an extraordinarily awesome tutorial. You explained it very clearly and I was able to learn a lot from doing exactly what you said to do. It worked the first time, which rarely happens! Thank you so much, Reza, for sharing your knowledge.
On the one hand, we have the super shane with exciting technical videos. On the other hand, we have the incredible reza that has the advantage of being comfortable in design and technique. It's just amazing and it's so beautiful. And in addition it's super clear. I am not English and yet I understand almost everything. Thank you a thousand times reza
I don't think you know how important you are to us, new developers. You are Amazing Sir!!!!!!!!!!!!!! It was extremely helpful. Thank you so much!!!! I've subscribed, and I am ecstatic about watching other videos.
I have watch other UA-cam video about left menu, but no one give me such details guide like yours, really really appreciated. Keep moving on with your amazing tutorial! Subscribed to your UA-cam channel!!!
Mr. Reza you are Amazing, you are definitely the best, your presentations are direct to the point, we seek your presentation to learn one thing and we come out with 100 things.
Thanks a lot for this tutorial, very helpful. You forgot to make the rectangle show only on selected screen. It's quite easy but I'll paste it here for other watchers. On the rectangle element, set this code in the Visible controlfield: If(App.ActiveScreen = ThisItem.Screen;true;false)
Just discovered your channel an hour ago and I already anticipate I'm going to be binge-watching it. This video in particular is incredibly relevant to me and very well explained. Thanks!
You are entitle for a medal I already watched twice and took down notes, I am going to start duplicating what shown . need to go through again because I am old and green I take my hat for this- thanks
Hello Resa, thank you so much for this tutorial, like the others already said, you save us so much time, your explanations are crystal clear, and progressive.
Your work is truly commendable. So neat and accurate. I knew you're the guy when I saw your tutorial on uploading files to SharePoint document library through add an attachment control and gallery control. Keep up the good work 👍
Hi Reza, amazing video demo on building components. This will help us a lot in the upcoming projects. Thanks for sharing the component itself as well. Waiting for more vidoes.
Great Video! Thanks for making it! I was hoping you were going to include how to show which navigation item is active based on what screen you are on, but i believe it is as simple as this: Set the visable property of the Rectangle to If(App.ActiveScreen = ThisItem.Screen, true, false)
Exactly what i was after! Thank you Reza for making it easy to follow and understand! However following these tutorials from another language settings makes for some pitfalls. Of course the ; instead of , as mentioned in a comment to Asbjörns contribution. The first i stumbled upon was that when i do ClearCollect i have to surround my collection name with single quotes to make it work. Second is that i have to separate the two commands (set var to false and then navigate) with double semicolons. Sometimes it is ;; and sometimes & is sufficient.
@@RezaDorrani The rectangle(Blue Bar) which we added near to the icons should only be visible when that Home, Task or Detail Screen is selected. I tried to achieve it by setting up visible property but could not. :-(
@@fakharahmedkhan5157 I will have to see your code and app in action to know why. I always recommend posting issues/queries with screenshots to forums at powerusers.microsoft.com/
Hi Reza, Excellent Video on Left Navigation, I did it with you while watching this video and it worked. :) Thanks.... Can you please show more on sub-Menu or Parent - Child Menu options as well ....
You would need to change logic in the component. Its not something I can type out here on chat. There would be updates and I would have to try it out to know what it would be.
For that on form screen, onvisible function set mode of form to new. If you want to load for in edit mode, you would need previous item context. Can be done by storing it in a variable.
@@RezaDorrani I have a similar question. I would like to re-use one form for both edit and new screens within an app that uses this component. I would like to be able to append NewForm(FormName) to the OnSelect that was applied to the Icon in this example for one of the items in the gallery. I have added properties to the NavItems table "FormMode" and "FormName" so that it can continue to be a reusable component. I have tried several different variations to set the function for this one nav item. ThisItem.FormMode(ThisItem.FormName); ThisItem.FormMode & char(40) & ThisItem.FormName & char(41) & char (53) (didn't work) I have tried simply setting NewForm(FormName) in the collection and calling it that way. I have put all of these varying attempts in as the ToolTip so I can see if they syntax looks correct, and it does, it just never triggers. I have also tried setting a variable in the OnSelect set(varMode, ThisItem.FormMode) so that I could try passing the variable through an output variable to the app, and trying to change the mode of the form based on that variable, but it takes two clicks of the navigational item to set the variable for some reason. Have you found any way to use the component to change the mode of a form within the app? I noticed there were two questions asking the same, but setting the onVisible property of the screen won't work if we're trying to re-use the same form with different modes.
@@aprilsuk7311 Trick is to set form mode on visible of screen where form is. If user clicks an item in a gallery, set a variable to view form. When user clicks edit item in gallery, set variable to edit form. When user navigates away from form screen, on hidden function, set form mode to new. When user navigates to screen from menu, it will open new form.
Thanks Reza. I will use this for many an app. The only change I would consider is to make the gallery rectSelected Visible property 'ThisItem.IsSelected' so it is only visible when selected, just like the PowerApp menu.
Mr Reza, How are you ? Instead of create a table in Powerapps components (in hardcode), What do you think, If you create a Sharepoint list of MENU values (Home, Task, Details, etc) only to be dynamic ?, in this list, you only need to specify the name of Label Menu, name of icon and screen to navigate. Is it easier if we think about component reutilization? What do you think about this idea my friend ? Tks a lot! ;) 👍
Components currently do not allow data sources within them. The component shown in video can gets its Table data (input property) from any data source of your choice.
Hi Reza, thanks for all your tutorials on Power Apps, they're my one stop shop when I'm in a bind. Please I tried to import this component into an App, but I'm getting an error message saying the "Left Nav Component does not contain any components". Can you check out the file in the repo? Thanks
Thanks for watching and liking the tutorials. File is repo is fine. I have not updated it in years. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com. May be its a general component issue.
For the Icon property you want to change or highlight (example: Color) - use a formula to evaluate if the item is selected Example: Icon Color property - show Red if selected, else Gray) If(ThisItem.IsSelected, Red, Gray)
Thanks for the reply. The code works, but since the component is on every screen, the color doesn’t follow the component to the new screen. Any suggestions?
Make sure that the gallery in the component that is driving the left navigation has the Default property set as follows LookUp(LeftNavigation.NavItems,Screen=App.ActiveScreen)
Hi Reza , great learning from this video . Thank you . One doubt when I tried this it is working fine in design mode or even when I play the app from design mode however when I published this and play the app from service then the navigation icons and lable got vanished as soon as I navigate to next page. Could you please help me out here. Again it's working fine in design mode and I have repeated the same steps as you.
I have created left navigation panel using reusable components in canvas app in powerapps. This navigation components has gallery , the input data of gallery like MenuItem name , icon and selected screen are coming from a collection which I have created on app.onstart function When I add this component on all screens in design mode it is working fine , even when I play the application from design mode to preview it's working good like it's changing screens on click as usual everything is good however when i published the application and opened it from powerapps service then as soon as I navigate to second screen or screens other than home screen all menuitems are vanishes like no icons and no MenuItem names . When I get back on home screen all things came up again. This is not the case in design mode in design mode everything is working as expected. Could you please help me out what can be the issue here ?
Thanks! I have not come across this issue and hence not sure what is the cause for your issue. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Good tutorial, thanks! Is there a way to display the extended menu by default instead of it appearing collapsed when opening the app? Thank You for the help!
I would have to try that out to know the steps. I would recommend checking on forums in case someone has designed one to open to the left community.powerplatform.com/
Hey Fab tutorial Reza I made a mistake all works but created in an canvas app :-( I'm i able to import in the the components library? or have to start again
This is a great tutorial. Thanks. Please how can I make the rectangle stop flickering when selected? When a menu item is selected, the previous rectangle of selected menu item does not hide fast enough so the rectangles (previous and new) seem to flicker sometimes, especially on canvas screen. Thanks once again for sharing your knowledge.
Hi Jonathan, The component has a gallery which has a default property value set. The code here looks for App.ActiveScreen. It takes a while for Power Apps to calculate the App.ActiveScreen and hence the flickering effect. To avoid this, create another property in component of type Screen, set this property everytime a nav item is clicked (using component output property to set a global variable) and use this global variable as input property value.
thanks for this feature. I think I will use that a lot. As Asbjørn mentioned you forgot to explain how to get the rectangular part. I did something different. I use the TemplateFill function in the Components and use this formula If(ThisItem.Screen = App.ActiveScreen, RGBA(12, 26, 85, 0.49), RGBA(12, 26, 85, 0)). Then the background gets a little darker. If(ThisItem.IsSelected, does not work for this feature thus whenever navigated from that screen to another screen you get another view of the component.
Well, its absolutely a perfect walkthrough which I wanted. But, is there any thing to highlight the current selected menu in the left nav bar to show the user currently selected Screen. Thanks
Hi Reza !! Thank you very much for your great video. I have one question how do change the color of a rectangle to show the user to the active screen. as of now, it's showing the same color of the rectangle for both active/deactivated screens. Please assist with the same.
Hi Reza, I have create a left navigation based on your video. When I look at the performance section of my app I get a warning for inefficient delay loading for the component. It give a reference to the LeftNavigation_Detail_Screen.MenuWidth. Do you have any idea how I can solve this warning?
This is one of the gotchas with components with output properties. One of the many reasons why components is still in preview. You can ignore that for now. By the ways, I have a version 2 coming out next week for the Left Nav component.
Another outstanding video. I really can't describe how valuable and inspiring your tutorials are - I'm using so many of them to build my first app with confidence! However :-( being new, I got a bit lost in where to modify/ add / take away more Title/Screen/ Icons in the navigation menu. Is it in the component itself, OnStart, bit of both? Thanks again!
@Reza Dorrani While clicking the icon the background color of icon & back ground color of label should chage ? I tried thisitem.isselected=true RGBA(), but it won't work. Please post the solution for this
Video description has link to download sample component. If you need updates to component, then you would need to try it on your own. I you need assistance, then I will recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hi Reza, Thank you for uploading this awesome tutorial, I followed through, created Navi component and tested fine. however when I imported it to my canvas app, the NavItem property is not there, could you please share some insights... thank you!
thank you for the prompt response, I think it was power platform delaying issue, I saved a copy of my component, import into my App again, I can see Navitem now. However when I set menu list on App’s onStart, it won’t recognize colNav, any thoughts please thank you again
@@funhouse828 I will have to look at your App in action to know why you are getting the issue. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Greetings, Reza! I have a problem. Suddenly my menu stopped working. It gives an error "Unexpected operator. We were expecting an operator such as +, * or & at this point in the formula". O tried download your flow, but it gives me the same error. Can you help me please?
Not facing any such issue at my end. Might be an authoring version issue as well that can cause components to break in general. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com in case others have run into similar issues.
Hi Reza. galNavigation default property set to LookUp(LeftNavigation.NavItems, Screen=App.ActiveScreen) is throwing an error (Expected Boolean Value). What's wrong?
I have not come across the mentioned issue and hence not sure what the fix for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
It's very helpful. But, the expand collapse is randomly working on selecting menu options. I have set the variable Set(varOpenMenu, false); still issue is there. Any idea, how to resolve it.
This video is great and helpful. Appreciate your skills and time. By the way, I tried changing the color of "rectSelected" and background color of the item selected. For some reason, when I click other items to test, the item selected is incorrect ( they sort of bounce around). In the component screen it doesn't do that, but on Screens it does it. To elaborate, let's say I click on "Home", color changes and the focus stays on "Home", but when I start to click other nav items like "New Record", the focus goes to other nav items. I have to click "New Record" one more time for it to be selected. I mean the navigate to screen is perfect. Any idea? Thank you.
Not sure what would be causing this issue. Video description has link to download sample component. Maybe you could look into that. I would also recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Is there a way to sync the width of the navigation component across screens? For example, if I expand the navigation in the first screen, and navigate to screen2, when I do that, the navigation element width on screen 2 is not synced with screen 1.
Thanks a lot Reza, this is best. Although the Add Section of the Canvas component is causing a slider to appear if i add a full length gallery in the datacard. How can i get rid of that.
Add section I assume is for the scrollable screen. You may want to put the component outside of that canvas. I have not tested this with the scrollable screen.
Hi reza! It is possible to add a sub menu in this video? I already watch your video regarding the sub menu, but I want to show in the screen is the Icons only like in this video. Thank you in advance appreciate your answer on this.
I would have to try out right navigation bar to provide guidance. I would recommend checking on forums or posting your issue on forums at powerusers.microsoft.com
HI Reza, great video! thank you. How do you change the visibility of the side icon bar so that it only is visible when the relevant icon and name is hovered over and selected?
Hey Reza, How would i go about adding additional actions on the Onselect? I would like to set variables depending on the different menu i am going to. i.e Set(Var,Blank()) In the ColNav i added a table({onSelect:Set(Var,Blank())}) then added ThisItem.OnSelect, but this didn't work. Any ideas? Thanks again
Set variable action in components is only scoped to that component. So that may not be an option to use. There is a new feature for components called Behavior which could be leveraged to add additional actions. I will recommend you check on the forums at powerusers.microsoft.com/
@@RezaDorrani Cheers for that. I realised that when i was testing things. I have set my clear for variables onHidden now so that gets the result i need for the time being
Tried my hand at this after a lot of apprehension... Liked it. I had one question for you though - I have a created a horizontal component and in my use case, I have tabs that have a disable options based on dates in the month. Like Tab 1 will be disabled on different dates and Tab 2 & 3 on different dates.. How Can i achieve this dynamically. Any guidance would be a great help..
I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Hi Reza, how to add a left navigation component inside a Form of Model driven app? Is that possible? When that form opens, I want to show details of it's related records in that component.
I do not have a video reference on this scenario and note sure about the options in MDA. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Awesome Video Again! Reza you're the guy! It would also be interesting to see how you would build a navigation component w/ menu sub items as well. Is it possible to create a nested gallery for the menu sub items inside the main gallery of the main items?
Yes can be easily done by adding an additonal gallery I wanted to keep this video as a 101 course on learning how to build components But if you need a more advanced version - with sub menus There is one already available in the community powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/PPOC2020-Hamburger-Menu-Component/td-p/502950
I implemented this and it works great. The only issue I have experienced so far is that when I switch pages/views the menu stays open. Is there any way I can directly fix this issue so that every time I navigate to another page/view the menu closes? Thank you!
I have not come across this issue and hence not sure what is the cause for your issue. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Thanks Reza, this is awesome. Is it possible instead of only selecting hamburger to collapse, same is also achievable when clicked anywhere else or collapses itself when menu item is clicked?
First of all, congrats for the great work. Help me a lot. Well explained. I don't know why, after I've share my app with some co-workers, it doesn't work. The app just open and close the left menu. We are opening this at Chrome.
I have this same component running within my COVID-19 Tracking solution. powerusers.microsoft.com/t5/Emergency-Response-Gallery/Coronavirus-Tracking-application-Power-Apps-template/td-p/491988 github.com/rdorrani/PowerApps/tree/master/Coronavirus%20Tracking The menu should work across all browsers. I did test this in Chrome.
Hi Reza! I have created like yours and it's perfect. Thanks for the video and tips. I just have a doubt: I created a variable for a pop-up. I included the variable to close this pop-up on the icons of left navigation. However, it's not closing my pop-up. Do you have some suggestion?
Hi Reza, Great video with detailed explanation, I have followed the same steps, everything works the same except i don't see any flickering in your example when you switch between screens from menu but mine shows reloading for a split second when i switch, why that could be?
Most welcome! I have not come across any flickering issues and hence not sure what the reason for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Mr. Dorrani, i have question, i did this step by step with your video, it work only for the fist time and screen, i modify colors, icons etc and iwork but when i copy the menu to another screen, the property of the component menuwidth that is for exit does not copy, in fact i have to insert again the not modify component to make it work, any ideas?
Video description has link to download sample component. Give that a try. If issue still exists, I will have to look at your App & component in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
@@fam.giannakisflores7780 It worked fine for many others. Might be the way you are importing. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani Man, i found out where is the problem, when you tried to copied with modification the property does not parse, but if you insert and then modify it work fine, thanks for the pointing, btw my name is andres, have another question it si posible when powerapps is install it on a cel phone to run a cell phone app, like notepad or mail?
This is by far the best tutorial I've seen on making a left navigation menu. One question though, when you were creating the lblTitle you set the PaddingLeft property to 70 instead of setting the X property to 70 even though they both seem to do the same thing. Is there any particular reason why you would use padding instead of x? Thanks!
Thank You so much! I honestly do not remember - it's been more than a year since I build this :) I don't think it makes a difference using X or PaddingLeft.
Hi Reza, Do you know the reason why one Screen remain frozen without the menu?, the Screen show information of menu when I comment the line that have the Screen name associate for then be use in the function navigate, the problem happens with Table and phone Android, I Tested in PC y Tablet windows with runtime of power apps and I Have not any problem. The strange thing is that it was showing the menu fine on Android but from one moment to the next only the blank screen appears
Another excellent video Reza, thanks a lot! I wonder if the same thing you did here with scrollable screen by adding the canvas control of this screen into a normal screen can be done with the Container control as well? Appreciate if you can clarify this. As a beginner PowerApps maker that would be really helpful info for me! Thanks!
Awsome video very clear and the menu looks great. I'm using this bar now in my apps. Is it also possible to do something else then navigating to a different screen with the buttons. Like running a piece of code in the app it is being used in or changing a boolean.
Components have come a long way since this video (although they are still in preview). There is a new property called Behavior for a component which allows once to run Power Fx formulas. Check the component documentation.
Awesome tutorial! But question… my navigation menu seems to be “reloading” the data on each page (the icons, text, and even the rectangle). I notice a spinner for a slight second too. Am I doing something wrong?
@@RezaDorrani understood, it seems like I may not be the only person having this issue, is there any reason that my gallery/component would be “refreshing/reloading” the data with each screen change? My assumption is it’s because it’s technically a new gallery that’s loaded on the page… but it’s inconvenient that everything reloads with each screen change Any thoughts you can give would be greatly appreciated! Your work is fantastic
You will need to modify the component. Include an image control, update colNav input property to include Image type and more. I do not have a video reference on this scenario and would have to try it out to provide exact step by step guidance. I would recommend giving it a try and posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hello, I was wondering if there is a way to have the menu load content without pressing the button first. If i click on the hamburger icon, nothing will appear unless I press the button first. Thank you!
There is no need to press any button. If you see the entire video, the formula to load the menu is set on App start. The moment user loads the App, the menu is ready.
@@RezaDorrani I created the component from within the app I was working on instead of starting from a component library. Could this be why it does not load from app start?
@@97Soumy97 You need to add the code of loading the collection on app start. If you adding component in App, you would still load your collection from App onstart function. Bear in mind, app on start does not run when editing app, if you right click on app object, you can run it for testing purpose
Hi Reza, I am always impressed how well are your lecures structuree. Could you please let me know I I can use instead of canvas element a container.. I am just learning to build more responsive apps. If container is not a solution, is there any other alternative after 2 years since you uploaded this video? Thanks
This was an extraordinarily awesome tutorial. You explained it very clearly and I was able to learn a lot from doing exactly what you said to do. It worked the first time, which rarely happens! Thank you so much, Reza, for sharing your knowledge.
Hi David,
Thank you for your kind words.
My goal is to provide content which is relevant and easy to replicate by following the video.
Thank you David. Hope my channel keeps providing useful content.
Thank you for the amazing feedback :)
Most welcome and thanks for watching
On the one hand, we have the super shane with exciting technical videos. On the other hand, we have the incredible reza that has the advantage of being comfortable in design and technique.
It's just amazing and it's so beautiful. And in addition it's super clear. I am not English and yet I understand almost everything. Thank you a thousand times reza
Thank You Anthony for the amazing feedback 🙏
I don't think you know how important you are to us, new developers. You are Amazing Sir!!!!!!!!!!!!!! It was extremely helpful. Thank you so much!!!! I've subscribed, and I am ecstatic about watching other videos.
Thank you for the kind words and thanks for the sub.
Very Nicely explained and easily understood even viewer has no knowledge of Power Apps. Please keep continue the great work to help community.
Thanks so much!
You have completely taken my career to the next level. Raise incoming. Watch your videos every day! Please don't stop!!!
Congratulations to you & thanks for watching the videos.
I have watch other UA-cam video about left menu, but no one give me such details guide like yours, really really appreciated. Keep moving on with your amazing tutorial! Subscribed to your UA-cam channel!!!
Thank you for the amazing feedback! I will keep trying my best.
Mr. Reza you are Amazing, you are definitely the best, your presentations are direct to the point, we seek your presentation to learn one thing and we come out with 100 things.
Thank you 😊
Thanks a lot for this tutorial, very helpful. You forgot to make the rectangle show only on selected screen. It's quite easy but I'll paste it here for other watchers.
On the rectangle element, set this code in the Visible controlfield:
If(App.ActiveScreen = ThisItem.Screen;true;false)
Thanks for the tip!
@@RezaDorrani struggling to get this to work!
Sorted it, its meant to be a , instead of ;
You can directly write this:
App.ActiveScreen = ThisItem.Screen
It will return true or false
you're the real MVP
This channel is the only thing you need in order to learn Power Platform! Really cool! Thanks to Reza
Happy to hear that! Thank You so much.
Just discovered your channel an hour ago and I already anticipate I'm going to be binge-watching it. This video in particular is incredibly relevant to me and very well explained. Thanks!
Awesome! Thank you!
Jesus. This just opened my eyes wide open. Super great job, Reza!!
Thank You
Dude...this tutorial is the bees' knees. Fantastic job. Saved me a lot of time and frustration.
Thank you dude 😊
You are entitle for a medal
I already watched twice and took down notes, I am going to start duplicating what shown .
need to go through again because I am old and green
I take my hat for this- thanks
My biggest medal is such amazing feedback. Thank you!
Thank you Reza! Great tutorial!! I've already made and imported my own greatly modified navigation bar! It works!!!
Awesome 👍
Thank you so much for the video! very detailed. I have learned a lot! It's awesome that you have been sharing your knowledge!!
Appreciate the wonderful feedback
Hello Resa, thank you so much for this tutorial, like the others already said, you save us so much time, your explanations are crystal clear, and progressive.
Thank You!
Your work is truly commendable. So neat and accurate. I knew you're the guy when I saw your tutorial on uploading files to SharePoint document library through add an attachment control and gallery control. Keep up the good work 👍
Thank you for your kind words
Another banger of a video! I am making sure to go and comment on the videos I watched to help you out!
Thanks Chris
Hi Reza, amazing video demo on building components. This will help us a lot in the upcoming projects. Thanks for sharing the component itself as well. Waiting for more vidoes.
Thank you
Mais uma grande aula!👏👏
Mesmo sem falar seu idioma tenho aproveitado as suas dicas.
obrigado.
Obrigado
You are just awesome. Your way of explaining is fabulous.
Thank You. I am working on a V2 for this menu.
After lot of stops and starts I done it
Component is created.
Hoooooooooooooooooraaaaaaaaaaaaaaaaaay
thanks a lot ( need to practice few more times)
Keep going :)
Awesome lecture. very clear step by step
Thanks a lot
Thank you so much for your tutorials. They are the best and very very helpful for beginners like us
Awesome! Thank You.
Very very nice tutorial, it worked perfectly on my app.
This menu adds a big added value. Thank you Reza
Great to hear!
This was an Amazing Tutorial about a very handy feature. Thank you so much Reza!
Glad it was helpful!
Thank you for sharing the detailed tutorial.. it's awesome..
Most welcome
Great Video! Thanks for making it! I was hoping you were going to include how to show which navigation item is active based on what screen you are on, but i believe it is as simple as this: Set the visable property of the Rectangle to If(App.ActiveScreen = ThisItem.Screen, true, false)
I released a new version of this component recently - ua-cam.com/video/3S0h2nODcxM/v-deo.html
Includes a lot more enhancements.
Thank you very much sir I am very happy and you have explained each step in a clear manner
You are most welcome
Thank you, Reza for such an enlightening tutorial! Cheers!
You are most welcome Manny
As always, extremely helpful. Thanks for sharing Reza
Glad to hear that! Thanks for watching
Kudos, crystal clear.
Thanks Reza
Thank You for watching
Awesome tutorial-thank you Reza 🙏🏼
Most welcome!
Exactly what i was after! Thank you Reza for making it easy to follow and understand!
However following these tutorials from another language settings makes for some pitfalls. Of course the ; instead of , as mentioned in a comment to Asbjörns contribution.
The first i stumbled upon was that when i do ClearCollect i have to surround my collection name with single quotes to make it work.
Second is that i have to separate the two commands (set var to false and then navigate) with double semicolons. Sometimes it is ;; and sometimes & is sufficient.
Glad you found it useful.
The regional settings do impact the formulas. I do wish the formula syntax was consistent for all regions.
I'm going to take this and try to build a top breadcrumb. Thank you Sir!
Awesome! Good luck 👍
@@RezaDorrani Hahaha, it doesn't work without a horizontal flexible gallery. 😓
@@conaxlearn8566 You will need to have a fixed width.
Excellent tutorial. Thank you
Thanks for watching
What a fantastic tutorial it was, Amazing.
Thank you! Cheers!
@@RezaDorrani The rectangle(Blue Bar) which we added near to the icons should only be visible when that Home, Task or Detail Screen is selected. I tried to achieve it by setting up visible property but could not. :-(
@@fakharahmedkhan5157 I will have to see your code and app in action to know why. I always recommend posting issues/queries with screenshots to forums at powerusers.microsoft.com/
@@RezaDorrani I will do some research and try to fix it. But I must say we have built an entire app by seeing your tutorials. Cheers 👏 ✌️
Very useful one , Thanks a lot for your detailed demo Reza!
Most welcome
Excelent Reza!!! Tks for sharing!!!
Most welcome!
Excellent video, well explained and serves the purpose!!
Thank you Nader
Hi Reza, Excellent Video on Left Navigation, I did it with you while watching this video and it worked. :) Thanks.... Can you please show more on sub-Menu or Parent - Child Menu options as well ....
Thank You.
Here is the V2 video - ua-cam.com/video/3S0h2nODcxM/v-deo.html
Thank you so much for this! What would I need to change to get it to open to the right instead of the left?
You would need to change logic in the component. Its not something I can type out here on chat. There would be updates and I would have to try it out to know what it would be.
@@RezaDorrani Got it! Thank you.
Great demo. Thanks!
Thanks for watching
Thanks for this tutorial, Reza!
You are most welcome
it is really awesome tutorial , very clear and amazing , thanks a million \
Glad you liked it!
There is also a version 2 of the component. Check it out here - ua-cam.com/video/3S0h2nODcxM/v-deo.html
What if I want to navigate to my form screen but in new form mode. If the user was editing an item previously, will the form will load in edit mode?
For that on form screen, onvisible function set mode of form to new.
If you want to load for in edit mode, you would need previous item context. Can be done by storing it in a variable.
@@RezaDorrani I have a similar question. I would like to re-use one form for both edit and new screens within an app that uses this component. I would like to be able to append NewForm(FormName) to the OnSelect that was applied to the Icon in this example for one of the items in the gallery. I have added properties to the NavItems table "FormMode" and "FormName" so that it can continue to be a reusable component. I have tried several different variations to set the function for this one nav item.
ThisItem.FormMode(ThisItem.FormName);
ThisItem.FormMode & char(40) & ThisItem.FormName & char(41) & char (53) (didn't work)
I have tried simply setting NewForm(FormName) in the collection and calling it that way.
I have put all of these varying attempts in as the ToolTip so I can see if they syntax looks correct, and it does, it just never triggers.
I have also tried setting a variable in the OnSelect set(varMode, ThisItem.FormMode) so that I could try passing the variable through an output variable to the app, and trying to change the mode of the form based on that variable, but it takes two clicks of the navigational item to set the variable for some reason.
Have you found any way to use the component to change the mode of a form within the app? I noticed there were two questions asking the same, but setting the onVisible property of the screen won't work if we're trying to re-use the same form with different modes.
@@aprilsuk7311 Trick is to set form mode on visible of screen where form is. If user clicks an item in a gallery, set a variable to view form. When user clicks edit item in gallery, set variable to edit form. When user navigates away from form screen, on hidden function, set form mode to new. When user navigates to screen from menu, it will open new form.
Thanks Reza. I will use this for many an app.
The only change I would consider is to make the gallery rectSelected Visible property 'ThisItem.IsSelected' so it is only visible when selected, just like the PowerApp menu.
Your suggestion is spot on.
I think I added this later to the video description since I missed it as part of the video.
I'm using this in an app I'm making in Teams. Can Containers adjust the width like the canvas/datacards do when the left navigation is used?
Responsive containers - Yes.
Check my latest video on responsive design using containers ua-cam.com/video/1o2L0DADzKQ/v-deo.html
Mr Reza, How are you ?
Instead of create a table in Powerapps components (in hardcode), What do you think, If you create a Sharepoint list of MENU values (Home, Task, Details, etc) only to be dynamic ?, in this list, you only need to specify the name of Label Menu, name of icon and screen to navigate.
Is it easier if we think about component reutilization?
What do you think about this idea my friend ?
Tks a lot! ;) 👍
Components currently do not allow data sources within them. The component shown in video can gets its Table data (input property) from any data source of your choice.
Hi Reza, thanks for all your tutorials on Power Apps, they're my one stop shop when I'm in a bind. Please I tried to import this component into an App, but I'm getting an error message saying the "Left Nav Component does not contain any components". Can you check out the file in the repo? Thanks
Thanks for watching and liking the tutorials.
File is repo is fine. I have not updated it in years. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com. May be its a general component issue.
SUBBED! Your tutorial is so easy to follow. Question: how can I make the icon highlight the page I’m on?
For the Icon property you want to change or highlight (example: Color) - use a formula to evaluate if the item is selected
Example: Icon Color property - show Red if selected, else Gray)
If(ThisItem.IsSelected, Red, Gray)
Thanks for the reply. The code works, but since the component is on every screen, the color doesn’t follow the component to the new screen. Any suggestions?
Make sure that the gallery in the component that is driving the left navigation has the Default property set as follows
LookUp(LeftNavigation.NavItems,Screen=App.ActiveScreen)
It worked! Thank you so much! 😁
Glad it worked !
Hi Reza , great learning from this video . Thank you . One doubt when I tried this it is working fine in design mode or even when I play the app from design mode however when I published this and play the app from service then the navigation icons and lable got vanished as soon as I navigate to next page. Could you please help me out here.
Again it's working fine in design mode and I have repeated the same steps as you.
I have created left navigation panel using reusable components in canvas app in powerapps.
This navigation components has gallery , the input data of gallery like MenuItem name , icon and selected screen are coming from a collection which I have created on app.onstart function
When I add this component on all screens in design mode it is working fine , even when I play the application from design mode to preview it's working good like it's changing screens on click as usual everything is good however when i published the application and opened it from powerapps service then as soon as I navigate to second screen or screens other than home screen all menuitems are vanishes like no icons and no MenuItem names . When I get back on home screen all things came up again.
This is not the case in design mode in design mode everything is working as expected.
Could you please help me out what can be the issue here ?
Thanks!
I have not come across this issue and hence not sure what is the cause for your issue. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Great detail. Thanks.
Thanks for watching!
Awesome. It expand to the left. What if I want it to extend to the right?i.e right navigation...
For extend to the right, you would need to adjust the formulas inside the component to position the menu controls.
Good tutorial, thanks!
Is there a way to display the extended menu by default instead of it appearing collapsed when opening the app? Thank You for the help!
Set the variable that drives expand collapse of the menu on start of the app
How would you make it open up to the left with the menu icon on the right? Thank you!!
I would have to try that out to know the steps. I would recommend checking on forums in case someone has designed one to open to the left
community.powerplatform.com/
Hey Fab tutorial Reza I made a mistake all works but created in an canvas app :-( I'm i able to import in the the components library? or have to start again
I believe you should be able to import into component library however It's been a while since I have tried importing one.
This is a great tutorial. Thanks.
Please how can I make the rectangle stop flickering when selected? When a menu item is selected, the previous rectangle of selected menu item does not hide fast enough so the rectangles (previous and new) seem to flicker sometimes, especially on canvas screen.
Thanks once again for sharing your knowledge.
Hi Jonathan,
The component has a gallery which has a default property value set. The code here looks for App.ActiveScreen.
It takes a while for Power Apps to calculate the App.ActiveScreen and hence the flickering effect.
To avoid this, create another property in component of type Screen, set this property everytime a nav item is clicked (using component output property to set a global variable) and use this global variable as input property value.
thanks for this feature. I think I will use that a lot. As Asbjørn mentioned you forgot to explain how to get the rectangular part. I did something different. I use the TemplateFill function in the Components and use this formula If(ThisItem.Screen = App.ActiveScreen, RGBA(12, 26, 85, 0.49), RGBA(12, 26, 85, 0)). Then the background gets a little darker. If(ThisItem.IsSelected, does not work for this feature thus whenever navigated from that screen to another screen you get another view of the component.
Best part about this video was that I have seen a lot of folks build their own versions and make it better.
I have plans for a V2 of this component.
Well, its absolutely a perfect walkthrough which I wanted. But, is there any thing to highlight the current selected menu in the left nav bar to show the user currently selected Screen.
Thanks
Check the description of the video.
I missed that part in the video so added it to the description.
@@RezaDorrani Ty
Hi Mustafa, Check the description of the video. It has that fix :)
Hi Reza !! Thank you very much for your great video. I have one question how do change the color of a rectangle to show the user to the active screen. as of now, it's showing the same color of the rectangle for both active/deactivated screens. Please assist with the same.
Most welcome!
Check ua-cam.com/video/3S0h2nODcxM/v-deo.htmlsi=22NWT_EPITBraqAw
Great and very helpful videos, thank you😊
You're very welcome!
Hi Reza, I have create a left navigation based on your video. When I look at the performance section of my app I get a warning for inefficient delay loading for the component. It give a reference to the LeftNavigation_Detail_Screen.MenuWidth. Do you have any idea how I can solve this warning?
This is one of the gotchas with components with output properties. One of the many reasons why components is still in preview. You can ignore that for now.
By the ways, I have a version 2 coming out next week for the Left Nav component.
Another outstanding video. I really can't describe how valuable and inspiring your tutorials are - I'm using so many of them to build my first app with confidence!
However :-( being new, I got a bit lost in where to modify/ add / take away more Title/Screen/ Icons in the navigation menu. Is it in the component itself, OnStart, bit of both?
Thanks again!
Thank You Jimmy.
OnStart in the colNavItems collection.
very very very very very helpful!!! thank you
Most most most welcome
@Reza Dorrani
While clicking the icon the background color of icon & back ground color of label should chage ?
I tried thisitem.isselected=true RGBA(), but it won't work.
Please post the solution for this
Video description has link to download sample component.
If you need updates to component, then you would need to try it on your own.
I you need assistance, then I will recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hi Reza, Thank you for uploading this awesome tutorial, I followed through, created Navi component and tested fine. however when I imported it to my canvas app, the NavItem property is not there, could you please share some insights... thank you!
Not sure why it wont show up. I have not faced this issue.
thank you for the prompt response, I think it was power platform delaying issue, I saved a copy of my component, import into my App again, I can see Navitem now. However when I set menu list on App’s onStart, it won’t recognize colNav, any thoughts please thank you again
@@funhouse828 I will have to look at your App in action to know why you are getting the issue.
I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Greetings, Reza! I have a problem. Suddenly my menu stopped working. It gives an error "Unexpected operator. We were expecting an operator such as +, * or & at this point in the formula". O tried download your flow, but it gives me the same error. Can you help me please?
Not facing any such issue at my end. Might be an authoring version issue as well that can cause components to break in general. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com in case others have run into similar issues.
Outstanding. Thank you, Reza. (Subscribed)
Awesome, thank you!
Hi Reza. galNavigation default property set to LookUp(LeftNavigation.NavItems, Screen=App.ActiveScreen) is throwing an error (Expected Boolean Value). What's wrong?
I have not come across the mentioned issue and hence not sure what the fix for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
It's very helpful. But, the expand collapse is randomly working on selecting menu options. I have set the variable Set(varOpenMenu, false); still issue is there. Any idea, how to resolve it.
Not sure as I have not faced this issue. Video description has link to download sample component if that helps.
It's an awesome tutorial. Can you also add a bit to it by explaining how submenu like 2nd and 3rd level menu
Thanks to the amazing response to this video, I do plan on creating an advanced version of this in future (2nd level)
@@RezaDorrani Would you also be able to show how to change the icons if we want to use some that are not included with Power Apps?
This video is great and helpful. Appreciate your skills and time. By the way, I tried changing the color of "rectSelected" and background color of the item selected. For some reason, when I click other items to test, the item selected is incorrect ( they sort of bounce around). In the component screen it doesn't do that, but on Screens it does it. To elaborate, let's say I click on "Home", color changes and the focus stays on "Home", but when I start to click other nav items like "New Record", the focus goes to other nav items. I have to click "New Record" one more time for it to be selected. I mean the navigate to screen is perfect. Any idea? Thank you.
Not sure what would be causing this issue. Video description has link to download sample component. Maybe you could look into that.
I would also recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Is there a way to sync the width of the navigation component across screens? For example, if I expand the navigation in the first screen, and navigate to screen2, when I do that, the navigation element width on screen 2 is not synced with screen 1.
You have to set a variable in the App and pass that as input param to the component. Then use that value to check the width of the menu.
Awesome video! Thanks so much!
Glad you liked it!
Reza, how we can show that which menu is selected,
You can check if Screen=App.ActiveScreen
Check video description.
Thanks a lot Reza, this is best. Although the Add Section of the Canvas component is causing a slider to appear if i add a full length gallery in the datacard. How can i get rid of that.
Add section I assume is for the scrollable screen. You may want to put the component outside of that canvas. I have not tested this with the scrollable screen.
This is really great.
Would you now prefer Container components over these canvas components for this usecase?
Containers are meant to help build responsive Apps. Canvas Components enable reusability.
You can use containers in a component.
Hi reza! It is possible to add a sub menu in this video? I already watch your video regarding the sub menu, but I want to show in the screen is the Icons only like in this video. Thank you in advance appreciate your answer on this.
Its possible based on logic in other video. Combine the 2 video ideas. I have no plans to update logic in this video.
Hi Rezaa Please help in Right Navigation Bar i cant able to expand
I would have to try out right navigation bar to provide guidance. I would recommend checking on forums or posting your issue on forums at powerusers.microsoft.com
@@RezaDorrani K thanks Reza
HI Reza, great video! thank you. How do you change the visibility of the side icon bar so that it only is visible when the relevant icon and name is hovered over and selected?
Check the description of the video. It has some additional settings that I missed to highlight in the video.
@@RezaDorrani thank you!
Hey Reza, How would i go about adding additional actions on the Onselect? I would like to set variables depending on the different menu i am going to. i.e Set(Var,Blank()) In the ColNav i added a table({onSelect:Set(Var,Blank())}) then added ThisItem.OnSelect, but this didn't work. Any ideas? Thanks again
Set variable action in components is only scoped to that component. So that may not be an option to use.
There is a new feature for components called Behavior which could be leveraged to add additional actions.
I will recommend you check on the forums at powerusers.microsoft.com/
@@RezaDorrani Cheers for that. I realised that when i was testing things. I have set my clear for variables onHidden now so that gets the result i need for the time being
Tried my hand at this after a lot of apprehension... Liked it.
I had one question for you though - I have a created a horizontal component and in my use case, I have tabs that have a disable options based on dates in the month. Like Tab 1 will be disabled on different dates and Tab 2 & 3 on different dates.. How Can i achieve this dynamically. Any guidance would be a great help..
I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
Hi Reza, how to add a left navigation component inside a Form of Model driven app? Is that possible?
When that form opens, I want to show details of it's related records in that component.
I do not have a video reference on this scenario and note sure about the options in MDA. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.
@@RezaDorrani Ok, Thanks! I appreciate your response.
Awesome Video Again! Reza you're the guy!
It would also be interesting to see how you would build a navigation component w/ menu sub items as well.
Is it possible to create a nested gallery for the menu sub items inside the main gallery of the main items?
Yes can be easily done by adding an additonal gallery
I wanted to keep this video as a 101 course on learning how to build components
But if you need a more advanced version - with sub menus
There is one already available in the community
powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/PPOC2020-Hamburger-Menu-Component/td-p/502950
@@RezaDorrani Thank you Reza!
I implemented this and it works great. The only issue I have experienced so far is that when I switch pages/views the menu stays open. Is there any way I can directly fix this issue so that every time I navigate to another page/view the menu closes? Thank you!
I have not come across this issue and hence not sure what is the cause for your issue. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Thanks Reza, this is awesome. Is it possible instead of only selecting hamburger to collapse, same is also achievable when clicked anywhere else or collapses itself when menu item is clicked?
I don’t think there is a click out option.
First of all, congrats for the great work. Help me a lot. Well explained.
I don't know why, after I've share my app with some co-workers, it doesn't work. The app just open and close the left menu. We are opening this at Chrome.
I have this same component running within my COVID-19 Tracking solution.
powerusers.microsoft.com/t5/Emergency-Response-Gallery/Coronavirus-Tracking-application-Power-Apps-template/td-p/491988
github.com/rdorrani/PowerApps/tree/master/Coronavirus%20Tracking
The menu should work across all browsers. I did test this in Chrome.
Hi Reza!
I have created like yours and it's perfect.
Thanks for the video and tips.
I just have a doubt:
I created a variable for a pop-up. I included the variable to close this pop-up on the icons of left navigation. However, it's not closing my pop-up.
Do you have some suggestion?
No idea about that.I recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com
Thanks! Anyway.
Your explanations are really clear and mostly of my apps are created using yours tips
Hi Reza, Great video with detailed explanation, I have followed the same steps, everything works the same except i don't see any flickering in your example when you switch between screens from menu but mine shows reloading for a split second when i switch, why that could be?
Most welcome!
I have not come across any flickering issues and hence not sure what the reason for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
I get flickering every time I change pages too… did you ever wind up getting a solution?
@@kenglin13 no I didn't..I tried tutorials from others too but the result was same
Mr. Dorrani, i have question, i did this step by step with your video, it work only for the fist time and screen, i modify colors, icons etc and iwork but when i copy the menu to another screen, the property of the component menuwidth that is for exit does not copy, in fact i have to insert again the not modify component to make it work, any ideas?
Video description has link to download sample component. Give that a try.
If issue still exists, I will have to look at your App & component in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani i download but at the momento to import it it said that the files does no have a component
@@fam.giannakisflores7780 It worked fine for many others. Might be the way you are importing. I would recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani Man, i found out where is the problem, when you tried to copied with modification the property does not parse, but if you insert and then modify it work fine, thanks for the pointing, btw my name is andres, have another question it si posible when powerapps is install it on a cel phone to run a cell phone app, like notepad or mail?
@@fam.giannakisflores7780 I have not tried launching other apps. Power Apps has a launch function. May be something is possible but Im not sure.
This is by far the best tutorial I've seen on making a left navigation menu. One question though, when you were creating the lblTitle you set the PaddingLeft property to 70 instead of setting the X property to 70 even though they both seem to do the same thing. Is there any particular reason why you would use padding instead of x? Thanks!
Thank You so much!
I honestly do not remember - it's been more than a year since I build this :)
I don't think it makes a difference using X or PaddingLeft.
Hi Reza, Do you know the reason why one Screen remain frozen without the menu?, the Screen show information of menu when I comment the line that have the Screen name associate for then be use in the function navigate, the problem happens with Table and phone Android, I Tested in PC y Tablet windows with runtime of power apps and I Have not any problem. The strange thing is that it was showing the menu fine on Android but from one moment to the next only the blank screen appears
I have no clue about that. Not something I have experienced.
Another excellent video Reza, thanks a lot!
I wonder if the same thing you did here with scrollable screen by adding the canvas control of this screen into a normal screen can be done with the Container control as well? Appreciate if you can clarify this. As a beginner PowerApps maker that would be really helpful info for me! Thanks!
Thanks.
It is possible. But, containers themselves have scrolling behavior.
Awsome video very clear and the menu looks great. I'm using this bar now in my apps. Is it also possible to do something else then navigating to a different screen with the buttons. Like running a piece of code in the app it is being used in or changing a boolean.
Components have come a long way since this video (although they are still in preview).
There is a new property called Behavior for a component which allows once to run Power Fx formulas.
Check the component documentation.
Awesome tutorial! But question… my navigation menu seems to be “reloading” the data on each page (the icons, text, and even the rectangle). I notice a spinner for a slight second too.
Am I doing something wrong?
Thanks!
Don’t remember running into that issue hence not sure.
@@RezaDorrani understood, it seems like I may not be the only person having this issue, is there any reason that my gallery/component would be “refreshing/reloading” the data with each screen change?
My assumption is it’s because it’s technically a new gallery that’s loaded on the page… but it’s inconvenient that everything reloads with each screen change
Any thoughts you can give would be greatly appreciated! Your work is fantastic
@@kenglin13 May be try using named formulas to drive the menu items.
If I have to add an imgae in Icon, its giving me an error? How can I rectify that? Any help is appreciated
You will need to modify the component. Include an image control, update colNav input property to include Image type and more.
I do not have a video reference on this scenario and would have to try it out to provide exact step by step guidance. I would recommend giving it a try and posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hello, I was wondering if there is a way to have the menu load content without pressing the button first. If i click on the hamburger icon, nothing will appear unless I press the button first. Thank you!
There is no need to press any button. If you see the entire video, the formula to load the menu is set on App start. The moment user loads the App, the menu is ready.
@@RezaDorrani I created the component from within the app I was working on instead of starting from a component library. Could this be why it does not load from app start?
@@97Soumy97 You need to add the code of loading the collection on app start. If you adding component in App, you would still load your collection from App onstart function. Bear in mind, app on start does not run when editing app, if you right click on app object, you can run it for testing purpose
Hi Reza, I am always impressed how well are your lecures structuree. Could you please let me know I I can use instead of canvas element a container.. I am just learning to build more responsive apps. If container is not a solution, is there any other alternative after 2 years since you uploaded this video? Thanks
Thank You.
Definitely containers is the way forward. I have done videos explaining what they do. Check my playlist on responsive design.
Hi Reza,
Can we do this component by using other icons not in powerapps?
else
Can we try the same component with image control?
You can replace the Icon control in component with Image control and pass image as property.
@@RezaDorrani thanks Reza, did with image control.