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 🙏🏽
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!
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!
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)
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.
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.
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 :)
@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 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
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!
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?
finally a good power app tutorial channel, please keep doing power apps videos
I appreciate it and will do!
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!
well explained, and so easy to follow. Good work
Really happy to hear that, thank you!
Awesome ❤ thanks for sharing
Thank you! Cheers!
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!
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!
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?
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!
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!
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!
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.
Thanks
You’re very welcome!
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
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.
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!
Great Video !
Thanks, glad you enjoyed!
@@TheAnalystNik Hi Nik your Html text code is not working because i am try this
Gracias
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
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?
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
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!
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!
Can I get the yaml code of the same please
Which part are you looking for, imgMenuIcon?