How to create a Modern COLLAPSIBLE Side Menu in PowerApps

This is the second video in a 3 part video series teaching how to create modern-looking side menus in PowerApps. This video teaches you how to build a Modern looking Collapsible Side Menu in PowerApps
Follow me on LinkedIn: / victorsanwoolu
Full Modern Power Apps Side Menu Playlist: • PowerApps Modern Side ...
Video ID: #PP_0009
📥 App and Dataset Download for Members (on KZbin or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZbin Members: Check the membership tab on the channel page for the download links.
For Patreon Members: Download links will be available on the Patreon Page
🎁Not a member yet. Join the Tolu Victor Community:
KZbin- / @toluvictor
Patreon- / toluvictor
#powerapps #sidemenu #crashcourse #canvasapps #ui/ux #uidesign #collapsible

[@Franklinvaz]

You are so creative.. i recently found your channel.. man, you are killing it... Thanks!

[@toluvictor]

Thanks for watching the content. I hope you were able to learn something 😁

[@ElMoy]

Waiting for the next part my friend, amazing gob and great programming thinking! Pretty sustainable

[@toluvictor]

🫡

[@bmxpei]

Implemented these concepts right away!! Patiently waiting on the third video of the series 🙂

[@toluvictor]

Great to hear that.

[@aysanhaghani5271]

This is awesome! thank you so much!

[@dominicputka638]

As far as PowerApps go, these are god tier. Loving the Text Overlay of the settings during this video, this was really helpful when trying to replicate some of the settings. Keep up the great content.

[@toluvictor]

Great to hear! Thanks a lot

[@MichaelDeBlasis1369]

❤❤ TY again. This is great

[@EllieCarter5225]

Thank you for showing the parameters!! You're amazing! All of your UI Design is great.

[@toluvictor]

Thank you so much😇

[@wendymeyer1250]

Beautiful app designs. Thank you for sharing!

[@toluvictor]

You're welcome

[@n.p.garcia8956]

Awesome as usual, thanks Tolu!

[@toluvictor]

Thanks a lot. Glad you learned something 🙂

[@nonoobott8602]

I've learned so much from your channel. Thanks for sharing

[@toluvictor]

You're welcome

[@user-ce8ye1df7i]

Can you please show how to build responsive application with same Modern UI. I'm liking your content need to check the way you do to make application responsive

[@toluvictor]

Alright. If it gets enough traction, I'll work on a video.

[@TheMKTube]

Yes that would be amazing! How to make responsive apps that look like modern desktop resolution type apps and not like tablet apps!

[@EstebanTerrazas]

It would be great , I support the idea

[@advillacorta]

Great tutorial! I have just finished implemented it! Great work! 🎉

[@advillacorta]

Im having an issue. From time to time when I expand the menu, the label for the name of the menu does not show. A workaround is to delete the component from my screen and put it again and reconfigure it but, is there a way to avoid this to happen?

[@toluvictor]

Glad it helped!

[@toluvictor]

Make sure that the positional values (X,Y,Width ,Height) of the label is set correctly. Also check the visible property and make sure it isnt mixed up somehow. If you still face the issue, it might be a client end bug, so just save your work and do a hard refresh of your browser page.

[@lalasahebgaikwad1154]

Great Video on Menu bar 🎉🎉

[@toluvictor]

Thank you

[@jtiger121]

Joined the channel just to see how that side menu and layout was done. Very nice, great work. I do have a problem though, the submenus are not displaying in expanded mode. I have not changed the cavas based solution at all, just imported into a new canvas app. It was vid11 canvas app only

[@toluvictor]

Hi, this is for the collapsible menu. Its the multi-level menu that has the sub-menu. So you can download that one instead

[@olisaemekaaghabuilo8688]

Wonderful and awesome video

[@toluvictor]

Thanks 😇

[@raj45178]

Thanks for the wonderful lesson. Do you have any video to teach how to create a collapsible side navigation in Power Pages ?

[@toluvictor]

Hi, I currently dont have one. Maybe Ill do one in the future

[@hitasajil3869]

Great video! Is it responsive on all devices? Could you also show how it fits on tablets and mobiles? Additionally, is there a reason for using a non-responsive container instead of a modern tab list for adding icons for menu?

[@toluvictor]

Hi. I haven't built it to be responsive, however because of the way it was built (using containers),it is quite easy to tweak it to look great on all devices. At this point it will only look good on Web and tab. This method also gives you more customization compared to the modern tab list

[@basehumax]

Thank you

[@toluvictor]

👍

[@Shijka_]

Very nice app with nice design. You are amazing! How can I download your app?

[@toluvictor]

It's available to channel members. Join on my YT homepage or use this link kzbin.info/door/JIsFUAkQ1XlDtTTYUFK16Ajoin Once you've joined all download links will be in the membership tab

[@jej5957]

Hey there! Just wanted to say that I'm really loving your design layout, it's super user-friendly and modern. I could use some help though - I ran into some issues when I tried to input the sidebar component into a screen. Whenever I expand the sidebar, there's a lag in loading the text, and when I minimize it, the icon reloads with a lag as well. Strangely, I don't encounter this issue when using a tablist. Any ideas on how to fix this?

[@toluvictor]

Hi. Please make the DelayItemLoading property on the gallery is set to false. This should make the gallery containing the menu load faster

[@maggiethinyane]

Thank you for another awesome tutorial. The side menu(left side) works perfectly on the main screen but hides behind the main page(right side) when I navigate to other screens when expanded. what could be causing that

[@toluvictor]

Set the width of the parent container of your menu to depend on your component. For example set width of MenuContainer to collapsiblemenu_Component.Width. This way when your menu expands, the parent container expands with it.

[@maggiethinyane]

@@toluvictor Thank you so much. That worked. I must have missed the step. God bless you for this good work and empowering us all.

[@erikefe00]

I am interested in your work. I have a question for you. Can the apps be made available to external users where they can login in with gmail or facebook or custom login with OATH capabilities?

[@toluvictor]

No these require the user to have an account within the tenant. For external facing apps, you'd need to create Power Pages applications. Which are essentially like websites

[@banzaille4833]

Hi ! Great tutorial ! But do you know why when I go from a top Icon to a buttom Icon I have an effect of spin Icon ?

[@toluvictor]

I mentioned this in the first part of the series. You just need to set delayitemloading property of the gallery to false

[@banzaille4833]

@@toluvictor Sorry I didn’t notice. Thanks !

[@toluvictor]

Happy to help

[@diogoborges4276]

How do you interact with the icons while in editing mode? I am only able to select, not able to click and side expanded and compacted

[@toluvictor]

Hold ALT key while clicking to use preview mode

[@CloudRafael]

Very good, but in my bar each page behaves independently, if one is expanded and the other does not remain that way. How did you get everyone to expand at the same time?

[@toluvictor]

Hi make sure "Access App Scope" is turned on in your component, this would make "varMenuExpanded" a global variable rather than a local variable. That way expanding the menu on screen 1 would also expand on other screens and vice versa.

[@CloudRafael]

@@toluvictor Thanks

[@ArmandoCarrionT]

How does the menu keeps expanded or contracted during navigation? I've tried mine based on your tutorial but each of them have their own state. If it's contracted in one screen, and navigate were its expaded, its expanded anyway

[@toluvictor]

Hi, make sure "Access App Scope" is turned on in your component, this would make "varMenuExpanded" a global variable rather than a local variable. That way expanding the menu on screen 1 would also expand on other screens and vice versa.

[@naNa-xn4fq]

if I want to download the component in this video，just need add your member tier1 or 2?

[@toluvictor]

Hi. Both Tiers offer component download

[@user-ib2fc9sd7p]

Is there a way for the dark mode to work when the component is created in a component library. The App Scope toggle is not available in the component library.

[@toluvictor]

Yes. In that case. Use the first method. Create a behavior custom property

[@user-ib2fc9sd7p]

I will play around with that setting.@@toluvictor

[@user-ib2fc9sd7p]

Are there any recommended resources out there to expound on how to use the enhance component feature?

[@offthehookvideos1870]

Say I wanted the menu to be expanded when the app starts. Do I need an another custom input property?

[@toluvictor]

No. You just need to set the OnReset property of your component. Make it set your variable to open and then in the OnStart of your app Reset the component. This will more or less open the your menu when the app is opened

[@VikassinghRajput-hd9on]

Hi Tolu, I've followed your video to create collapsible side menu and everything works as expected except one thing below as : When I'm on the Product screen and I click on hamburger Icon to Expand the menu it works and so on when I Navigate to the Appointment screen the state of the expand/collapsible not maintained across different screen. If you can please share Is anything missed out or How Can I resolve this problem ?

[@toluvictor]

Hi, make sure "Access App Scope" is turned on in your component, this would make "varMenuExpanded" a global variable rather than a local variable. That way expanding the menu on screen 1 would also expand on other screens and vice versa.

[@ankithguptha5184]

How to upload multiple files to dataverse record and save it to share point doc library.And send notification email to user in that particular dataverse record with multiple documents attached in the email

[@toluvictor]

Hi this would mostly be done in Power Automate. But I think the easiest way would be to create a document library in SP then also add a column in that library and you'll use that to track your dataverse record. In your app, use an attachment control to enable users to upload files and onsave of their form trigger a flow to save that file to your sharepoint list. In the same flow you can do any other automation tasks you need to do e.g. sending mails

[@Woodraft]

I never changed my icon colors, so how do I add the collapasable menu Icon. I keep getting "invalid argument type (color) expecting a text value instead" error. Along with Name isn't valid. 'BaseIconColor_Text' isn't recognized.

[@toluvictor]

The color to supply to an SVG can only be text values or variables and not a PowerApps color value/variable. So, "Blue" instead of Color.Blue and "RGBA(230,230,230,1)" instead of RGBA(230,230,230,1)

[@EstebanTerrazas]

When I duplicate the component, the gallery containers are not duplicated and it gives an error.

[@toluvictor]

This might be a studio bug. Consider refreshing your browser and retrying. Save your work first though

[@user-ib2fc9sd7p]

I have also noticed, once the component has been placed in an app and the custom navigation table appropriately tweaked, if the expand button is pressed and then i navigate to another screen via the sidebar the sidebar navigation collapse but then expands back if I go back to the screen it was originally expanded on. Is this something I have set up incorrectly or something that can be tweaked?

[@ReillyE629]

^ I’m having this same issue. Were you able to find a solution?

[@toluvictor]

If I understand your issue clearly, you are basically saying that the expansion states of the menu on different screens are independent of each other, so if you expand on screen 1, it isn't expanded on screen 2 right? If that's the case, I'm also not sure what's causing your issue since I don't have much info, but make sure "Access App Scope" is turned on in your component, this would make "varMenuExpanded" a global variable rather than a local variable. That way expanding the menu on screen 1 would also expand on other screens and vice versa.

[@ReillyE629]

@toluvictor Genius!! That fixed it! Thank you so much 🙌

[@toluvictor]

That's great

[@user-ib2fc9sd7p]

So with enhanced components on should that varMenuExpanded be available as well if we are not using the App Scope toggle?

[@teddyzakrzewski7216]

I don''t see where is highlightColor on your video at 16.08 min ( in formulas!!)

[@toluvictor]

This was a color variable i set as a Named Formula

[@teekleton]

When my app first starts up, my side menu displays the text inside the containers, when it's collapsed. Anyone know why that is?? Thanks

[@toluvictor]

Hi consider checking the visibility of the menu label. Its visible property should be set to true only when the menu is expanded. Check 8:58

[@konatesiakamounir8704]

What is the colour code of the navigation menu?

[@toluvictor]

Hi. The blue I'm using is "RGBA(115,131,176,1)" and the yellow is "RGBA(254,189,47,1)". Channel members have access to the full app, so you can join to have an Indepth view of the built app.

[@hsrinivas797]

Anybody have issues with Access APP scope?

[@hugoxoft]

How to see hamburger button execution in editor?

[@toluvictor]

I hold the Alt key before clicking

[@s1hl3]

How do I download this?

[@toluvictor]

Please check the membership or community tab of my channel for the video post. It has a Google link you can use to download the solution