How to build a Responsive Navigation Menu in Power Apps

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 134

  • @edwardhodson6493
    @edwardhodson6493 10 месяцев назад +1

    Reza, with his usual heroics! Absolutely amazing work as always. Thank you for producing such well refined, high quality content.

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Thank You

    • @Tejasvi-l8u
      @Tejasvi-l8u 5 месяцев назад

      How did you add emojis to the names of the tabs?

  • @rorsara3940
    @rorsara3940 2 месяца назад +1

    The community is lucky to have champions like you. I can't tell you how grateful I am for all your dedication to sharing your knowledge and skills.

  • @SourceCodeUniversity
    @SourceCodeUniversity 8 месяцев назад +4

    This video is GOLD. The way you explain is just perfect.

  • @_JezzaG
    @_JezzaG 10 месяцев назад +1

    Awesome, thanks Reza! Just redesigning one of my apps and this is exactly what I need.

  • @spontaneousorder5670
    @spontaneousorder5670 5 месяцев назад +3

    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.

  • @swatisoneji147
    @swatisoneji147 10 месяцев назад +2

    Awesome as usual, very much informative, Thank you so much for sharing !

  • @Rasec-Gonzalez
    @Rasec-Gonzalez 10 месяцев назад +1

    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

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Great to hear! Thanks so much

  • @abhisheksagar9259
    @abhisheksagar9259 10 месяцев назад +1

    I've used Tab List before in my project but this feels more...Neat😅. Thanks Reza, your videos are always very helpful.

  • @dougydoe
    @dougydoe 10 месяцев назад

    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.

  • @steventhawe1598
    @steventhawe1598 10 месяцев назад

    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.

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      You're very welcome and thanks so much for the appreciation

  • @erakkarthik
    @erakkarthik 10 месяцев назад +1

    Thank you Reza.. You are really helpful.. I was able to complete a complex Power App project by referring your videos...

  • @oluwatobiyusuf
    @oluwatobiyusuf 8 месяцев назад +1

    Thank you Reza. Amazing work

  • @ellimalasan6145
    @ellimalasan6145 10 месяцев назад +1

    So much easy to follow and understand your work Sir Reza. Really great!

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Glad to hear that!

    • @ellimalasan6145
      @ellimalasan6145 10 месяцев назад

      I'd like to join your channel on Silver Club because I need to know more for my project in our company@@RezaDorrani

  • @techdrift73
    @techdrift73 10 месяцев назад +2

    Awesome video, succint and very useful will definitely be implemented

  • @aderibigbeadeyinka7136
    @aderibigbeadeyinka7136 10 месяцев назад +1

    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?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Welcome!
      Check my playlist on responsive design. O have done many videos showcasing responsive galleries

  • @PowerLowCode
    @PowerLowCode 2 месяца назад +1

    Very good video! One question, why don't you use a gallery for the navbar? Would it have weaknesses?

    • @RezaDorrani
      @RezaDorrani  2 месяца назад +1

      I have done many videos on galleries for navigation. Here Im simply showing a different approach.

    • @PowerLowCode
      @PowerLowCode 2 месяца назад +1

      Thanks for the fast response!

  • @hamytube
    @hamytube 10 месяцев назад +1

    Thank you @Reza for your videos. Very helpful.

  • @napoleonnilo6469
    @napoleonnilo6469 3 месяца назад +2

    Great as always! You're a God!

  • @pellecarlen
    @pellecarlen 2 месяца назад

    Very good tutorial! I guess I would have to create multilevel menus if I want more than three menu items. Otherwise the items would fit on the vertical phone screen. Do you have a tutorial for this?

    • @RezaDorrani
      @RezaDorrani  2 месяца назад

      I have done videos on left navigation which shows multi level.

  • @kalpeshpatil2713
    @kalpeshpatil2713 10 месяцев назад +1

    Wonderful. Thanks Reza as always

  • @spotnuru83
    @spotnuru83 9 месяцев назад +1

    Just Easy and Super Step by Step Tutorial

  • @Learnpowerplatform
    @Learnpowerplatform 10 месяцев назад +1

    Another masterpiece.very informative,👍👍

  • @hokemspitter
    @hokemspitter 9 месяцев назад +1

    Really nice and well explained. Quick question: How to I add icons to the menu titles? Thanks.

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      The only option we have with tablist control as of now is emojis

    • @hokemspitter
      @hokemspitter 9 месяцев назад

      How to add the emoji to the MenuData formula? @@RezaDorrani

  • @freddierocha2098
    @freddierocha2098 10 месяцев назад +2

    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?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад +2

      In app settings, make sure scale to fit is OFF and lock orientation is OFF

  • @jaredt.4048
    @jaredt.4048 10 месяцев назад

    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!

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад +1

      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)

    • @jaredt.4048
      @jaredt.4048 10 месяцев назад +1

      Thank you, Reza, you’re amazing.

  • @spotnuru83
    @spotnuru83 9 месяцев назад

    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

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      Answer is components. Check documentation on components.

  • @hitasajil3869
    @hitasajil3869 10 месяцев назад

    Great video, Req: May be in your next video we will be able to see toggle icon to collapse and expand the menu :)

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      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.

  • @VickneshWaran
    @VickneshWaran 10 месяцев назад

    Amazing content and great explanation as Always 👍

  • @yaynative
    @yaynative 10 месяцев назад

    Amazing content once again!

  • @vuxuanhai7311
    @vuxuanhai7311 10 месяцев назад

    Thank you Reza, could you please create a series from A to Z to create a powerapps pipeline, from Dev Environment to Prod Enviroment?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад +2

      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.”

  • @rsaikrishna
    @rsaikrishna 10 месяцев назад

    Very nice use case. Thank you Reza

  • @CloudhoundCoUk
    @CloudhoundCoUk 10 месяцев назад +1

    Magnificent.

  • @mrhansros
    @mrhansros 10 месяцев назад

    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?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      If there is not enough real estate then it will show 3 dots. Check the steps and the output shown in video.

    • @mrhansros
      @mrhansros 10 месяцев назад +1

      my bad. i just need to enable the flexible height for the Tablist and it no longer become 3 dots.

  • @mikedsjr
    @mikedsjr 9 месяцев назад +1

    Ah. Ok. My guesses were wrong. Now I know take what I learned and I apply the methods to what I’m doing.

  • @spotnuru83
    @spotnuru83 9 месяцев назад

    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.

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      ruclips.net/video/fbDQH0vIsN8/видео.htmlsi=O9jaqiFhT36bg1tG
      ruclips.net/video/J-hMMXrKMVE/видео.htmlsi=mVP1ZiYWQwsnQkPL

  • @SourceCodeUniversity
    @SourceCodeUniversity 8 месяцев назад

    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.

    • @RezaDorrani
      @RezaDorrani  8 месяцев назад +1

      Tablist currently does not support scrolling.

  • @kamozzi1
    @kamozzi1 10 месяцев назад

    HI Reza,
    can we do these kid of changes to an existing PowerApps?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      ruclips.net/video/bEbY8Bhh8zw/видео.html

  • @aimannishat2120
    @aimannishat2120 10 месяцев назад

    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?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Documentation learn.microsoft.com/en-us/power-platform/power-fx/formula-reference

    • @aimannishat2120
      @aimannishat2120 10 месяцев назад

      @@RezaDorrani I do refer this link, however I still get stuck with errors. Any easy way to learn and apply logics to it?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      @@aimannishat2120 I am doing a LIVE training session on formulas on Jan 28th. Its for Channel Members (Training Tier).

  • @pellecarlen
    @pellecarlen 2 месяца назад

    I don't have the choice to enable modern controls. Do you have any idea to why?

    • @pellecarlen
      @pellecarlen 2 месяца назад

      Just took me an hour to realize that it's been moved to the Updates tab...

    • @RezaDorrani
      @RezaDorrani  2 месяца назад +1

      Check updates tab :)

  • @duonghung2709
    @duonghung2709 3 месяца назад

    Hi Reza,
    I followed as your guildine, but can not add 2 fields on tab list. They are disappeared.

    • @RezaDorrani
      @RezaDorrani  3 месяца назад

      Video description has link to download entire solution (members only - check description for details)
      I would suggest giving that a try.
      As for the issue mentioned, I have not experienced it and hence not sure what the cause for it could be.
      I will recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com

  • @ericmoisan6568
    @ericmoisan6568 9 месяцев назад

    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

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      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)

    • @ericmoisan6568
      @ericmoisan6568 9 месяцев назад

      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

  • @joaovitor12365
    @joaovitor12365 8 месяцев назад

    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.

    • @RezaDorrani
      @RezaDorrani  8 месяцев назад +1

      ruclips.net/video/fbDQH0vIsN8/видео.html

    • @joaovitor12365
      @joaovitor12365 8 месяцев назад

      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

    • @RezaDorrani
      @RezaDorrani  8 месяцев назад

      @@joaovitor12365 Menu can get its data from collection. You will need to mix and match logic from multiple videos.

  • @Ayan_YT11
    @Ayan_YT11 10 месяцев назад

    Reza Goat ❤

  • @gkvgulshan
    @gkvgulshan 9 месяцев назад

    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

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      Im not sure about this

  • @Tejasvi-l8u
    @Tejasvi-l8u 5 месяцев назад

    @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

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      Should be possible with multiple tabs but not something I have tried.

    • @Tejasvi-l8u
      @Tejasvi-l8u 5 месяцев назад

      @@RezaDorrani multiple tabs as in gallery?

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      @@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/

    • @Tejasvi-l8u
      @Tejasvi-l8u 5 месяцев назад +1

      @@RezaDorrani posted my query in the portal

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      @@Tejasvi-l8u good luck

  • @DrezelRS
    @DrezelRS 9 месяцев назад

    Can you wrap text in a modern tab list? I can’t find it in the controls

    • @RezaDorrani
      @RezaDorrani  9 месяцев назад

      Currently, it does not wrap

  • @manikantamorla6058
    @manikantamorla6058 10 месяцев назад

    How to check the opionset or drop-down is empty in if condition.
    If drop down was empty, datacard value still showing required field

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      I have done multiple videos on gallery filters where I have checked if dropdown is empty. I would recommend checking those videos:

  • @快樂人-c8q
    @快樂人-c8q 5 месяцев назад

    Reza, I don't know why I can't find the modern controls and themes toggle

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      Because its under settings and general now

  • @Tomaszrobin
    @Tomaszrobin 10 месяцев назад

    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

    • @Tomaszrobin
      @Tomaszrobin 10 месяцев назад

      Ok nevermind I used double ;; in the end and it works :)

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад +1

      Looks like you got it to work

  • @santiagogr1795
    @santiagogr1795 10 месяцев назад

    Is it possible to use icons instead of the emojis?

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Currently, not in a tab list

  • @Ploplox
    @Ploplox 4 месяца назад

    The tab list is showing ny menudata alphabetically is there a way to avoid this?

    • @RezaDorrani
      @RezaDorrani  4 месяца назад

      I believe that’s the default behavior.
      Probably an option can be to sort the items property of tab list control.

  • @Tejasvi-l8u
    @Tejasvi-l8u 5 месяцев назад

    Is there a way to add icons to the tab list?

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      Currently, No

    • @Tejasvi-l8u
      @Tejasvi-l8u 5 месяцев назад

      How did you add emojis to the names in the tabs list?

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      @@Tejasvi-l8u windows+. to open emoji keyboard

    • @Tejasvi-l8u
      @Tejasvi-l8u 5 месяцев назад

      @@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

    • @RezaDorrani
      @RezaDorrani  5 месяцев назад

      @@Tejasvi-l8u Use the gallery technique

  • @ckwirey
    @ckwirey 3 месяца назад

    Question (Tab List Ordering): Does anyone know how to stop Power Apps from automatically alphabetizing the tab list? I'm using Reza's method (which is brilliant), but Power Apps forces alphabetical (ascending) ordering of the list. How do I stop it? I want to use Reza's method--but I also need the tab list to be in a custom order. Thanks in advance to anyone who answers!

    • @RezaDorrani
      @RezaDorrani  3 месяца назад

      I have not experienced this in my app's version. Might be a bug in a particular auth version

    • @ckwirey
      @ckwirey 3 месяца назад +1

      @@RezaDorrani! I sincerely appreciate you taking the time to answer my question. Thank you, Sir. Your videos are excellent. I will reach out within my organization, and raise this problem. If they can replicate it, perhaps we'll find an answer.

    • @RezaDorrani
      @RezaDorrani  3 месяца назад

      @@ckwirey If you get the answer, please post it here as well, so others can benefit.
      Thanks so much

  • @Lineage2Ragnarok
    @Lineage2Ragnarok 10 месяцев назад

    i love 🥰

  • @jeromedawn7263
    @jeromedawn7263 2 месяца назад

    can you repost the download link for this?

    • @RezaDorrani
      @RezaDorrani  2 месяца назад

      Can you please comment on the community secured post where link was shared?

    • @jeromedawn7263
      @jeromedawn7263 2 месяца назад

      @@RezaDorrani I don't see the community sceured post where link was shared that's why I commented here sorry

    • @RezaDorrani
      @RezaDorrani  2 месяца назад

      @@jeromedawn7263 Find any secured post link and make the request. I cannot share here as this is the public video comments section.

  • @MohammadAli-ts2ev
    @MohammadAli-ts2ev 10 месяцев назад +1

    Hi Reza,
    That's an awesome piece 🧩.
    Is there a way to add sub-menue in the Tablist control.

    • @RezaDorrani
      @RezaDorrani  10 месяцев назад

      Thanks!
      No submenu option. For that use galleries -> ruclips.net/video/3S0h2nODcxM/видео.html