How to build a Responsive Navigation Menu in Power Apps
Вставка
- Опубліковано 8 лип 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
How did you add emojis to the names of the tabs?
Awesome, thanks Reza! Just redesigning one of my apps and this is exactly what I need.
Thank you Reza. Amazing work
This video is GOLD. The way you explain is just perfect.
Thank You
Fantastic video. The only change I made on the setup was to use the enum instead of Size = 1. I think Size = ScreenSize.Small is easier to read.
👍
Awesome video, succint and very useful will definitely be implemented
Awesome as usual, very much informative, Thank you so much for sharing !
My pleasure!
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
Thank you @Reza for your videos. Very helpful.
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
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!
Thank you Reza.. You are really helpful.. I was able to complete a complex Power App project by referring your videos...
Great!
Wonderful. Thanks Reza as always
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 😊
Another masterpiece.very informative,👍👍
Thank you! Cheers!
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
Amazing content once again!
Thanks again!
Very nice use case. Thank you Reza
Most welcome Krishna
Just Easy and Super Step by Step Tutorial
Great to hear
Magnificent.
Thanks
Amazing content and great explanation as Always 👍
Much appreciated!
i love 🥰
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.
Reza Goat ❤
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
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
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 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
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
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.
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.
Can you wrap text in a modern tab list? I can’t find it in the controls
Currently, it does not wrap
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.”
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, 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.
ua-cam.com/video/fbDQH0vIsN8/v-deo.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.
HI Reza,
can we do these kid of changes to an existing PowerApps?
ua-cam.com/video/bEbY8Bhh8zw/v-deo.html
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
Reza, I don't know why I can't find the modern controls and themes toggle
Because its under settings and general now
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.
@RezaDorrani I want to create a left navigation with icons and highlight the selected left nav option for the current screen.
Is it possible with the tabs list discussed, else do I need to implement gallery just like the usual idea of left navigation component?
The left navigation menu component is restricting the app responsiveness although the design is impressive. Please suggest on my query
Should be possible with multiple tabs but not something I have tried.
@@RezaDorrani multiple tabs as in gallery?
@@Tejasvi-l8u I would have to try it out to know the options. I will recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com/
@@RezaDorrani posted my query in the portal
@@Tejasvi-l8u good luck
Is it possible to use icons instead of the emojis?
Currently, not in a tab list
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:
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.
ua-cam.com/video/fbDQH0vIsN8/v-deo.htmlsi=O9jaqiFhT36bg1tG
ua-cam.com/video/J-hMMXrKMVE/v-deo.htmlsi=mVP1ZiYWQwsnQkPL
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 there a way to add icons to the tab list?
Currently, No
How did you add emojis to the names in the tabs list?
@@Tejasvi-l8u windows+. to open emoji keyboard
@@RezaDorrani I want to create a left navigation with icons and highlight the selected left nav option for the current screen.
Is it possible with the tabs list discussed, else do I need to implement gallery just like the usual idea of left navigation component?
The left navigation menu component is restricting the app responsiveness although the design is impressive. Please suggest on my query
@@Tejasvi-l8u Use the gallery technique
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 -> ua-cam.com/video/3S0h2nODcxM/v-deo.html