How to create a Modern Compact Side Menu in PowerApps
Вставка
- Опубліковано 22 лип 2024
- This is the first video in a 3 part video series teaching how to create modern-looking side menus in PowerApps. This video focuses on a minimalist compact side menu
Follow me on LinkedIn: / victorsanwoolu
Video ID: #PP_0008
Full Modern Power Apps Side Menu Playlist: • PowerApps Modern Side ...
📥 App and Dataset Download for Members (on UA-cam or Patreon):
Members get exclusive access to download the apps, flows, or components featured in this video!
For UA-cam 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:
UA-cam- / @toluvictor
Patreon- / toluvictor
Chapters
0:00 Intro
0:17 App Intro
2:28 Initialization and Named Formulas
5:22 Creating the Component
20:05 Adding it to the Screen
#powerapps #sidemenu #crashcourse #canvasapps #ui/ux #uidesign - Наука та технологія
Have you started using Named Formulas for static data initialization on your app
When I try to create new variables in formlas I get an error underlining the variable saying name isn't recognized
Make sure the format is correct.
Variable Name , equal sign , data and semicolon
Also, check the previous named formulas to ensure you've closed them with semi colon. That can also cause your issue
@@toluvictor Thanks man! I'll give it a try. You got yourself a new member :)
@banihas22 thanks for supporting the channel 😊
@@toluvictor I found the problem. In the OnStart we need to have the following Set(varAppColorMode,"Light");
You're incredible! Your UI walkthroughs are by far the most comprehensive I've come across. Thank you so much!
Thanks a lot for the kind words😇
Tolu, this video was extremely well done, I'm never using another navbar again! Please keep up this amazing content!!
Thanks a lot Adam. 🤝
Can't wait to see the part 2 of this series!
👍
I have been waiting for this collapsible side bar tutorial. Thanks!
Great 👍. This video focuses on the base side menu design. In the next video of the series, we would add functionality to collapse or expand it
Im a beginner,I was able to follow from start to finish. Took me a while but stuck to it. Will be watching and trying out the rest of the series. Thank you so so so much.
That's great. You're welcome
Well done bro besides your great content, also you are amazing teacher in terms of explaining to us. Thank you.
🤝
You are amazing! This helped me a lot, thank you so much for all your effort on this incredible video!!!
Thanks for the kind words
I discover your channel for the first time, great content !
😊 Thanks
Love your ideas - very creative and always seeking to push the envelope
Thanks so much!
Amazing. Thank you for sharing Victor.
😇 You're welcome
I need to work on the named functions for some reason the side menu isn't recognizing the variables. But overall, awesome video. I had to pause it often to follow along but extremely good. Thanks
Your PowerApps UI skills are the best on UA-cam
😅 Thanks
that app is a thing of beauty. thanks for sharing!
Thanks
Super and useful, thanks a lot. I used this function instead of adding CurrentMenueID for each screen to change the container fill ----->> If(App.ActiveScreen = ThisItem.PageNavigation,RGBA(255, 255, 255, 0.9),Color.Transparent) works perfectly.
Yoooo!!!. That's smart. Nice tip👍
Finally created something worthy to view😂
Thank you
😂😂 bro I don slow down since na
You're going to get more popularity soon🤘🤘🤘🤝🏻🤝🏻🤝🏻
Your new Subscriber😎
Lol. Thanks a lot😅
video loaded. Watching again to catchup all details. Thanks dude
👌
me too! Love the videos just a bit too fast for me. :)
I'm now making conscious effort in my newer videos to make it slower paced😅
@@toluvictor - Thank you so much!! You have great material.
Thanks a lot. This is great, gives new ideas and helps a lot.
Glad to hear that!
Amazing content🎉❤. I would love to see a video on mastering containers.🙏
Thanks.
If it gets enough traction, I'll work on it.
Hi Question, I am trying to do the pressed fill in the buttons but it doesnt work and i dont see any change in the color. When i press the ALT button, it works for hover but idk how do i press the button?
amazing!! Thanks.
Glad you liked it!
One of Powerapps GOAT 🐐🐐
Lol. Maybe one day
wow really nice content
Thanks 😊
Hi Victor,
I discovered your channel a few months ago. You're doing a really good job. 👍👍
Can't wait to see more ! 🤣
(I think you'll win a new subscription, let me think about it some more ) 🤔
Thanks. 😅😅
Excellent video
Thank you very much!
bro is just a power apps GOD
AY YOOOO 🤣🤣🤣🤣. Calm down bro. Anyone can do this.
Thanks tho
True true
Nice video, I followed your video to create my own component please can you explain how I can navigate from one screen to another. it is not working from my end.
This is great! But I am having error when navigating to screen, it is not working.
Amazing content victor … 🥶
😊 Thanks
You are so good bro...
Thanks 😅
Wow. Great work! Inspiring, but my head hurts thinking about it 😂
That's fine 🤣🤣. We all start somewhere
Amazing content, thx
You're welcome 😊
I'm having an issue importing the component into an app. Creating the component all went well. But, when importing, I get "Function * returned a non-finite number". I have no idea where to start with this one.
If I edit the component as a copy inside the app, everything under the Icon gallery is missing (both static containers, the button, and the image). So I'm guessing the problem is somewhere in there?
Gr8 video !! I didn't understand how do you put the logo image as 'Wess Logo Icon'
I created a custom property for the component and stored the logo inside that custom property. I then referenced the custom property in the component. Check 7:40
Some how I cant see icons after adding it in Image inside container 14:04
can you transcribe the codes you used for formula and icons so that its easier to follow?
Thanks Victor ❤
You're welcome
Your Videos are amazing. Been subscribed for a little while now and have learned so much.
In this video I ran into a slight issue. When I add the container for the gallery it will not nest inside the gallery. What am I doing wrong?
I actually just figured it out from another video of yours!
Looking forward to more of your videos.
Hello.
Thank you for opening up a universe of development possibilities to us.
We are waiting for the second part of the side menu development.
If I understand you correctly. Did you ask if the video “Adaptive Containers” would be interesting?
I confirm, yes, the topic is Adoptive Application Design. Very interesting and promising.
I have a question.
Are you planning to open a powerapps training course?
Great.
At the moment, I have no training course, but I'm considering it in the future
Hey, Victor! Thanks again for this great video! Just a suggestion:
You speak a little bit quickly and often the video frame is ahead of what you say, which makes it difficult for those who are watching and trying to follow along with the video. Try to improve at this pont if its possible! Thanks for all!
Thanks for the tip
Is there a video set Formulas tutorial?😅 3:49
can u do a video on the dark and light mode
Hi, I loved the video! Just a doubt, how are you navigating to different screens? Are we giving any formula in OnSelect property of button?
I added a sreen variable to the menu data source and on click of the menu item, the OnSelect is set to Navigate to that screen.
This way the navigation is not hardcoded and can be used for any screen just by modifying the datasource
@@toluvictor thank you so much!!
I admit that I cannot follow 100% of your instructions 😅. However, I still got many thing.
I can
use bootstrap icon.
create side bar which collapsible and highlighted for the current screen!. Thanks.
That's great. Looking back, my pace was really fast in this video. I've slowed down in my recent videos
AMAZING VIDEOS! Wow! Subscribed. I am trying to build collapsable side menu which should be scrollable as well, can you please share some tips? I understand the collapsable menu part, trying to figure out how to make it scrollable, I have a lot of links in the side menu.
You actually don't need to do anything extra for the collapsible menu. Since we are using a gallery, once its items are more than its size its automatically adds scrolling. As for the compact menu, since we have made the gallery size dependent on its content, first turn on flexible height to make it fill the available space and then once your item numbers exceeds that, it would add scrolling
@@toluvictor A BIG thank you! Huge respect. I really appreciate you taking the time to share this valuable tip with me. :)
Top and inspiring content! Do you think it's possible to have kinda "hot editable table" in canvas apps (= doesnt require save button or open a details pane) - similar to the editable grid in model driven apps? And as far as I know, there is no way to automatically update a table when multiple people are working on it and someone updates a row?
Yes this is possible. In the gallery, you simply use input controls like text inputs or combo box etc. And then in the OnChange property, you simply write a patch function to update that column for that row in the data source. As for the automatic updates, you can use a timer control that refreshes the data source based on your set interval. However its worth it to note that this method will make multiple call to the data source
I really enjoy your content bro. They are always inspiring and challenging.
I'm currently a power apps developer for a company and I would love to have a way to contact you so we can discuss on somethings.
What is the best way to meet you?
Great video Tolu! I have a probelm I hope you can help me with! On edit, the Menu is working, but when i publish the app and play the app, the menu is not visable, only the logo is visable. Menu content is in the "Named Formulas" property on AppStart like yours. Do you know what the problem can be? I have enabled "Access app scope" on the component.
Hi, not sure what might cause this for your but check the positional values of the menu items.
Sometimes the positional values are not in sync. For example the "X" property value in the formula bar at the top is different from the "X" property value in the properties panel on the right. In some cases, the formula bar value might be 40 while the value in the properties panel is 0. The formula bar value carries higher priority, so in those case 40 will be the X value hereby shifting your control to the right and hence make it not visible in play mode.
To resolve this change the properties panel value to any other number and then change it back to your desired value. That should sync up the values
Can you pls share the menu schema in the comment for me to try your menu?
Excellent tutorial and video. I have a question, I would like to know how we could implement this component, when there are different user levels? Example: Admin, Normal User, Boss, etc.
I tried to create it with an If in formulas, but it gives me an error. Is there any other way to do it? Or could you give me some advice?
You actually only need a few small changes.
1. Setup your user role variable in the Formulas or OnStart property. This is the variable you will query to know the logged in user's role
2. Add a custom property to the component to get thus user role
3. Add a new column to the menu content "MenuRole". It will be an array variable. An example would be ["Admin","Sales","HR"]. Add in any applicable roles for that menu item
4. Modify the menu gallery by adding a filter to check if the logged in user's role (which is a custom property), is IN "MenuRole". This would then only show menu items for the current role
@@toluvictor Wow you are a goat🔥🔥!
Everything worked perfect for me, except that in addition to your steps I also added the nested IF's in the customNavigation I had in formulas (just like the example in your video). Thanks!!!
bro, dont forget about the containers videos i would think we would all love to see watch it like it and then subscribe
Thanks for the tutorial. I just have one question. I have added the component to a new screen and initialized the MenuConten with the same customNavigation but the component does not show all the items in this screen. Is there anything I am missing? Thanks in advance
First check if the menu items show on the component page to be sure there is nothing wrong with your component build. Then after initializing the menu content make sure to add it to your component's custom property.
Also make sure the width and height fits its parent container, because part of the side menu might be cut out if its bigger
@@toluvictorThanks for the help. I found the error and now it is working! Great Job!
Great content - any chance in the future you will be releasing any paid courses for full end-to-end PowerApps development training?
Hi.
It's something I'm considering. However I feel I still have a lot to learn as per creating Educational videos and disseminating my knowledge in a simple way. Basically, once I feel the quality of my UA-cam videos have gotten to a good enough level, I'll consider making a paid course
This is on Image control
"data:image/svg+xml;utf8, " & EncodeUrl(
LookUp(customIcons, IconName = "Resource Management").IconData
)
I am not able to create side nav bar because of it
Hi
please note that data outside the component cant be read by the component except. "Access App Scope" is set to true.
It seems like you're trying to access customIcons which is a variable outside your component.
Thats why I used placeholders in the component build and then added the actual icon outside the component. I explained more on this in part 2 of this series
What Program were you using at 4:27 to replace the " with ' very Easly?
I used Sublime Text. But you can use any code editor, even Notepad
can you help me, my problem is when moving pages it runs smoothly, but the color of the sidebar icon does not change and remains static, thank you
Hi, make sure the whichever variable you use to set the active menu is set correctly. Check 22:19
Great content, are you going to do the light mode and dark mode toggle as well?
Definitely. It's coming in part 2 of the series
nice!!
I lost the visibility of some of my icons. I tried to copy what you did with "CustomIcons" and "customNavigation'" Tables before assigning MenuContent = customNavigation. What could I have done wrong? I also tried setting customNavigation to the same table I used in the Component. The Icons are visible but the icons dont fill when selected
Hi, make sure you have 2 versions of your icons. One filled and one outline. Then you make the fill icon visible when a menu item is active.
Please rewatch 18:54
When adding the non-responsive container at 12:15 the container keeps defaulting outside of the gallery. I tried to cut and paste but it won't go inside. Any ideas why I can't add child non-responsive containers to the blank vertical gallery?
The trick is to first select the gallery on the canvas, then select the template (the first row in the gallery) after selecting that, anything you insert will surely be in the gallery.
@toluvictor hi i need your help as i am trying to put the container inside the gallery and u mention that it is due to the properties panel is different from formule bar. how do we fix it like where as i cannot seem to solve it .please help
click the pencil icon in the gallery, then insert
How did you update CurrentMenuID, what time in the video is that setting updated. You set it to '1' when you created it, but you have not shown how you then set it up to be changed dynamically when a menu icon is clicked. I've worked it out myself but can't see it in your video.
Hi. Check 22:20.
When I needed to use the "substitute" formula I had to use hexadecimal values, rgba doesn't work
Make sure you replace it with text value not actual color value or variable
'access app scope' in PowerApp is missing in my version, any other way to set Dark mode function?
Hi, you can consider creating "event" custom properties. Check 14:30 in the part 2 of this series. ua-cam.com/video/Izl-KTv5CHI/v-deo.html&lc=Ugy9Nb2G08AOGQ9u8_Z4AaABAg
Great video! I didn't understand when you said about issues into gallery (other languages). You said too fast. What I have to change ? My language is portuguese (Brazil), and my component is with issue because of this.
Hi. Sorry about that, I'm slowing down in my newer videos😅.
What I said was that sometimes the positional values differ. For example the "X" property value in the formula bar at the top is different from the "X" property value in the properties panel on the right. In some cases, the formula bar value might be 40 while the value in the properties panel is 0. The formula bar value carries higher priority, so in those case 40 will be the X value hereby shifting your control to the right.
To resolve this change the properties panel value to any other number and then change it back to your desired value. That should sync up the values
Thank you!!@@toluvictor
The SVG concept I'm keen to know how to use it
Check out my latest video
ua-cam.com/video/0j0SePL60m0/v-deo.html
Hey there, i have a Question:
I am currently learning to use PowerApps but it appears that the Components Tab is not available, either anymore or in the webversion. I am not sure if it was just placed elsewhere or if i have to activate anything but i created a Dev-Environment, then inside created a Solution and in that Solution i created an App. Now i do all of that in the webview and i cant seam to find the components tab. Was it changed lately or smth?
If i create a Powerapps trough the Teams interface tho, i see the components tab.
Would really appreciate some help
Hi. This must be a client side bug on your end. Try doing a hard refresh of your browser page (Ctrl+Shift+R)
@@toluvictor Hey, it doesnt seam like a Bug. I realoaded the page. Its still not there when i'm in the App editing view. I can only see it when i create a Component Library. In the Component Library, i can create Components as usually, but i cant create any without a library in the webview. If i create a Powerapps trough the Teams UI tho, its possible. Its really weird. But it might be an Update from Microsoft.
Are you still able to create Components within a Solution without creating a Components Library?
Man, after changing the Formula of the Menu Content property to the table "customNavigation" the selected items stopped being highlited and without the selected background color
Do you have an idea why?
Forget... because of uppercase and lowercase in a variable... 🥵
Great tutorial, where do you put varAppColorMode mode though?
In the next video of the series, the side menu contains a color mode switch for thale app. I'm using the variable as a custom property on that side menu component.
@@toluvictor can't wait! Thanks to your dedication to share these knowledge! Much appreciated :)
So i have this bug when i finish setting up my navigation. Everytime i click on a button it first navigates to home page and I have to click on the desired button a second time and only then the app navigates to screen i want . Can you please help me fix this
It seems that the menu content variable is correct only on the HomePage, make sure others are correct too
Where do you declare the variable varAppColorMode?
Hi. This was done and explained in part 2 of this series
in the formula bar when i type varAppColorMode it shows an error . how can i fix it?
That is a custom text variable I created in my app's onstart property
Bro i am getting error when i am trying to lookup the table of svg in my formulas bar into components .. but its working for screens .. same formula no difference
Hi components are independent of app variables if access app scope is not. So that's probably a reason
Also make sure there are no typos
The varAppColorMode in Formulas throws an error says "variable isn't recogized"
You need to create the variable first. I showed this in the second video of this series so you can check it out. Basically, in the OnStart property, I used the Set() function to initialize my variable.
Wow, great video, had to subscribe for real!
One thing, you talk and go through some of the explanations and video instructions to fast in some places, there's no need to go that fast, just slow down a little. We not going anywhere.
Awesome, thank you!
Hello, can you briefly give instructions on how to use the downloads? I am a member and I have the files but it took me few hours to figure out how to use them and I failed 😅
Hi Omar. The file contains a PowerApps unmanaged solution. To add it to your PowerApps environment, simply import like you would normally import a solution (Go to the solution page and import). After import, you should now have the app from this video in your environment. You can then work with it as needed, whether you want to import the side menu on another one of your apps or you want to play around with to see exactly what has been built and how to build it.
I cannot add the container nested into the vertical gallery, is this some sort of bug? i have tried ctrl+x and cntrl+v into gallery as well but it just does not nest
Hi, I've encountered this before. Save your work and refresh your page then it should work
I've got the same issue, doesn't matter if I refresh the container just doesn't go in the gallery
hi. the table formula shows error? what did i do wrong?
Im not sure based on the little info youve provided but please make sure the syntax is correct
Check official documentation here: learn.microsoft.com/en-us/power-platform/power-fx/reference/function-table
😍😍
where's the named formula ?
problem with circular reference between property on heigt of menuitem
Circular reference means item A is referencing item B for a property and item B is referencing item A for a property. To resolve this make sure at least one has an actual value or is referencing another item that has an actual value.
I'm not too sure which part you're having an error in your case but make sure the menu item is getting its height from its parent container and then that parent container should be getting its height from the gallery's template height
Resolven i did not replace the content in templatesize by 50 @@toluvictor
once I changed the MenuContent to customNavigation my icon stays black and won't switch to yellow...Can someone help me?
The SelectedIconColor_Text seems not to work for me in the screen. If I paste the RGBA in there it works fine...
Hi, make sure the "SelectedIconColor_Text" variable is a text variable and not a color variable
customIcons = Table(
{
IconName = "Resource_Management",
IconData = "
"
});
Hi
please note that data outside the component cant be read by the component except. "Access App Scope" is set to true.
It seems like you're trying to access customIcons which is a variable outside your component.
Thats why I used placeholders in the component build and then added the actual icon outside the component. I explained more on this in part 2 of this series
What version of powerapps did you used for this?
I cant remember but it was the default version as at January 2024
Hi Tolu, Can you share the component download link!
Hi
This is available to the UA-cam channel members and Patreon Members
Where can i find the table for the icons?
I got the icons from the Bootstrap icons site
Thankss
Hi, you have created this using Canva?
No I haven't
how to buy or get your modern template , it hard to catch all😅
Hi. Thanks for the support. Sorry for the poor pacing, looking back I was unnecessarily fast in this video
The templates are available for download on my Patreon - www.patreon.com/ToluVictor
It is also to UA-cam channel members, you can click the join button on my UA-cam page. Once you've joined, check the membership tab on my UA-cam Page. There is a post for each video. So, look for the particular one you want, expand the post and there will be a Google Drive link to a folder that contains the files.
how do i download the template?
Hi. Please check the membership tab on my UA-cam Page. There is a post for each video. So, look for the particular one you want, expand the post and there will be a google drive link to a folder that contains the files
My friend your videos are amazing but try to be a bit slow..you are too fast in coding
Yeah, I noticed I was way too fast in this video. My pace in the recent videos is way slower and easier to follow
Hi
👋
I like your videos, but unfortunately, you are too fast man! You event didnt give us time to walk through with you.
Lol. Sorry about that. I've slowed down in my more recent videos
@@toluvictor Thanks man! This is just a feedback, dont take it otherwise. I learnt a lot of things from your video. Thank you.
you are so fast :(
😅 I'll try to slow down a bit in the upcoming videos
@Toluvictor - I made payment for membership, however, I am unable to download the base app
For some users, UA-cam can sometime take a little while for payment to sync. Please check again in anytime from a few minutes to about 2 hrs
Patreon's access is instantaneous however I suggest you wait a bit to avoid paying twice
Once you can see the membership posts in the membership tab, click "read more" on each post you're interested in as the download link is within the posts