How to build a Responsive Navigation Menu in Power Apps
HTML-код
- Опубликовано: 30 май 2024
- In this Power Apps video tutorial, we will learn how to build a Responsive Navigation Menu in Power Apps that seamlessly adapts to various screen sizes and orientations.
Watch how the same Power Apps Navigation menu effortlessly transforms into a Top Navigation for Mobile Devices and a Left Navigation for Tablets or Desktop experiences.
Unlock the potential of responsive design containers in Power Apps and use the power of the Modern Tab list control to build your own dynamic Navigation Menu control.
#PowerApps #NavigationMenu #PowerPlatform #Microsoft
More Navigation Menus for Power Apps:
• Build Power Apps Navig...
• Power Apps Navigation ...
⬇️ Download Power App link in Community Tab for Channel Members (Silver Club 🥈 or higher)
Table of Contents:
00:00 - Introduction to Power Apps Responsive Navigation Menu control
00:38 - How to build a Responsive Power App
02:20 - Power Apps Responsive Container control Properties
05:55 - How to Build a Dynamic Responsive Power Apps Navigation Menu control
08:42 - Add data to Navigation menu
13:03 - Responsive Power Apps Navigation (Left and Top navigation) demo 
Наука
Reza, with his usual heroics! Absolutely amazing work as always. Thank you for producing such well refined, high quality content.
Thank You
Awesome, thanks Reza! Just redesigning one of my apps and this is exactly what I need.
This video is GOLD. The way you explain is just perfect.
Thank You
Thank you Reza. Amazing work
Awesome as usual, very much informative, Thank you so much for sharing !
My pleasure!
Awesome video, succint and very useful will definitely be implemented
Your videos have helped me a lot, thank you for each one of them and especially for your way of explaining every detail. Greetings from Chile
Great to hear! Thanks so much
So much easy to follow and understand your work Sir Reza. Really great!
Glad to hear that!
I'd like to join your channel on Silver Club because I need to know more for my project in our company@@RezaDorrani
Thank you @Reza for your videos. Very helpful.
Most welcome
I've used Tab List before in my project but this feels more...Neat😅. Thanks Reza, your videos are always very helpful.
You're welcome 😊
Thank you Reza.. You are really helpful.. I was able to complete a complex Power App project by referring your videos...
Great!
I've just been able to watch this video after bookmarking it on Monday. This is super cool and using the screen size feature to get the required responsiveness is something that would have save me hours if I hade seen this video earlier. 🤣🤣. Thanks for sharing and always a delight to watch your videos.
Awesome! Thank you!
Wonderful. Thanks Reza as always
Most welcome
I appreciate your clear explanations, Reza. Your tutorials make it easy for me to understand, and my work has become much more manageable as a result. I am sincerely grateful for your assistance.
You're very welcome and thanks so much for the appreciation
Another masterpiece.very informative,👍👍
Thank you! Cheers!
Amazing content once again!
Thanks again!
Amazing content and great explanation as Always 👍
Much appreciated!
Just Easy and Super Step by Step Tutorial
Great to hear
Very nice use case. Thank you Reza
Most welcome Krishna
Really nice and well explained. Quick question: How to I add icons to the menu titles? Thanks.
The only option we have with tablist control as of now is emojis
How to add the emoji to the MenuData formula? @@RezaDorrani
Thank you Reza for this tutorial. can you do a video to show us how to add gallery to the third container and make its responsive?
Welcome!
Check my playlist on responsive design. O have done many videos showcasing responsive galleries
Thank you for publishing this. Do you also have a video on how to create the colorful data in the main container at the 13 minute mark? Thanks for all you do for us!
Its based on a mix bag of videos I did before -> check playlists on responsive design and modern controls.
The App is made available for download for channel members (check video description for details)
Thank you, Reza, you’re amazing.
Great video, Req: May be in your next video we will be able to see toggle icon to collapse and expand the menu :)
Thanks!
I have no plans for a video on that.
I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.
Hello Reza! On my phone or preview performed in the application, my screen does not go to horizontal mode. Anything I need to set up?
In app settings, make sure scale to fit is OFF and lock orientation is OFF
Magnificent.
Thanks
I have a question, is there any way to make the tablist scrollable? In my project I have a lot of links in the nav bar and I am trying to figure out how can user scroll the nav bar up and down to access all those links. At the moment, it shows three dots and we have to click on it to see all those additional links in the tablist. Thank you so much.
Tablist currently does not support scrolling.
Really great but i have a query here, dont you think we are kind of duplicating things here like the header, side bar and etc?? because if we have change something, we need to go and change in all the Screen's related Header and side bar.. is there a better way to handle this? if so it will be great help
Answer is components. Check documentation on components.
Thank you Reza, could you please create a series from A to Z to create a powerapps pipeline, from Dev Environment to Prod Enviroment?
Welcome!
My rule for making videos is set “I make videos when I receive multiple requests on a topic. Every 6 months I ask subscribers for topic suggestions on Community Tab of my channel. Most voted idea gets added to my backlog. Make sure to post this idea whenever I post the next topic suggestion post.”
Hi Reza, I was wondering if there was any way of validating this menu, for example the following users x and y cannot enter some of the screens, but user z has full access to the screens.
ruclips.net/video/fbDQH0vIsN8/видео.html
Right, thank you very much. But I don't understand how to do this validation in the menu that you explain in this video that I'm commenting on! @@RezaDorrani
@@joaovitor12365 Menu can get its data from collection. You will need to mix and match logic from multiple videos.
Hello Reza,
I have been following your videos and so far I have been able to figure thigs out using these videos. This one has me stumped. Just trying the tab list like in your video and I'm getting an error trying to navigate to the Screens. the OnSelect option gives me an error in Navigate(Self.Selected.GoToScreen). the GoToScreen is underlined in red with the message "The first argument of 'Navigate' should be a control or screen." When I change Navigate to Notify, the text comes up properly. Any insights?
Thanks
I have not come across this issue and hence not sure what is the cause for your issue.
Video description has link to download the App (members only - check description for details)
I did find my issue. I was setting up the screen names as text fields and then trying to convert the text to navigate. now that I'm actually using the screen names, works fine
Thanks, again for the very informative videos & instructions
HI Reza,
can we do these kid of changes to an existing PowerApps?
ruclips.net/video/bEbY8Bhh8zw/видео.html
Hi Reza. Thank you for this video. My Tablist however suddenly become 3 dots instead of listing out the MenuData. In preview mode, i need to click on 3 dots and then only it will list out my MenuData.
Can you please advise on how the Tablist to not become 3 dots?
If there is not enough real estate then it will show 3 dots. Check the steps and the output shown in video.
my bad. i just need to enable the flexible height for the Tablist and it no longer become 3 dots.
Can you wrap text in a modern tab list? I can’t find it in the controls
Currently, it does not wrap
How to check the opionset or drop-down is empty in if condition.
If drop down was empty, datacard value still showing required field
I have done multiple videos on gallery filters where I have checked if dropdown is empty. I would recommend checking those videos:
i love 🥰
Hi, I created an approval workflow with attachment, attachment is working fine till send and wait for approval,after approval attachment is not there when the creator gets a response.
Is there any platform where I can send photos to the flow
Im not sure about this
Is there a way to show Menu based on the person and what kind of role or job the person has?? if you could teach us how to do it will be great.
ruclips.net/video/fbDQH0vIsN8/видео.htmlsi=O9jaqiFhT36bg1tG
ruclips.net/video/J-hMMXrKMVE/видео.htmlsi=mVP1ZiYWQwsnQkPL
Reza Goat ❤
Hi Reza
Due to regional characters in Europe, I have to use ; instead ,
I get an error about unexpected characters when I type a formula
MenuData = [{MenuTitle:"Home";GoToScreen:'Home Screen'}];
Do you know what could be the cause?
Regards,
Tomasz
Ok nevermind I used double ;; in the end and it works :)
Looks like you got it to work
Hi Reza,
I’ve just started learning power apps.
I’m very worried about functions that I use, often get stucked with errors and unable to resolve them.
Can you please guide me best way to play around with functions?
Documentation learn.microsoft.com/en-us/power-platform/power-fx/formula-reference
@@RezaDorrani I do refer this link, however I still get stuck with errors. Any easy way to learn and apply logics to it?
@@aimannishat2120 I am doing a LIVE training session on formulas on Jan 28th. Its for Channel Members (Training Tier).
Is it possible to use icons instead of the emojis?
Currently, not in a tab list
Ah. Ok. My guesses were wrong. Now I know take what I learned and I apply the methods to what I’m doing.
Good luck
Hi Reza,
That's an awesome piece 🧩.
Is there a way to add sub-menue in the Tablist control.
Thanks!
No submenu option. For that use galleries -> ruclips.net/video/3S0h2nODcxM/видео.html