PowerApps Left Navigation Component

[@davidc9652]

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.

[@RezaDorrani]

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.

[@RezaDorrani]

Thank you David. Hope my channel keeps providing useful content.

[@RezaDorrani]

Thank you for the amazing feedback :)

[@RezaDorrani]

Most welcome and thanks for watching

[@anthonyleduc]

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

[@RezaDorrani]

Thank You Anthony for the amazing feedback 🙏

[@paulorubebe7308]

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.

[@RezaDorrani]

Thank you for the kind words and thanks for the sub.

[@asbjborg]

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)

[@RezaDorrani]

Thanks for the tip!

[@mark_axtell]

@@RezaDorrani struggling to get this to work!

[@mark_axtell]

Sorted it, its meant to be a , instead of ;

[@jonathancopin8093]

You can directly write this: App.ActiveScreen = ThisItem.Screen It will return true or false

[@likeminas]

you're the real MVP

[@dhubach1]

You have completely taken my career to the next level. Raise incoming. Watch your videos every day! Please don't stop!!!

[@RezaDorrani]

Congratulations to you & thanks for watching the videos.

[@greg2kdotcom]

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!

[@RezaDorrani]

Awesome! Thank you!

[@sashawarchoon1989]

This channel is the only thing you need in order to learn Power Platform! Really cool! Thanks to Reza

[@RezaDorrani]

Happy to hear that! Thank You so much.

[@1155074]

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.

[@RezaDorrani]

Thank you 😊

[@mahenderasingh454]

Very Nicely explained and easily understood even viewer has no knowledge of Power Apps. Please keep continue the great work to help community.

[@RezaDorrani]

Thanks so much!

[@mydwightstifler]

Jesus. This just opened my eyes wide open. Super great job, Reza!!

[@RezaDorrani]

Thank You

[@BrendonBrooks]

Dude...this tutorial is the bees' knees. Fantastic job. Saved me a lot of time and frustration.

[@RezaDorrani]

Thank you dude 😊

[@Lagging69]

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 👍

[@RezaDorrani]

Thank you for your kind words

[@chrisproctor2854]

Another banger of a video! I am making sure to go and comment on the videos I watched to help you out!

[@RezaDorrani]

Thanks Chris

[@MattSchuessler]

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)

[@RezaDorrani]

I released a new version of this component recently - kzbin.info/www/bejne/aYSTmWWkhKmWrq8 Includes a lot more enhancements.

[@cristovaodarosa2050]

Mais uma grande aula!👏👏 Mesmo sem falar seu idioma tenho aproveitado as suas dicas. obrigado.

[@RezaDorrani]

Obrigado

[@tordsonander]

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]

Glad you found it useful. The regional settings do impact the formulas. I do wish the formula syntax was consistent for all regions.

[@asifkhawaja]

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.

[@RezaDorrani]

Thank you

[@smritimondal8965]

You are just awesome. Your way of explaining is fabulous.

[@RezaDorrani]

Thank You. I am working on a V2 for this menu.

[@meenakshibansal2253]

Thank you so much for your tutorials. They are the best and very very helpful for beginners like us

[@RezaDorrani]

Awesome! Thank You.

[@aurelienlarcher]

Very very nice tutorial, it worked perfectly on my app. This menu adds a big added value. Thank you Reza

[@RezaDorrani]

Great to hear!

[@jr713121]

This was an Amazing Tutorial about a very handy feature. Thank you so much Reza!

[@RezaDorrani]

Glad it was helpful!

[@kevinbriz17]

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.

[@RezaDorrani]

Your suggestion is spot on. I think I added this later to the video description since I missed it as part of the video.

[@njoy2075]

Awesome lecture. very clear step by step

[@RezaDorrani]

Thanks a lot

[@yeskumar78]

Thank you for sharing the detailed tutorial.. it's awesome..

[@RezaDorrani]

Most welcome

[@laikahmed7120]

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 ....

[@RezaDorrani]

Thank You. Here is the V2 video - kzbin.info/www/bejne/aYSTmWWkhKmWrq8

[@evitweetie7115]

Awesome tutorial-thank you Reza 🙏🏼

[@RezaDorrani]

Most welcome!

[@hafsteinnelvarjakobsson7805]

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.

[@RezaDorrani]

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.

[@naderhayek3310]

Excellent video, well explained and serves the purpose!!

[@RezaDorrani]

Thank you Nader

[@HowToExcelBlog]

Great demo. Thanks!

[@RezaDorrani]

Thanks for watching

[@jimmydoe1653]

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!

[@RezaDorrani]

Thank You Jimmy. OnStart in the colNavItems collection.

[@sujisam5508]

Very useful one , Thanks a lot for your detailed demo Reza!

[@RezaDorrani]

Most welcome

[@matthewvandersteen7738]

Thanks for this tutorial, Reza!

[@RezaDorrani]

You are most welcome

[@yvonnew2010]

Excellent tutorial. Thank you

[@RezaDorrani]

Thanks for watching

[@mustafahussainmohsin320]

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

[@RezaDorrani]

Check the description of the video. I missed that part in the video so added it to the description.

[@mustafahussainmohsin320]

@@RezaDorrani Ty

[@RezaDorrani]

Hi Mustafa, Check the description of the video. It has that fix :)

[@skarJones]

Outstanding. Thank you, Reza. (Subscribed)

[@RezaDorrani]

Awesome, thank you!

[@akhi0413]

It's an awesome tutorial. Can you also add a bit to it by explaining how submenu like 2nd and 3rd level menu

[@RezaDorrani]

Thanks to the amazing response to this video, I do plan on creating an advanced version of this in future (2nd level)

[@davidc9652]

@@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?

[@MrDionmar]

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! ;) 👍

[@RezaDorrani]

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.

[@gabrielako3164]

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

[@RezaDorrani]

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.

[@labahlabahoren]

Awesome. It expand to the left. What if I want it to extend to the right?i.e right navigation...

[@RezaDorrani]

For extend to the right, you would need to adjust the formulas inside the component to position the menu controls.

[@DanielADamico]

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?

[@RezaDorrani]

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

[@DanielADamico]

@@RezaDorrani Thank you Reza!

[@blackened7]

well done sir

[@RezaDorrani]

Thanks for watching. There is also a Version 2 of this component. Check it out here - kzbin.info/www/bejne/aYSTmWWkhKmWrq8

[@sebastianjuarez5575]

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!

[@RezaDorrani]

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

[@rolih6]

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

[@RezaDorrani]

Thank You. Definitely containers is the way forward. I have done videos explaining what they do. Check my playlist on responsive design.

[@priyankpandey4506]

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.

[@RezaDorrani]

Most welcome! Check kzbin.info/www/bejne/aYSTmWWkhKmWrq8si=22NWT_EPITBraqAw

[@erinbarajas758]

Awesome video! Thanks so much!

[@RezaDorrani]

Glad you liked it!

[@funhouse828]

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!

[@RezaDorrani]

Not sure why it wont show up. I have not faced this issue.

[@funhouse828]

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

[@RezaDorrani]

@@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

[@jacobbradley9541]

Great detail. Thanks.

[@RezaDorrani]

Thanks for watching!

[@sankhlayashraj]

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..

[@RezaDorrani]

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.

[@gonzalezmoreira]

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!

[@RezaDorrani]

Set the variable that drives expand collapse of the menu on start of the app

[@KamaleshBhamare]

Sir, Video is awesome and works really well for this requirement. However, I really struggled while creating a component for Alert pop up. I have 2 buttons and they have multiple actions when buttons are clicked. But I could not pass those actions to the component. Also could not find the way to pass actions, variables, form names to the Component. Please make a video if these things are possible.

[@RezaDorrani]

Will add it to my backlog but this is the first request on this topic. I will need a lot more requests on this topic to give this a higher priority.

[@KamaleshBhamare]

@@RezaDorrani Thank you for replying and considering it. I will look forward to seeing it.

[@suezeequu]

Hey Reza, This is amazing and I have implemented it in one of my app designs. Question - the blue selection bars you added to the component - my guess is these should display when icon or title is selected - for e.g. if I select the second icon the blue bar should show to the left of it, but should not show to the left of the first or third icon in the nav component. The bar would be like a second way of letting user know what page they are on - Is it possible to do this and if so, how can this be accomplished?

[@RezaDorrani]

Glad to hear that. I did miss 2 formulas in my video. It is provided in the video description :)

[@jimpiazza6631]

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?

[@RezaDorrani]

Responsive containers - Yes. Check my latest video on responsive design using containers kzbin.info/www/bejne/Z6CVfWN6dqmtgbM

[@sininv1]

Thabks. Very good video..but how can I use it to build a three catogories forms. For submit. Edit and approve and view old record to add on comments etc? If u can demo too ...thanks

[@RezaDorrani]

For building forms you need to use the form control. This is just a navigation component. I have a video coming next week on the Form control which covers building 3 categories of forms.

[@VihaKrish-zr1rd]

This video is extremely useful. I am trying to download your component (msapp) file but during import process it is throwing an error. Can you please resolve this error : "Left Nav Component does not contain any components."

[@RezaDorrani]

You need to import it as a component. I have not heard anyone face this issue so not sure.

[@darranpage9569]

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

[@RezaDorrani]

I believe you should be able to import into component library however It's been a while since I have tried importing one.

[@NelsonONadal]

Thanks Sir Reza! another great tutorial. Aside from menu, where does else we can use the 'component' thing? Also do you have Paid Course Training like other MVP is doing? Thanks. - Nelson

[@NelsonONadal]

I see some MVP like you has these training course: • Complete SharePoint Development Training Course • SharePoint Framework (SPFx) Training Course • The Power Platform Training (Power Apps, Power Automate, and Power BI) • SharePoint Site Owner Training

[@RezaDorrani]

Components - kzbin.info/aero/PLTyFh-qDKAiF_WeYXLbMt5NmRg3T35WRS I am no longer an MVP :)

[@RezaDorrani]

I am planning power platform training on my KZbin channel in future via channel memberships (Join button on channel)

[@RezaDorrani]

Check channel memberships. I have gone live with a training tier that you can sign up for now. kzbin.infojoin

[@varunkumar-ue1vc]

Hi Reza, Can we do this component by using other icons not in powerapps? else Can we try the same component with image control?

[@RezaDorrani]

You can replace the Icon control in component with Image control and pass image as property.

[@varunkumar-ue1vc]

@@RezaDorrani thanks Reza, did with image control.

[@rebekahroberts4742]

Hello, I love your videos and I think my app has something from all of them. Quick question though. I want my navigation to pop out to the right, like a table of contents for a form that's on the left. Do you have any videos that show that?

[@RezaDorrani]

I do not have a navigation video from right to left. I will recommend you check on the forums at powerusers.microsoft.com/

[@liraspberry6966]

Thank you so much for the video! very detailed. I have learned a lot! It's awesome that you have been sharing your knowledge!!

[@RezaDorrani]

Appreciate the wonderful feedback

[@syedabidaliabdi1273]

Your way of explaining is fabulous, but i am facing issue, I have created Component in my app but when i use in on screen always through navigation to component module. Why?

[@RezaDorrani]

Thanks! I have not experienced the mentioned issue and hence not sure what the cause for it could be. I will recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com

[@pohwa1332]

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?

[@RezaDorrani]

Check the description of the video. It has some additional settings that I missed to highlight in the video.

[@pohwa1332]

@@RezaDorrani thank you!

[@Hari-xg9ur]

How to navigate newform(form) in Nav items

[@RezaDorrani]

The current nav is designed to just redirect to the next screen. Each screen has an OnVisible property. You can plug in the NewForm(form) function on the OnVisible property.

[@jandirkvooijs7477]

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.

[@RezaDorrani]

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.

[@rickysydney4208]

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?

[@RezaDorrani]

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.

[@basictalent1]

Hi Reza, Excellent video. Thanks for helping the community. Can we use the canvas'es instead of adding too many screens and set the ClearCollect (colNav) to include with Canvas? Will this improve the performance in any way?

[@RezaDorrani]

I did not understand the question.

[@basictalent1]

@@RezaDorrani sorry for the misunderstanding. All i was hoping to make use of the canvases from the scroll gallery instead of adding too many screens just to improve the app performance. As an example in this video about the use of canvases. kzbin.info/www/bejne/eabUZKuVhJlkpKM Is there any chance you have made of this design? Or you intend to make anytime in the future? Would be interesting to see. Appreciated thanks.

[@RezaDorrani]

I have not and no plans to do this in future

[@madihasalman7110]

Hi Reza I would like to ask one question. If we have containers and lots of screens in power apps , is it practical to have left navigation expand to right as you did in this tutorial by using canvas ?

[@RezaDorrani]

Expand collapse is an option. Not necessary to have it. It depends.

[@kenglin13]

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]

Thanks! Don’t remember running into that issue hence not sure.

[@kenglin13]

@@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

[@RezaDorrani]

@@kenglin13 May be try using named formulas to drive the menu items.

[@schlachtaf]

hey Reza! this is an awesome tutorial, thank you! Is there a way to have some persistence within screens whether the nav menu is extended or closed (passing the width between screens)?

[@RezaDorrani]

Persistence is possible but would require some additional work. A global variable to maintain state. Variable would need to be sent as input to component to keep it extended or closed + on open close of menu component needs to send an output value to set the variable.

[@schlachtaf]

@@RezaDorrani thanks, I'll experiment (I think I was missing the output when I tried doing it)

[@schlachtaf]

@@RezaDorrani I tested around with a variable reset, but it looked a bit awkward. Since my main goal was to have the menu closed when on a new screen, I just added a Set function before Navigate to set the variable controlling the width to false (the same variable assigned to the hamburger menu). Thanks again for the videos, they are super useful.

[@smartin8707]

Hi Reza! Thank you for this amazing video! It helped me out very much. Quick question - do you think it's possible to both use the Navigate function in the gallery, and the Launch function? I have some icons that I want to point to pages in the app, but also out to some websites external to my app. So far...I'm thinking it's not possible.

[@RezaDorrani]

Yes. You would have to include that logic as component properties. So you would pass both the launch url and the screen to navigate to.

[@yutikapatel5995]

@@RezaDorrani What do you mean as component properties? It is possible to get a quick example? as I am wanting to use the Launch Function as well

[@RezaDorrani]

@@yutikapatel5995 Component has input and output properties as shown in video. I would have to try it out to provide guidance. I will recommend posting your query with screenshots on the forums at powerusers.microsoft.com/

[@rachitraman797]

Thank You for the awesome series. is it possible to make responsive reusable custom component and use it in power app

[@RezaDorrani]

The video covers building a responsive component. Key in building responsive components is to define the Height,Width,X & Y properties of the controls within the component relative to the size of the component on the screen.

[@jray1429]

Hi Reza, have you tried using slide in menus with components❓

[@RezaDorrani]

I did build one for a customer. Key is to use the timer control to slide menus in and out.

[@johnjanis714]

Hi Reza, Thank you for putting this video together. I wanted to ask, how can you dynamically show or hide elements in the component gallery if the user is in specific lists? Such as if current user is not in admin list, do not show settings option in menu. Thank you!

[@RezaDorrani]

I did cover this in my security videos. Check kzbin.info/www/bejne/gF7LfoCOp7CAjKc & kzbin.info/www/bejne/nJOngntmq66mhJo

[@Shuvmond]

The github link to the msapp is not working during import into components section

[@RezaDorrani]

It is an msapp file so it needs to be imported as an app not a component. Next to settings in app studio, there are 3 ellipses, there is the option to "Open" where you can browse and import msapp file

[@kaveeshwijesinghe390]

Hi, Thanks for the video. Could yo please make another video of how to use variables instead of screen name. Is that possible?

[@RezaDorrani]

You can store screen references in variables. I don’t think I would make a video on this specific use case since I would need a lot of requests on this topic. This is the first one.

[@nancystevens2443]

All these comments are so old, I hope you are still answering questions. I love this, but is there away to have the pane expanded on open and they can close by hitting the hamburger, instead of the other way around

[@RezaDorrani]

Possible by changing the code in the component :) Its been a long time since I have even seen the code.

[@rashimalhotra8642]

Hi Reza, what is the difference between creating component from components library as you showed, and creating from pcf?

[@RezaDorrani]

components - low code - learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-component pcf - pro code - learn.microsoft.com/en-us/power-apps/developer/component-framework/overview

[@rashimalhotra8642]

Thank you! So, for adding custom control to dataverse fields, we have to use pcf?

[@RezaDorrani]

@@rashimalhotra8642 depends on what you are trying. Pcf is one way for sure.

[@sirriapanahalam4373]

Hello Reza thanks for the great video. I downloaded the component and used it but the title doesn't appear. Do you have any idea why that's happened and how to solve it? Thank you in advance 😄

[@RezaDorrani]

I will have to look at how you have passed data to this component to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@matheusbarbosa745]

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?

[@RezaDorrani]

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.

[@SofiaTacuri]

Thank you for the amazing video! I am however having an issue where when I reopen power apps, the buttons on my component are gone and I have to add it again. Is there a way to fix this?

[@RezaDorrani]

Most welcome! I have not come experienced the mentioned 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

[@henryphilipson7449]

Did you find a solution to this? In my case, I had to click the 'Home', 'Tasks', and 'Details' buttons on the screen to reestablish colNav as a collection.

[@ubaidsiddiqui796]

Hi Reza. galNavigation default property set to LookUp(LeftNavigation.NavItems, Screen=App.ActiveScreen) is throwing an error (Expected Boolean Value). What's wrong?

[@RezaDorrani]

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

[@karthikm4851]

Hi Reza, I am using this left navigation option last 9 months. I learnt from you. Currently, this navigation scroll option is not working properly. When I scroll down , it's moves to starting position immediately. Have you faced this issue, can you provide the solution?

[@RezaDorrani]

Video description has link to download sample component. As for your issue, I will have to look at your component in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@rockwscuba]

Hello Reza, Thank you ever so much for these tremendously useful tutorials. I have been able to complete the whole tutorial. However, the colNav does not seem to work on the final setup. I end up getting a blank navigation. I am using an App in Canvas. I am no sure if that applies.

[@RezaDorrani]

Check to see if your colNavItems has data in it. 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

[@rubikarubi441]

@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

[@RezaDorrani]

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

[@migsmiguel9802]

Great Video Reza. Been getting a lot of help from your videos. Can I ask for your support please. Did all the instructions as instructed until 24:52 I reached a halt when my icons are not appearing. I already series of suggestions from the internet but I can't make it work. Used this codes as instructed: Table( { Title: "Dashboard", Screen: App.ActiveScreen, Icon: Icon.Home }, { Title: "Reports", Screen: App.ActiveScreen, Icon: Icon.Document } ) The message I receive from the formula bar when I enter ThisItem.Icon in the Icon Properties is: "ThisItem.Icon = This formula uses scope, which is presently not supported for evaluation" Appreciate your support in advance. Wishing you more subscribers!

[@RezaDorrani]

Icon can cause issues as it is a reserved Keyword. Change property Icon to propIcon and try. Table( { Title: "Dashboard", Screen: App.ActiveScreen, propIcon: Icon.Home }, { Title: "Reports", Screen: App.ActiveScreen, propIcon: Icon.Document } ) You would also have to update all references to Icon in component with propIcon

[@jhormangomez2268]

Fabulous!

[@RezaDorrani]

Thank you Jhorman.

[@FernandoGabrielRodriguez-mm8hl]

Hey, i really like this video I think the navigation bar looks great, is there a way I could hide some of the buttons under specific parameters? for example, I have a variable that captures the department a user is from, I want to hide some of the pages depending on that department that person is from.

[@RezaDorrani]

kzbin.info/www/bejne/nJOngntmq66mhJo

[@FernandoGabrielRodriguez-mm8hl]

@@RezaDorrani Thank you very much!, one last question, is there a way to use custom icons instead of the powerapps default icons?

[@RezaDorrani]

@@FernandoGabrielRodriguez-mm8hl Possible. You could use svg or images. Would need to replace icon control with image control in component.

[@rashimalhotra8642]

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.

[@RezaDorrani]

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.

[@rashimalhotra8642]

@@RezaDorrani Ok, Thanks! I appreciate your response.

[@dglalperen]

nice one !

[@RezaDorrani]

Thank you! Cheers!

[@djjain2581]

If I have to add an imgae in Icon, its giving me an error? How can I rectify that? Any help is appreciated

[@RezaDorrani]

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

[@syedabidaliabdi1273]

I added a Button in Gallery. OnSelect, I want to navigate the screen (value passing from SP List) but it is not working.. can you please help me with this

[@RezaDorrani]

You cannot get screen value from SP list. It has to be in Power Apps context.

[@ryanblumenow]

This works perfectly, with one problem - I followed all the steps exactly and everything works, including navigation, but the icons in the left menu do not show. Can you help?

[@RezaDorrani]

Make sure your are running the OnStart function of the App which would load the collection of navigation items.

[@ryanblumenow]

@@RezaDorrani Thanks! When I check collections, the collection does exist. But the icons do not load. I would really appreciate help debugging this, as it is the only aspect of the app which is not working :(

[@ryanblumenow]

I would dearly love a quick checkin via discord, and would be willing to compensate. I just really need this to work :(

[@RezaDorrani]

​@@ryanblumenow Your best bet would be to post this on the forums. powerusers.microsoft.com/ I myself go to forums in my free time.

[@RezaDorrani]

​@@ryanblumenow Your best bet would be to post this on the forums. powerusers.microsoft.com/ I myself go to forums in my free time.

[@keepitsimplenaruto6912]

Hi Rezaa Please help in Right Navigation Bar i cant able to expand

[@RezaDorrani]

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

[@keepitsimplenaruto6912]

@@RezaDorrani K thanks Reza

[@fam.giannakisflores7780]

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?

[@RezaDorrani]

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]

@@RezaDorrani i download but at the momento to import it it said that the files does no have a component

[@RezaDorrani]

@@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

[@fam.giannakisflores7780]

@@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?

[@RezaDorrani]

@@fam.giannakisflores7780 I have not tried launching other apps. Power Apps has a launch function. May be something is possible but Im not sure.

[@ResponsibleXI]

Hi Reza, I see a change in default Height property of the screen to Max(App.Height, App.MinScreenHeight). But you have Max(App.Height, App.DesignHeight). What is the difference between App.DesignHeight and App.MinScreenHeight?

[@RezaDorrani]

DesignHeight is the design height of the App. MinScreenHeight is a property which defines the min height. docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

[@ArabianBytes]

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.

[@RezaDorrani]

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.

[@JoseBarroca59]

Good Morning. How to format a number with thousands separator in Power Apps. Thanks

[@RezaDorrani]

I do not have a video reference for your scenario and 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

[@RezaDorrani]

I do not have a video reference for your scenario. I will recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.

[@BigLeafDropper86]

Genius!

[@RezaDorrani]

Thank you 😊

[@bdhundale]

Very informative video. I tried it immediately. But getting one issue after adding this to Canvas app. This component is not showing input property 'NavItems' when added to canvas app. Can you please help ?

[@RezaDorrani]

Did you create the input property? Check display name of input property. May be you created it with a different name.

[@bdhundale]

@@RezaDorrani yes I have created it. It is visible and working when I'm testing it in screen of Component Library itself. But it's not visible when it is added to Canvas app.

[@RezaDorrani]

If its part of a component library, ensure you are publishing the Component Library. Next, go to your App and ensure to update all components from the component library Check my video on Component Libraries - kzbin.info/www/bejne/gYOclWajmr5seKc

[@jaganm-xu1sx]

I am downloaded it from given GitHub, but while import into my apps its showed an error "Lef Nav Component Does not contain any component "

[@RezaDorrani]

The download is a component and not an app. You would need to go to components tab and import.

[@jaganm-xu1sx]

@@RezaDorrani Thank you for the quick replay, While importing the following component "Left Nav Component" in the Components tab Only, I am facing that error. Did I miss any other steps?

[@RezaDorrani]

@@jaganm-xu1sx I don’t think so. Not sure why it would not work. Try posting your issue with screenshots on the forums at powerusers.microsoft.com

[@jaganm-xu1sx]

@@RezaDorrani I created myself based on your videos, Thank you so much !. In the app how to get the active menu name?

[@RezaDorrani]

@@jaganm-xu1sx For that you can use output property. I have a playlist on components which has videos showcasing output properties. You can check those.

[@byuvaraj4734]

Can you please send me a link for Header Component

[@RezaDorrani]

Header component was built in this video - kzbin.info/www/bejne/aoqTl4qln9SefpI