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 KZread or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For KZread 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:
KZread- / @toluvictor
Patreon- / toluvictor
#powerapps #sidemenu #crashcourse #canvasapps #ui/ux #uidesign #collapsible

Пікірлер: 99

  • @Franklinvaz
    @Franklinvaz5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

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

  • @ElMoy
    @ElMoy5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    🫡

  • @bmxpei
    @bmxpei5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    Great to hear that.

  • @aysanhaghani5271
    @aysanhaghani527117 күн бұрын

    This is awesome! thank you so much!

  • @dominicputka638
    @dominicputka6384 ай бұрын

    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

    @toluvictor

    3 ай бұрын

    Great to hear! Thanks a lot

  • @MichaelDeBlasis1369
    @MichaelDeBlasis136921 күн бұрын

    ❤❤ TY again. This is great

  • @EllieCarter5225
    @EllieCarter52252 ай бұрын

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

  • @toluvictor

    @toluvictor

    2 ай бұрын

    Thank you so much😇

  • @wendymeyer1250
    @wendymeyer12504 ай бұрын

    Beautiful app designs. Thank you for sharing!

  • @toluvictor

    @toluvictor

    4 ай бұрын

    You're welcome

  • @n.p.garcia8956
    @n.p.garcia89565 ай бұрын

    Awesome as usual, thanks Tolu!

  • @toluvictor

    @toluvictor

    5 ай бұрын

    Thanks a lot. Glad you learned something 🙂

  • @nonoobott8602
    @nonoobott86025 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    You're welcome

  • @user-ce8ye1df7i
    @user-ce8ye1df7i5 ай бұрын

    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

    @toluvictor

    5 ай бұрын

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

  • @TheMKTube

    @TheMKTube

    3 ай бұрын

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

  • @EstebanTerrazas

    @EstebanTerrazas

    2 ай бұрын

    It would be great , I support the idea

  • @advillacorta
    @advillacorta5 ай бұрын

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

  • @advillacorta

    @advillacorta

    5 ай бұрын

    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

    @toluvictor

    5 ай бұрын

    Glad it helped!

  • @toluvictor

    @toluvictor

    5 ай бұрын

    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
    @lalasahebgaikwad11544 ай бұрын

    Great Video on Menu bar 🎉🎉

  • @toluvictor

    @toluvictor

    4 ай бұрын

    Thank you

  • @jtiger121
    @jtiger1213 ай бұрын

    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

    @toluvictor

    3 ай бұрын

    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
    @olisaemekaaghabuilo86885 ай бұрын

    Wonderful and awesome video

  • @toluvictor

    @toluvictor

    5 ай бұрын

    Thanks 😇

  • @raj45178
    @raj4517823 күн бұрын

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

  • @toluvictor

    @toluvictor

    9 күн бұрын

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

  • @hitasajil3869
    @hitasajil38695 ай бұрын

    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

    @toluvictor

    5 ай бұрын

    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
    @basehumax5 ай бұрын

    Thank you

  • @toluvictor

    @toluvictor

    5 ай бұрын

    👍

  • @Shijka_
    @Shijka_3 ай бұрын

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

  • @toluvictor

    @toluvictor

    3 ай бұрын

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

  • @jej5957
    @jej59578 күн бұрын

    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

    @toluvictor

    7 күн бұрын

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

  • @maggiethinyane
    @maggiethinyane2 ай бұрын

    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

    @toluvictor

    2 ай бұрын

    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

    @maggiethinyane

    2 ай бұрын

    @@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
    @erikefe005 ай бұрын

    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

    @toluvictor

    5 ай бұрын

    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
    @banzaille48335 ай бұрын

    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

    @toluvictor

    5 ай бұрын

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

  • @banzaille4833

    @banzaille4833

    5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    Happy to help

  • @diogoborges4276
    @diogoborges42764 ай бұрын

    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

    @toluvictor

    4 ай бұрын

    Hold ALT key while clicking to use preview mode

  • @CloudRafael
    @CloudRafael2 ай бұрын

    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

    @toluvictor

    2 ай бұрын

    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

    @CloudRafael

    2 ай бұрын

    @@toluvictor Thanks

  • @ArmandoCarrionT
    @ArmandoCarrionT10 күн бұрын

    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

    @toluvictor

    9 күн бұрын

    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
    @naNa-xn4fq2 ай бұрын

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

  • @toluvictor

    @toluvictor

    2 ай бұрын

    Hi. Both Tiers offer component download

  • @user-ib2fc9sd7p
    @user-ib2fc9sd7p5 ай бұрын

    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

    @toluvictor

    5 ай бұрын

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

  • @user-ib2fc9sd7p

    @user-ib2fc9sd7p

    5 ай бұрын

    I will play around with that setting.@@toluvictor

  • @user-ib2fc9sd7p

    @user-ib2fc9sd7p

    5 ай бұрын

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

  • @offthehookvideos1870
    @offthehookvideos187020 күн бұрын

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

  • @toluvictor

    @toluvictor

    20 күн бұрын

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

    @toluvictor

    9 күн бұрын

    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
    @ankithguptha51844 ай бұрын

    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

    @toluvictor

    4 ай бұрын

    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
    @Woodraft4 ай бұрын

    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

    @toluvictor

    4 ай бұрын

    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
    @EstebanTerrazas3 ай бұрын

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

  • @toluvictor

    @toluvictor

    3 ай бұрын

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

  • @user-ib2fc9sd7p
    @user-ib2fc9sd7p5 ай бұрын

    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

    @ReillyE629

    5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    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

    @ReillyE629

    5 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    That's great

  • @user-ib2fc9sd7p

    @user-ib2fc9sd7p

    5 ай бұрын

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

  • @teddyzakrzewski7216
    @teddyzakrzewski72165 ай бұрын

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

  • @toluvictor

    @toluvictor

    5 ай бұрын

    This was a color variable i set as a Named Formula

  • @teekleton
    @teekleton3 ай бұрын

    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

    @toluvictor

    3 ай бұрын

    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
    @konatesiakamounir87043 ай бұрын

    What is the colour code of the navigation menu?

  • @toluvictor

    @toluvictor

    3 ай бұрын

    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
    @hsrinivas7974 ай бұрын

    Anybody have issues with Access APP scope?

  • @hugoxoft
    @hugoxoft2 ай бұрын

    How to see hamburger button execution in editor?

  • @toluvictor

    @toluvictor

    2 ай бұрын

    I hold the Alt key before clicking

  • @s1hl3
    @s1hl35 ай бұрын

    How do I download this?

  • @toluvictor

    @toluvictor

    5 ай бұрын

    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

Келесі