How to create a Modern COLLAPSIBLE Side Menu in PowerApps

Подписаться 13 тыс.

Просмотров 31 тыс.

50% 1

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

Опубликовано:

6 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@Franklinvaz 7 месяцев назад

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

@toluvictor 7 месяцев назад

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

@user-ce8ye1df7i 7 месяцев назад

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 7 месяцев назад

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

@TheMKTube 5 месяцев назад

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

@EstebanTerrazas 5 месяцев назад

It would be great , I support the idea

@dpukkz_bbq 6 месяцев назад

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 6 месяцев назад

Great to hear! Thanks a lot

@rizkyardiilhami3565 Месяц назад

Thank you so much for the tutorial Mr. Tolu! I'm Junior PowerApps Developer currently as apprentice from Indonesia 🤩🤩

@jtiger121 5 месяцев назад

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 5 месяцев назад

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

@user-rs8sp2rx5q 15 дней назад

Download?

@EllieCarter5225 5 месяцев назад

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

@toluvictor 5 месяцев назад

Thank you so much😇

@xabierplazagarcia Месяц назад

You explain very well and your power apps are very nice!

@advillacorta 7 месяцев назад

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

@advillacorta 7 месяцев назад

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 7 месяцев назад

Glad it helped!

@toluvictor 7 месяцев назад

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.

@hitasajil3869 7 месяцев назад

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 7 месяцев назад

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

@bmxpei 7 месяцев назад

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

@toluvictor 7 месяцев назад

Great to hear that.

@jndvr Месяц назад

Great Video! But I have an issue again... I added 4 Screens to my app and therefore 4 times the component. I click on the burger menu, the side menu expands, then I click on another button for another page and then the menu compresses. If I then click on the last button its expanded again. Any idea what I can do?

@xabierplazagarcia Месяц назад

Activates the component's Scope mode.

@mohdmoyeed6787 Месяц назад

Could you please post a tutorial to navigate between screens for the same design

@nonoobott8602 7 месяцев назад

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

@toluvictor 7 месяцев назад

You're welcome

@kilaj1 2 месяца назад

Great tutorial, its following this to help standardize all of my power apps. One problem i ran into with the Light/Dark mode the Onselect is throwing an error for the variables "Unexpected characters. The formula contains 'PowerFxResolvedObject' where 'Ident' is expected." not sure where that's coming from

@kilaj1 Месяц назад

figured it out! had to add Set(varAppColorMode,"Light"); to App.OnStart...on to the next tutorial!

@Itsreallyeasytospell 18 дней назад

Im getting the same error here, did you manage to sort it out?

@lalasahebgaikwad1154 7 месяцев назад

Great Video on Menu bar 🎉🎉

@toluvictor 7 месяцев назад

Thank you

@jej5957 2 месяца назад

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 2 месяца назад

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

@raj45178 3 месяца назад

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

@toluvictor 2 месяца назад

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

@ArmandoCarrionT 2 месяца назад

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

@ElMoy 7 месяцев назад

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

@toluvictor 7 месяцев назад

🫡

@greatkingrat Месяц назад

Pure gold!

@thatsharepointdev Месяц назад

This is a great content! Thank you

@user-rs8sp2rx5q 15 дней назад

😊 cool

@wendymeyer1250 7 месяцев назад

Beautiful app designs. Thank you for sharing!

@toluvictor 7 месяцев назад

You're welcome

@user-ib2fc9sd7p 7 месяцев назад

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 7 месяцев назад

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

@user-ib2fc9sd7p 7 месяцев назад

I will play around with that setting.@@toluvictor

@user-ib2fc9sd7p 7 месяцев назад

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

@aysanhaghani5271 2 месяца назад

This is awesome! thank you so much!

@offthehookvideos1870 2 месяца назад

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

@toluvictor 2 месяца назад

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

@MichaelDeBlasis1369 3 месяца назад

❤❤ TY again. This is great

@maggiethinyane 4 месяца назад

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 4 месяца назад

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 4 месяца назад

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

@n.p.garcia8956 7 месяцев назад

Awesome as usual, thanks Tolu!

@toluvictor 7 месяцев назад

Thanks a lot. Glad you learned something 🙂

@CloudRafael 4 месяца назад

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 4 месяца назад

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 4 месяца назад

@@toluvictor Thanks

@VikassinghRajput-hd9on 3 месяца назад

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 2 месяца назад

@Shijka_ 5 месяцев назад

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

@toluvictor 5 месяцев назад

It's available to channel members. Join on my YT homepage or use this link ru-vid.com/show-UCJIsFUAkQ1XlDtTTYUFK16Ajoin Once you've joined all download links will be in the membership tab

@Woodraft 7 месяцев назад

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 7 месяцев назад

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)

@naNa-xn4fq 4 месяца назад

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

@toluvictor 4 месяца назад

Hi. Both Tiers offer component download

@ankithguptha5184 7 месяцев назад

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 7 месяцев назад

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

@olisaemekaaghabuilo8688 7 месяцев назад

Wonderful and awesome video

@toluvictor 7 месяцев назад

Thanks 😇

@teekleton 5 месяцев назад

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 5 месяцев назад

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

@diogoborges4276 7 месяцев назад

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 7 месяцев назад

Hold ALT key while clicking to use preview mode

@hugoxoft 4 месяца назад

How to see hamburger button execution in editor?

@toluvictor 4 месяца назад

I hold the Alt key before clicking

@EstebanTerrazas 5 месяцев назад

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

@toluvictor 5 месяцев назад

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

@teddyzakrzewski7216 7 месяцев назад

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

@toluvictor 7 месяцев назад

This was a color variable i set as a Named Formula

@user-rs8sp2rx5q 15 дней назад

Download?

@erikefe00 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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

@banzaille4833 7 месяцев назад

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

@toluvictor 7 месяцев назад

Happy to help

@basehumax 7 месяцев назад

Thank you

@toluvictor 7 месяцев назад

👍

@Soulebi03 2 месяца назад

Great UI! Btw im having trouble what If I wanted to set it to expanded as default? Thanks a lot! Subscribed and liked your videos :)

@toluvictor 2 месяца назад

Hi. 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 your menu when the app is opened

@toluvictor 2 месяца назад

What I mean is that every component has a property called OnReset. Similar to how forms have OnSuccess or how buttons have OnSelect. Inside that property you can then set your variable to whatever default you want. Then in your main app, in the OnStart property, simply reset your component, this will trigger the code you added in the OnReset property of the components

@Soulebi03 2 месяца назад

@@toluvictor i did set the onreset of the component to set menuexpanded to true but I cant reset it on the onstart? How do I do that??

@toluvictor 2 месяца назад

Simply use the Reset() function. Eg Reset(collapsibleMenu);

@Soulebi03 Месяц назад

@@toluvictor I did study what you said. however you cannot reset a custom component an error wil occur saying "Reset cannot be used in a property of the object"

@konatesiakamounir8704 6 месяцев назад

What is the colour code of the navigation menu?

@toluvictor 6 месяцев назад

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 7 месяцев назад

Anybody have issues with Access APP scope?

@user-ib2fc9sd7p 7 месяцев назад

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 7 месяцев назад

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

@toluvictor 7 месяцев назад

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 7 месяцев назад

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

@toluvictor 7 месяцев назад

That's great

@user-ib2fc9sd7p 7 месяцев назад

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