What an insane Video. Coding for a couple Month now in PowerApps and never had a tutorial where everything worked perfect. Thank you very much. I will watch more Videos of you fore sure!
Man, you are legend. You made the complex task very simple.Thank you very much.Greatest content in Left Navigation. Appreciated your 💯 effort and learnt from you brothe.r 🙏🏽
Thank you so much for your effort and great Tutorials. Is there a way to have the long codes (like what you had in the image) somewhere to be easy to copy from (rather than the huge typo mistakes)? Thanks in advance.
thanks for the feedback and yes the code is quite long! Video description doesn't allow for angled brackets, but I'll post it in the comments and hopefully that helps a few people. Cheers
Spectacular video! How would I incorporate additional actions when one of the buttons is pressed? For example: one button goes to a screen and resets the form and variable
Good question. I would recommend you put these additional actions on your screens OnVisible and/or OnHidden properties. They’ll run each time you navigate across screens
@@TheAnalystNik Thank you for the recommendation. I had thought about onVisible, but it wasn't going to work with some of the other ways to get to the same screen (e.g. set new form or edit the form). Solved it by adding a switch statement into the OnSelect of the btnSelectItem before the Navigation. Switch( ThisItem.Name, "Home", [Actions needed], "Search", [Actions needed] ) Navigate(ThisItem.Screen); Set(varMenuSelected, ThisItem.Id)
Hello again! Could you create another version of this, but with a multilevel submenu for the sidebar? I just watched your latest video, and your work is excellent. I'm wondering if you could make a similar version with a sidebar, as many apps come in different sizes and often need an additional submenu. I hope you’ll consider this request. Thank you once again!
@@TheAnalystNik I’m glad to hear that! I really appreciate the quality content you put out. your channel is one of my go-to resources rn for learning. Looking forward to the video when it comes out! Cheers!
Wow! The sidebar you've created is awesome. Could you please create a part 2 of this video with a header and content section on the other side? Thanks so much!
@@TheAnalystNik thank you so much! I was able to find a text parser from image tool to help me complete your tutorial. You are a master, and I hope to learn much more from you in subsequent videos!
Direct sub. I have a new role creating Power Apps in my company and I really would like to create them just with modern design. Not something simple, boring and ugly like a lot of Power Apps is created.
I love that thank you. Hope you enjoy your new role and I’ll make sure to keep the content coming and giving inspiration for modern app designs. Let me know if you have any suggestions for future videos!
@@TheAnalystNik For sure more content about responsive designe. You know, a lot of us has companeis computer and mobile phone and it doesn't have sense to split app for a desktop and the mobile version. Better keep everything in one app which scale according to device.
@@theAprilll great suggestion and that's one I definitely want to cover. I'm working on a project management app to showcase many things, one of them being responsive. Might do a "Let's Build" series
Thank you for this wonderful video, i follow your steps but having this varMenuOpen variable is not affecting the entire menu component in the app?, what i mean is i added the menu to 4 pages in my app when i clck first the toggle button and click the second menu button still in menu close, seems like the global variable varMenuOpen is not affecting the whole menu state when change.
@TheAnalystNik I really liked your menu and I am trying to make the component inside a component library and there is something I am not able to do with the Width property of the main component LeftNav: If(varMenuOpen, 200, 80) The global variable varMenuOpen where should I declare it? In the OnVisible of Screen1? I am not able to change the size when they click on the Toggle. It has worked perfectly if the component is created inside of a canvas application, but if I do it inside a component library I am not able to do it :(
Hi! When creating it within a Component Library, there are some different steps needed. I created a video on it with a different style navigation but you can try to combine the methods to re-create this inside a component library. Let me know if that works for you!
@@TheAnalystNik I've been watching your other video where you create the menu inside a component library, but the difference is that the menu has a fixed size and this one the width is dynamic depending on whether you press the toggle or not and that's what I'm having problems with.
I see, ok give this a try: 1. Enable "Enhanced component properties" under Settings > Updates > Experimental tab 2. Within your Component Library, select your component and create a new custom property "Icon OnSelect", Property Type "Event". 3. Select your icon, and update its OnSelect property to: YourNavName.IconOnSelect() 4. Go to the app and insert your component and update its "Icon OnSelect" property to Set(varMenuOpen, !varMenuOpen); 5. Update the component Width property to If(varMenuOpen, 200, 80) Hope that works out!
@@TheAnalystNik In the end I got it easier: - I created an output MenuWidth property of type number. - I have assigned it the value: If(varMenuOpen,200,80) - Finally, in the Width property of the LeftNav component, I have assigned it the value LeftNav.MenuWidth Thank you very much!
If the component was inserted into a sidebar container, is there any way that the sidebar container can be dynamically resized based on the component width being toggled?
for some reason in the navigation the menu icons isn't showing, i pasted like you said by replacing the " with ' , but still the images aren't visible .Can you guide me what can i do?
Hi, can you check their X and Y properties in the top formula bar? Sometimes it shows 0 on the properties bar on the right but in reality Power Apps sometimes changes it to 40. If it says 40, change it to 0. Hope that solves it for you!
@shomari169 Oh I see. Since custom pages are limited to only one page, canvas components can only be brought in through a component library, which is different from the standalone canvas apps, which have the ability to create components at the app level. If building a navigation menu through a component library, it would have to be built differently from what I’ve shown in this video as it’s built at the app level. Hope that helps and I might do a video on this in the future. Cheers
I absolutely love this component, thank you! I have a slight problem with my icon color - it stays dark instead of changing to light when the icon isn't selected. I quadruple-checked the image formula and mine is exactly the same as the video's. Do you have any suggestions how I can troubleshoot this?
@@TheAnalystNik I figured it out - instead of "currentColor", my svg code contained a hex#. I replaced all the hexes with "currentColor" and it works beautifully now :)
@@TheAnalystNik It doesnt work for me atm. All the icons got the color as they are clicked. So it doesnt change the color when i click the icon because its already like that on every icon.
Hi yes you’re using the modern button control it looks like which also works. You can still use the classic button which will have all those fill properties shown in the video
@@Clacer666 they should still be an option for you to select since a lot of the modern controls are still in preview mode. If you expand the options in the "+ Insert" section, there should be a "Classic" section with the old button.
do you know why in min 9:24 the arrow animation is not working for me, is not showing for some reason. Ive reviewed several times and while it doesnt show any errors, im not seeing the white arrow at all. do you know why that could be?
It’s hard to say without seeing the steps you took but let me take a guess: check the X and Y properties of imgToggleIcon but check their values are both 0 in the top formula bar. Sometimes powerapps changes them without your knowledge, even if it says they’re at 0 in the right navigation.
@@TheAnalystNik I am having the same issue. I have checked the X, Y and they are both 0. I've also gone through the video 2 times making sure nothing was missed. Any other ideas as to what this could be? Wonderful video by the way.
Thanks for the video tutorial. But I have a problem, when I pull data from the formula, it does not recognize, for example like "myTheme". Also the menu cannot open wide when the toggle is pressed. Please give me a solution
I recreated the side nav menu bar on a power app and tested on an iPad. The gallery menus control is returning an error: "This control is not supported for native rendering". What could be the problem? Is there a setting that I need to turn on?
I don't know if the image is available or not but I arrow doesn't show up for some reason. would you be able to share the code with me for the image. Thank you. Love your videos.
@@TheAnalystNik So when I ddi it, it showed no error. I checked the code like 4-5 times matching yours but it still wasn't showing up. Now that I've tried your version and copied and pasted, it worked. Thank you for the help, Nik. I really appreciate that!
This component technically would work for mobile but I would recommend a different version for mobile and desktop. I will likely do a video on this in the future
@@TheAnalystNik I'm practically doing a copy paste of yours, I'm just adding submenus with a flexible height container but the htmltxt code isn't working even if I put your colors it doesn't work
@@Squadra85 hmm it should work if the code is exactly the same. Try copy paste this into the HtmlText property: $"" You also want to make sure in the Formulas property, you defined the colors like this: myTheme = { DarkColor: "#3f768c", LightColor: "#d5ecf5" }; Hope that solves it for you!
@@TheAnalystNik I should be having an error maybe one more space to that way but it's already working thanks for the help , by the way excellent tutorial keep up the good work
finally a good power app tutorial channel, please keep doing power apps videos
I appreciate it and will do!
You deserve a subscribe bro! This is one of the most step-by-step process and not a fast forward teaching.
Thanks so much! More to come!
What an insane Video. Coding for a couple Month now in PowerApps and never had a tutorial where everything worked perfect. Thank you very much. I will watch more Videos of you fore sure!
That’s awesome thanks for the nice feedback!
Man, you are legend. You made the complex task very simple.Thank you very much.Greatest content in Left Navigation.
Appreciated your 💯 effort and learnt from you brothe.r 🙏🏽
What an honour, thank you for the kind words! I’ll keep em coming!
Brother, Thank you so much for the video. Looks like you have done lots of effort to make viewers understand with many things. Thanks again.
Thank you for the kind words and glad you found it helpful!
Amazing Nik! Please keep uploading tutorials, they help a lot
More to come! thank you
This is the best navigation pane video I have ever come across! Absolutely superb! You need to do more videos!
Amazing to hear, thank you. More to come!
Here is the code to imgToggleIcon at 8:57 for those that want to copy/paste!
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
Omg. Are you an angel? Thank you.
💀 saw this after I struggled with the code, thank you sir
I took a print screen of the video and asked chatgpt to give me the code in text, worked like a charm :)
Great idea!
Thank you so much for your effort and great Tutorials.
Is there a way to have the long codes (like what you had in the image) somewhere to be easy to copy from (rather than the huge typo mistakes)?
Thanks in advance.
thanks for the feedback and yes the code is quite long! Video description doesn't allow for angled brackets, but I'll post it in the comments and hopefully that helps a few people. Cheers
Feelings lucky to find your video.😊
Happy you found it as well!
Great video. Where did you get the Set(VarMenuSelected, 1); ? I am keep getting error message that name isn't valid.
Hey Nik! I'm based in Vancouver too! , your explanation is great! thanks a lot!
Go canucks! Thank you
Spectacular video! How would I incorporate additional actions when one of the buttons is pressed? For example: one button goes to a screen and resets the form and variable
Good question. I would recommend you put these additional actions on your screens OnVisible and/or OnHidden properties. They’ll run each time you navigate across screens
@@TheAnalystNik Thank you for the recommendation. I had thought about onVisible, but it wasn't going to work with some of the other ways to get to the same screen (e.g. set new form or edit the form). Solved it by adding a switch statement into the OnSelect of the btnSelectItem before the Navigation.
Switch(
ThisItem.Name,
"Home", [Actions needed],
"Search", [Actions needed]
)
Navigate(ThisItem.Screen);
Set(varMenuSelected, ThisItem.Id)
Ah I see, great job with that solution!
Hello again! Could you create another version of this, but with a multilevel submenu for the sidebar? I just watched your latest video, and your work is excellent. I'm wondering if you could make a similar version with a sidebar, as many apps come in different sizes and often need an additional submenu. I hope you’ll consider this request. Thank you once again!
Another great recommendation and glad you’re enjoying the content! I will for sure do a video on this in the future.
@@TheAnalystNik I’m glad to hear that! I really appreciate the quality content you put out. your channel is one of my go-to resources rn for learning. Looking forward to the video when it comes out!
Cheers!
Wow! The sidebar you've created is awesome. Could you please create a part 2 of this video with a header and content section on the other side? Thanks so much!
Thank you! And yes that’s a great idea, I’ll try to showcase that in an upcoming video
@@TheAnalystNik Whoa! I can't wait to see your upcoming video!
well explained, and so easy to follow. Good work
Really happy to hear that, thank you!
BEST tutorials ever!!!
I appreciate that! cheers
Absolutely superb! It works very smooth.👍
Good to hear thank you!!
Mind Blowing! Great Video. Please keep posting, love your method.
So happy to hear that, thank you!
Great video Nik! I love the polished component! Ps, are you from MTL?
Thanks glad you liked it! And I’m living in Vancouver, born in Bulgaria
Thank you so much Nik! Please include large chunks of code like the image animation in the video description, or at least a link to copy that code.
good point! for now, I'll share it here for you:
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
@@TheAnalystNik thank you so much! I was able to find a text parser from image tool to help me complete your tutorial. You are a master, and I hope to learn much more from you in subsequent videos!
@@chmarch you’re too kind! I’ll keep sharing the knowledge I have and I’m still always learning!
Amazing, thank you The Analyst Nik !
Glad you liked it! Cheers
Thank you
A beautiful and wonderful explanation 🥰
Thank you!
Direct sub. I have a new role creating Power Apps in my company and I really would like to create them just with modern design. Not something simple, boring and ugly like a lot of Power Apps is created.
I love that thank you. Hope you enjoy your new role and I’ll make sure to keep the content coming and giving inspiration for modern app designs. Let me know if you have any suggestions for future videos!
@@TheAnalystNik For sure more content about responsive designe. You know, a lot of us has companeis computer and mobile phone and it doesn't have sense to split app for a desktop and the mobile version. Better keep everything in one app which scale according to device.
@@theAprilll great suggestion and that's one I definitely want to cover. I'm working on a project management app to showcase many things, one of them being responsive. Might do a "Let's Build" series
Great video, very helpful!❤
Amazing to hear that thank you!
Thank you for this wonderful video, i follow your steps but having this varMenuOpen variable is not affecting the entire menu component in the app?, what i mean is i added the menu to 4 pages in my app when i clck first the toggle button and click the second menu button still in menu close, seems like the global variable varMenuOpen is not affecting the whole menu state when change.
You have to turn on “Access app scope” for you component. You’ll see the setting at 6:08 of the video.
@TheAnalystNik I really liked your menu and I am trying to make the component inside a component library and there is something I am not able to do with the Width property of the main component LeftNav:
If(varMenuOpen, 200, 80)
The global variable varMenuOpen where should I declare it? In the OnVisible of Screen1? I am not able to change the size when they click on the Toggle.
It has worked perfectly if the component is created inside of a canvas application, but if I do it inside a component library I am not able to do it :(
Hi! When creating it within a Component Library, there are some different steps needed. I created a video on it with a different style navigation but you can try to combine the methods to re-create this inside a component library. Let me know if that works for you!
ruclips.net/video/leFWNCWU8Mw/видео.html
@@TheAnalystNik I've been watching your other video where you create the menu inside a component library, but the difference is that the menu has a fixed size and this one the width is dynamic depending on whether you press the toggle or not and that's what I'm having problems with.
I see, ok give this a try:
1. Enable "Enhanced component properties" under Settings > Updates > Experimental tab
2. Within your Component Library, select your component and create a new custom property "Icon OnSelect", Property Type "Event".
3. Select your icon, and update its OnSelect property to: YourNavName.IconOnSelect()
4. Go to the app and insert your component and update its "Icon OnSelect" property to Set(varMenuOpen, !varMenuOpen);
5. Update the component Width property to If(varMenuOpen, 200, 80)
Hope that works out!
@@TheAnalystNik In the end I got it easier:
- I created an output MenuWidth property of type number.
- I have assigned it the value: If(varMenuOpen,200,80)
- Finally, in the Width property of the LeftNav component, I have assigned it the value LeftNav.MenuWidth
Thank you very much!
Awesome ❤ thanks for sharing
Thank you! Cheers!
Thanks bro. Easy to understand and follow. It helps a lot!
Making it easy is always the goal, glad you found it helpful!
If the component was inserted into a sidebar container, is there any way that the sidebar container can be dynamically resized based on the component width being toggled?
Solved by setting the Width property of my sidebar container to: If(varMenuOpen, 200, 80)
you got it!
for some reason in the navigation the menu icons isn't showing, i pasted like you said by replacing the " with ' , but still the images aren't visible .Can you guide me what can i do?
Hi, can you check their X and Y properties in the top formula bar? Sometimes it shows 0 on the properties bar on the right but in reality Power Apps sometimes changes it to 40. If it says 40, change it to 0. Hope that solves it for you!
Were you able to solve it? I am facing the same issue !
Love the tutorial, can i just ask if the same can be some with Custom Page
Thank you! Can you clarify what you mean?
@@TheAnalystNik as in can i recreate the same navigation menu using custom pages instead of canvas app
@shomari169 Oh I see. Since custom pages are limited to only one page, canvas components can only be brought in through a component library, which is different from the standalone canvas apps, which have the ability to create components at the app level. If building a navigation menu through a component library, it would have to be built differently from what I’ve shown in this video as it’s built at the app level. Hope that helps and I might do a video on this in the future. Cheers
@@TheAnalystNik thanks for the swift reply and i will be really looking forward to a tutorial on that please to see how it will work
I absolutely love this component, thank you! I have a slight problem with my icon color - it stays dark instead of changing to light when the icon isn't selected. I quadruple-checked the image formula and mine is exactly the same as the video's. Do you have any suggestions how I can troubleshoot this?
Thank you! Are your icons all black or are they taking the dark color we defined in the Formulas property?
@@TheAnalystNik I figured it out - instead of "currentColor", my svg code contained a hex#. I replaced all the hexes with "currentColor" and it works beautifully now :)
Ah excellent, I had a feeling it would be something with the currentColor value. Glad you worked it out!
@@TheAnalystNik It doesnt work for me atm. All the icons got the color as they are clicked. So it doesnt change the color when i click the icon because its already like that on every icon.
We can make our side menu when opening and closing put the other container to have the same behavior so the page would be all dynamic!
That’s right, I plan to make a video and showcase a responsive app in the future
Amazing video, thanks a lot, im having a little problem, for some reason i cannot see Fill, Hovefill, PressedFill... in the Button config (advanced)
i got it, maybe is the new update but you have to change in Appearance 'ButtonCanvas.Appearance'.Transparent
Hi yes you’re using the modern button control it looks like which also works. You can still use the classic button which will have all those fill properties shown in the video
@@TheAnalystNik thanks for you answer, how can I get back the classics buttons?
@@Clacer666 they should still be an option for you to select since a lot of the modern controls are still in preview mode. If you expand the options in the "+ Insert" section, there should be a "Classic" section with the old button.
Is it possible to animate when collapsed or expand
do you know why in min 9:24 the arrow animation is not working for me, is not showing for some reason. Ive reviewed several times and while it doesnt show any errors, im not seeing the white arrow at all. do you know why that could be?
It’s hard to say without seeing the steps you took but let me take a guess: check the X and Y properties of imgToggleIcon but check their values are both 0 in the top formula bar. Sometimes powerapps changes them without your knowledge, even if it says they’re at 0 in the right navigation.
I have the same issue
@@TheAnalystNik I am having the same issue. I have checked the X, Y and they are both 0. I've also gone through the video 2 times making sure nothing was missed. Any other ideas as to what this could be? Wonderful video by the way.
Turn On Access app store
Try activeted
On component try mark access application scope, may it work!
Can we animate when collapsed or expanded?
good question and I did look into doing this but I haven't been able to find a way. If I do, I'll definitely make a video about it!
Thanks for the video tutorial. But I have a problem, when I pull data from the formula, it does not recognize, for example like "myTheme".
Also the menu cannot open wide when the toggle is pressed. Please give me a solution
Hi, make sure you’ve turned on ‘Access app scope’ as shown at 4:13. That will allow the component to access variables in your app
I recreated the side nav menu bar on a power app and tested on an iPad. The gallery menus control is returning an error: "This control is not supported for native rendering". What could be the problem? Is there a setting that I need to turn on?
That's an interesting error that I haven't come across. Does it give the same error on the phone as well?
Found what was happening. I embedded the component inside of another container which caused some wonky rendering. Took it out and working fine now.
Awesome glad you got it!
This is great, can you please provide me the imgtoogleicon image text code
for sure here you are:
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
I don't know if the image is available or not but I arrow doesn't show up for some reason. would you be able to share the code with me for the image. Thank you. Love your videos.
I'm glad you like the videos, I'll keep them coming! I'm curious if the image is giving you an error or if it's just showing blank?
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
@@TheAnalystNik So when I ddi it, it showed no error. I checked the code like 4-5 times matching yours but it still wasn't showing up. Now that I've tried your version and copied and pasted, it worked. Thank you for the help, Nik. I really appreciate that!
The name of my icons don't show. Everything works perfect, but that. :(
Oh that’s strange, I wonder if there’s something up with your color or visibility properties?
Great Video !
Thanks, glad you enjoyed!
@@TheAnalystNik Hi Nik your Html text code is not working because i am try this
can you share the svg for the toggle image?
"data:image/svg+xml," & EncodeUrl("
.arrow" & varMenuTimestamp & " {
animation-name: arrow;
animation-duration: " & If(IsBlank(varMenuOpen), "0ms", "500ms") & ";
animation-fill-mode: both;
}
@keyframes arrow {
" & If(varMenuOpen, "0%", "100%") & " {
transform: rotate(0deg);
}
" & If(varMenuOpen, "100%", "0%") & " {
transform: rotate(180deg);
}
}
")
Ok excellent .. but can u do the “run gif on hover”
I’m not sure what you mean, can you expand on that?
Olá, o meu MENU não se expande quando seleciono, é como se o varMenuOpen Não funcionasse
Hi, have you updated the width property of the component?
These types of pages adapt to mobile??? 😮
This component technically would work for mobile but I would recommend a different version for mobile and desktop. I will likely do a video on this in the future
@@TheAnalystNik how long before you make one that will be responsive for mobile or can u set resources to make the nav bar responsive on all devices
grande
Thanks
You’re very welcome!
I did the same code at toogle botton and Image, and It's not working
hmm I'm not sure why
Gracias
My html dont work dont have color can you help me?
Yeah for sure, let me know a bit more so I can try to help. Maybe share the code you have?
@@TheAnalystNik I'm practically doing a copy paste of yours, I'm just adding submenus with a flexible height container but the htmltxt code isn't working even if I put your colors it doesn't work
@@Squadra85 hmm it should work if the code is exactly the same.
Try copy paste this into the HtmlText property:
$""
You also want to make sure in the Formulas property, you defined the colors like this:
myTheme =
{
DarkColor: "#3f768c",
LightColor: "#d5ecf5"
};
Hope that solves it for you!
You can also define colors using RGBA() but you'll want to ensure it's in double quotes eg. DarkColor: "RGBA(100, 100, 100, 1)"
@@TheAnalystNik I should be having an error maybe one more space to that way but it's already working thanks for the help , by the way excellent tutorial keep up the good work
Export the app and tag it; some of as over here don't have patience.
Thank you 😅
ALL OF THAT DOES NOT WORK TO ME
sorry about that, it must be frustrating. let me know what errors you're getting and I can try to help
@@TheAnalystNik could you give this component to download ?
Can I get the yaml code of the same please
Which part are you looking for, imgMenuIcon?
@@TheAnalystNik how can I have your icons svg codes, thanks
@@chugia6118 sure thing
MenuIcons =
{
Home: "",
Tasks: "",
History: "",
Search: "",
ContactUs: "",
AboutUs: ""
};
@@TheAnalystNik thanks, and the left image button please, the html background code not work for me
@@chugia6118 the html background code? here you go
$""