How to Build a Popup Dialog Box in Power Apps using Responsive Containers

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

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

  • @anjanchidige
    @anjanchidige Год назад +10

    👌👌👌👏👏👏. Clean narration of the feature and demo. take a bow

  • @sachingaidhane5393
    @sachingaidhane5393 Год назад +4

    This is great, Lot of developers were waiting for responsive popup dialog box demo. Your videos are clean, clear and easy to understand. thank you so much Reza for this video.

  • @ashimishra23
    @ashimishra23 13 дней назад

    I've been struggling with containers, but your tutorials have made it so much easier to understand and implement. Thank you so much! 👍

    • @RezaDorrani
      @RezaDorrani  13 дней назад

      I'm glad you found the video helpful.

    • @ashimishra23
      @ashimishra23 8 дней назад

      @@RezaDorrani : I was trying the similar scenario at my end but running into strange problem.
      I am developing an app where sharepoint list L1 being used as datasource. I have inserted gallery in my app. In gallery, I have inserted an edit icon. Clicking on this icon should open a form in edit mode with details of entry selected in gallery. I have also inserted a plus icon on the header of the page (outside of the gallery). Clicking on this plus icon should launch the same form in new mode.
      :
      1) When I click on plus sign, it launches a new form and it allows me to submit the form without filling any details. But after submission, it shows that a new record has been created and most the values are from previous submission.
      2) I have made 2 fields in the form as mandatory. Now- if I try to submit empty form, it stops me from doing that due to 1st mandatory field was blank. I entered some data in 1st mandatory field and again tried to submit but this time, it allows me to submit the form with 2nd mandatory field being blank. And it takes the value for 2nd mandatory field and other fields from the previous submission.
      Not sure what is happening here? Is this a problem with powerapps itself? Appreciate guidance on this.

  • @nestorph21
    @nestorph21 6 месяцев назад

    Reza is my man for all things Power Apps! Every one of his videos is clear, concise, and well-paced with excellent examples!

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

      Great to hear! Thanks so much.

  • @sankhlayashraj
    @sankhlayashraj Год назад +2

    Another fantastic video @Reza. Your videos never leave a doubt in our minds. I feel so enriched after listening to your videos.

    • @RezaDorrani
      @RezaDorrani  Год назад

      Wow! So happy to hear that. Thanks so much for watching and appreciating the content

  •  Год назад +2

    I would like to express my sincere appreciation for this video. It was very useful and informative for me as a Power Apps maker. I learned a lot from the clear and detailed explanations of how to create a Popup Dialog Box control using Responsive Containers. The video covered various scenarios and topics that are relevant and practical for my work. I especially liked the tips on how to make the Popup Dialog Box adapt to different screen sizes and orientations. Thank you, Reza, for sharing your knowledge and expertise with us.

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Awesome!!! Thank You for the amazing feedback on this video.
      Makes me so happy to hear this.

  • @KyleOuyang
    @KyleOuyang Год назад +1

    Wow, this is marvelous. I created quite a few pop-up windows for my apps (not just responsive apps), but the pop-up window components were independent from each other, which means I had to set all properties seperately for each component. You leverage the container and put all pop-up window components into one group, and this saves time managing the pop-up window. For example, we only have to set the "visible" attribute for the container once to maneuver the visibility of the whole pop-up window. Often times, it's not skills you possess that amaze me, but the innovative thinking.

    • @RezaDorrani
      @RezaDorrani  Год назад +3

      Thanks so much.
      I have been at this one for some time. It takes time to crack certain ones.
      Examples - pop up responsive containers, graph api in power apps, edit documents in power apps etc.
      I keep thinking and ideating on them until I get a breakthrough.

  • @Kumar-u8n6v
    @Kumar-u8n6v Год назад +1

    What a timing of this video @Reza. Just thinking on a similar kind of functionality for my use case and your video popped-up. Awesome. It's a great video. Thank you once again !!!

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Great to hear! Thanks so much for watching and liking the video.

  • @bodynfocus
    @bodynfocus Месяц назад +1

    Great video. Such a good walkthrough. Well worth being a member.

    • @RezaDorrani
      @RezaDorrani  Месяц назад

      You're most welcome and thanks for being a valuable member

  • @bernardnguyen5382
    @bernardnguyen5382 Год назад +1

    Thanks for sharing Reza ! As always good and useful for the community ! 🙏🙏

  • @ramdevineni143
    @ramdevineni143 4 месяца назад +1

    Learned how to build pop-up dialog and many other features, It was a totally productive video, Thanks again.

  • @dougydoe
    @dougydoe Год назад +1

    I recently had to abandon the dialog popup boxes in an App design once I had to turn it into a responsive App. I wish I had seen this video earlier!!! 😅 I didn't know how to handle the popups in a responsive manner. I used nested containers to make them "regular" screens. That experience makes me appreciate how you used nested containers to handle the dialog boxes. Hopefully, the coming improvements in creating responsive apps will make it less time consuming but I'm really enjoying the learning curve with the current available features. Another excellent step-by-step tutorial. Thanks for sharing.

    • @RezaDorrani
      @RezaDorrani  Год назад

      Better late than never. Happy to hear the video is useful. A lot is possible with responsive containers.

  • @Amit4u4365day
    @Amit4u4365day Год назад +1

    This video really helps to understand the power apps using responsive containers, thanks for sharing

    • @RezaDorrani
      @RezaDorrani  Год назад

      So happy to hear that! Thanks for watching

  • @andreassukau9400
    @andreassukau9400 Год назад +1

    Amazing work that you do with your videos. So clear and straight forward. Thanks for what you are doing, it helped me a lot in learning Power Apps!

  • @AutumnHearne
    @AutumnHearne 11 месяцев назад

    Huge thanks for this! I was able to implement the pop-up notification we needed in just a few minutes following your instructions.

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

      Glad it helped!

    • @AutumnHearne
      @AutumnHearne 7 месяцев назад +1

      @@RezaDorrani it continues to help! I used your video to refresh my memory, and then added some more pop-up notifications to one of our forms.

  • @AmitManwar-Sniper
    @AmitManwar-Sniper Год назад +1

    Simply awesome 👍 as usual. Thanks a lot for superb content. Very helpful. Learning a lot from you. Thanks 🙏

  • @techprogrammer_
    @techprogrammer_ 11 месяцев назад +1

    I got what i was searching for from last many months ❤❤🎉🎉 thank you raza

  • @MrSantoshKm
    @MrSantoshKm Год назад +1

    Thank you for creating this video. It's really very helpful to provide the app a rich experience.

  • @RobotRisingTech
    @RobotRisingTech Год назад +1

    Great video. Excellent method for creating a popup and also showing how to utilize the containers in a responsive manner.
    Using switch in the size property in conjunction with the screen types was something I didnt even know was possible!
    Keep up the great work!

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      So happy to hear the feedback. Thanks so much.

  • @Malhosainy
    @Malhosainy Год назад

    21:53 may be the switch function and screen size can be removed here to simplify the formula. "min" function can be enough. What do you think.
    Again, the video is impressive at least, keep up the fantastic work!

    • @RezaDorrani
      @RezaDorrani  Год назад

      Thanks!
      I have moved onto the next video :)
      Give it a try and see how it goes and please share the formula here if it works.

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

    clean and easy to understand thank you sir🤓

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

    again awesome stuff.. back to back watching your awesome stuff..

  • @mallelajyothi9819
    @mallelajyothi9819 Год назад +1

    Great video Reja.... I will try tmrw 😊😊 Thankyou 🎉🎉

  • @m365dev
    @m365dev Год назад +1

    Simply full of knowledge

  • @JamesGolding1
    @JamesGolding1 Год назад +1

    Very Clear! Thank You.

  • @smartwatchicon
    @smartwatchicon Год назад +1

    Wow, what an amazing tutorial Reza.

  • @oluwatobipaul6171
    @oluwatobipaul6171 Год назад +1

    Thanks Reza. I have created Popup dialog box in the past but not a responsive one. This will be added moving forward. Thanks

  • @Rohit-y2k4i
    @Rohit-y2k4i Год назад +1

    awesome video.very informative 🤩.Thank you Reza

  • @AlexandrePerret
    @AlexandrePerret Год назад

    I wish the great youtubers about powerapps make more content about accessibility. Those popin (or popup) are absolutely not accessible, and even Microsoft explains to not use popups, but instead use dedicated screens.
    Making screens to act like popups is not as easy as making popups but it is much more accessible.
    Those popups for example, when showing to user, you can still use tab key on your keyboard to focus to buttons in background. A blind user with screen reader will not understand at all the presence of those kind of popups.
    Your tutorials are really helpfull and you are a precious for everythings I learned on powerapps, but I'll love to see some contents about accessibility. Thank you !

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Thanks for the feedback.
      I make videos for users based on user requests. I received a lot of asks on a dialog control experience.
      Definitely not an accessible standard pattern or design.
      If I receive more requests on topics around accessibility, I would be happy to make content on that topic as well.

  • @SadekInfos7392
    @SadekInfos7392 Год назад +1

    powerapps legend , thank you again

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Thank You for your kind words but I am no legend :)
      I have only started my journey!

    • @SadekInfos7392
      @SadekInfos7392 Год назад

      so did we with your help ;) @@RezaDorrani

  • @m1rroredgesharpeningservic546
    @m1rroredgesharpeningservic546 Год назад +1

    Outstanding! Easy to understand...Easy to deploy...

  • @youtube_Salim
    @youtube_Salim Год назад +1

    thank you very much for all the explanations

  • @vighneshkum
    @vighneshkum Год назад +1

    Very good explained ❤.

  • @Saif_Ali_Khan_1301
    @Saif_Ali_Khan_1301 Год назад +1

    Superb this container thing makes it much easy, till date I used to use formula based on x and y and setting up width and height dynamically.

  • @parthshah1314
    @parthshah1314 Год назад +1

    Sir!! Hats Off 🙇🏻

  • @alzaimoor79
    @alzaimoor79 Год назад +1

    Great session, looking forward to session cover grouping

    • @RezaDorrani
      @RezaDorrani  Год назад

      Thanks!
      I have no session planned on grouping. Not sure what is grouping?

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

    Another great video Reza! Quick question, is it possible to create a popup dialogue box when an specific item is selected from the dropdown? Do you have any tutorials for that scenario? Thanks!

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

      Welcome!
      Should be possible but I do not have a video reference on this scenario. I recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.

  • @the_power_ride
    @the_power_ride Год назад +1

    This is really usefull
    Thanks rezza❤️

  • @HiroshimaMS
    @HiroshimaMS Год назад

    Wonderful, it's exactly what I need! Thank you so much!

  • @shaikhfirdos2723
    @shaikhfirdos2723 Год назад +1

    Amazing tricks..❤❤

  • @AhteshamKamali
    @AhteshamKamali Год назад +1

    Awesome ❤❤, thanks for sharing

  • @JackPower-w3h
    @JackPower-w3h Год назад +1

    Very informative 👏👏

  • @zoofboof9180
    @zoofboof9180 Год назад +1

    That tip at 12:20 is some good stuff.

  • @luisfernandomacedo1451
    @luisfernandomacedo1451 Год назад +1

    Great job Reza! What should a learner do to take one of your power apps course? Is it only through membership?

    • @RezaDorrani
      @RezaDorrani  Год назад

      Its only through the Gold membership

  • @richardhedley6751
    @richardhedley6751 Год назад +1

    Hi Reza, I really enjoy your videos and find them very helpful. My only concern is with the WCAG accessibility of the new responsive components. Does the tab order work correctly for keyboard users? If not, does the "set focus" function work with the new responsive components approach?
    Example opening the dialog box may tab in order correctly being next in the tree view, but closing does this consider previous tabbed selections.
    With two years of experience building application in power platform, canvas has limitations with WCAG expectations, which MS aware and nothing seems to get done about it. I'm worried that WCAG accessibility may not have been fully considered again. More properties need to be built into these components, especially to support WCAG keyboard use cases, speech recognition use cases, and screen reader use cases. And should only ever really be in preview till accessibility has been considered or the bug have been fixed.
    I maybe wrong and all these have been considered going forward, just hmmmm.

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      I make videos based on user requests. I received tons of request for this one.
      Is this WCAG compliant - No, is this accessible - No.
      I completely agree with your take on WCAG compliance.

    • @richardhedley6751
      @richardhedley6751 Год назад +1

      @@RezaDorrani thanks for responding, totally understand.

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

    Hi, Reza I think your videos are excellent and really beneficial. I constructed the same reusable form as you did, but when I tried to Edit the record, the warning "No item to display" showed up. Adding a new record is effective, but editing is ineffective.

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

      Form mode property must be edit and item property must be an item context.
      I have not come across this issue and hence not sure what the cause could be.
      I recommend posting your issue on forums in case someone has experienced something similar powerusers.microsoft.com

  • @nelsonds-01
    @nelsonds-01 Год назад +1

    Excellent idea!

  • @champkiddoo9968
    @champkiddoo9968 Год назад

    Hey Reza, I have a doubt like how did you insert calendar image and circle image in the text label??

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Those are probably emojis.
      Windows+.

  • @hpsai2345
    @hpsai2345 Год назад

    Hi I have an urgent query- hope you can help or point to a video that you already have for this scenario-
    I have a gallery in my Edit screen that currently filters and gets specific records from the data source when user searches and selects that specific item for editing.
    So the gallery for example has 5 accounts
    if user chooses to add a 6th account or more accounts to the gallery then how to -
    Populate a new row while still displaying the 5 accounts.
    Patch the 6th account to that specific customer profile and Update any changes made to existing 5 records.
    So basically the gallery is first filtering an existing record from the datasource then allows to add new items and allows updates to existing items: once submitted, it patches new record, updates existing records to that specific customer profile.

    • @RezaDorrani
      @RezaDorrani  Год назад

      I do not have a video reference on this scenario. I recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com

  • @AnanyaSri-yg6is
    @AnanyaSri-yg6is Год назад

    Hi Rezza,
    Can i have an example like nested repeated section inside flexible gallery which has a combination of different columns

    • @RezaDorrani
      @RezaDorrani  Год назад

      I don’t have a video on this and have no plans to do so as I only make videos when I get multiple requests on a topic.

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

    not sure if I missed that but I can't find the 'badge' element / control in the Insert menu anymore. I tried to activate modern controls, but that option was not available to me in the settings, rather the other way around, I could 're-activate' classic themes. This is as of today, March 2024. Any idea how I could get the badge control in my list of items I can insert?

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

      Check General section in settings

  • @DaHooka
    @DaHooka Год назад +1

    Nice how to! Thanks

  • @zanzaid
    @zanzaid Год назад +1

    Great video Reza. I'm getting into more responsive lately and this will help! Question though, does putting the popup dialog in containers meet accessibility? Microsoft says to not use dialogs and instead use separate screens, but responsiveness in canvas apps has come a long way since they said that last year, so i'm not sure if things have changed..

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Thanks!
      To be honest, I am not aware if it meets accessibility standards. I got tons of requests on this topic, hence I made the video.

  • @anur9860
    @anur9860 Год назад +1

    Well explained

  • @romerbi
    @romerbi Год назад +1

    Hi Reza, great video! I was working almost the same with containers, althought not responsive.
    I want to make just an observation... putting a form in a non-visible container, wouldn't you increase the number of elements in a single screen too much ? wouldn't it be better to create a separate screen for that?

    • @RezaDorrani
      @RezaDorrani  Год назад

      This video was made based on many requests I received from subscribers. The form was simply an example. I have done 7-8 form videos where I have shown form on a separate screen.
      This is simply another option. Choose what works best for you.

  • @hasaninew
    @hasaninew Год назад

    I don't see the Modern controls and themes on my Upcoming features setting? Any idea?

    • @RezaDorrani
      @RezaDorrani  Год назад

      Setting is now in General Tab.
      Check ruclips.net/video/TWcQwocLsE4/видео.htmlsi=U34IaBzdqgEPeWWE

  • @paolovr1970
    @paolovr1970 Год назад +1

    Thanks Reza 🙏🙏🙏

  • @Amit4u4365day
    @Amit4u4365day Год назад

    Since modern control is in preview mode, can we use it in an actual project?

    • @RezaDorrani
      @RezaDorrani  Год назад

      You can use it but things can change while in preview.

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

    Quick question, I am already a silver member, and I have checked that this video has downloadable course materials. However, I couldn't find them, and I hope you can assist me.

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

      Check in membership tab of the channel. If you dont find this specific link, simply post a comment on any other secured download link and I will share the link there.

  • @ayus43
    @ayus43 Год назад +1

    i have big app which is management system in which 7 gallery in a single screen i follow same step but it will not fully responsive can you help me ?

    • @RezaDorrani
      @RezaDorrani  Год назад

      I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com

  • @dandrem.4074
    @dandrem.4074 Год назад

    Just out of curiousity, do you have to use the modern controls?

    • @RezaDorrani
      @RezaDorrani  Год назад

      No

    • @dandrem.4074
      @dandrem.4074 Год назад +1

      @RezaDorrani oh thank God 😆. I was about to cry. Great video by the way. I'm halfway through and I love it.

    • @dandrem.4074
      @dandrem.4074 Год назад

      @@RezaDorrani also, crazy question, but how does one go about moving a control in responsive layouts? It says use the tree view or arrow keys but none of that is working.

    • @RezaDorrani
      @RezaDorrani  Год назад

      @@dandrem.4074 Modern controls are the future. A lot of features coming soon.

    • @RezaDorrani
      @RezaDorrani  Год назад

      @@dandrem.4074 Copy and paste to move controls

  • @craigwhite5429
    @craigwhite5429 Год назад +1

    Great video as always, Reza! The problem with modals is their inability to be picked up by screen reader technology, therefore they make an app inaccessible. Do you know if any improvements are coming for this? In MS Docs & the Accessibility White Paper, it's recommended we use separate screens for these scenario's instead of a pop up/modal

    • @RezaDorrani
      @RezaDorrani  Год назад +3

      Thanks!
      I make videos based on topic suggestions from subscribers. This was a top requested feature.
      Separate screens are recommended for accessibility scenarios. I am not aware of any improvements coming in this area.

  • @hetaldubal5562
    @hetaldubal5562 Год назад +1

    Sir aap service complition, packaging slip , po type , filter , sab k ek combine video bana sakte ho?!.. plzzz....
    And multi drop down and combo box...video..

    • @RezaDorrani
      @RezaDorrani  Год назад

      I make videos when I receive multiple requests on a topic. Every quarter 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.

  • @HabeshaBliss
    @HabeshaBliss Год назад

    I can still use dialogue box for non responsive Apps?

    • @RezaDorrani
      @RezaDorrani  Год назад

      Absolutely. But a non-responsive app typically wont have components.

  • @mallelajyothi9819
    @mallelajyothi9819 Год назад

    Hello Reja....How to install Power automate desktop premium version

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      Please check documentation on PAD

  • @trivenijoshi4389
    @trivenijoshi4389 Год назад

    Could you please make a video for asset management application using powerapps?

    • @RezaDorrani
      @RezaDorrani  Год назад

      I make videos when I receive multiple requests on a topic. Every quarter I ask subscribers for topic suggestions on Community Tab of my channel. Most voted topic ideas get added to my backlog. Make sure to suggest this idea whenever the next topic suggestion post is out.

  • @andresfriss687
    @andresfriss687 Год назад +1

    muito bom!!!

  • @hetaldubal5562
    @hetaldubal5562 Год назад

    Sir aagar hume aap se class lene ho personl to aap le sakte ho ?!..

    • @RezaDorrani
      @RezaDorrani  Год назад

      I do not offer 1:1 classes.
      I currently have a live training program ongoing. You can join my accessing my RUclips channel on web browser, clicking on JOIN button and signing up for the Training membership tier.

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

    Hello Reza, First of all thanks for quality material for learning. I tried joining your channel with Bronze subscription. I chose credit card payment 2 times but amount got deducted and i could not able to join channel. Please help on this.

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

      Hi Rohit, thanks for the compliments.
      You would need to contact youtube support for help with payments. I have no control over that. Subscription is a RUclips feature which channel owners can turn on. There onwards the entire process is controlled by RUclips

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

      @@RezaDorrani Thanks

  • @AnanyaSri-yg6is
    @AnanyaSri-yg6is Год назад

    Its better if u share that type of scenarios

  • @JohnHall
    @JohnHall Год назад +2

    I appreciate you diving into Responsive App layouts, but I also regularly warn my own team to not *waste time* on Responsive Designs *unless they are a requirement*. The beauty of the Power Platform remains the ability to move quickly and adapt to changing requirements fast. Keeping design patterns thin and lightweight allows the Power Platform to fill a gap no other platform does. That isn't to say that there isn't a place for more rigid and planned applications or where Responsive Design is a requirement, however, I remind developers to ensure they are pursuing features that don't get in the way of other requirements. Thus far, these elements remain a bit limiting in time to deployment. By all means getting better, but still not where I'd want them to be.

    • @RezaDorrani
      @RezaDorrani  Год назад +3

      Thanks for sharing the feedback. Responsive design has come a long way since 2018 and keeps getting easier. There are many more improvements coming in the next year.
      If there is a need for a responsive app, then this is our current best option.

  • @Itsyunusahmed
    @Itsyunusahmed Год назад +1

    🎉

  • @Ali-h1p7v
    @Ali-h1p7v Год назад +1

    Good work but coding still faster.

    • @RezaDorrani
      @RezaDorrani  Год назад +1

      RUclips has an option to slow down the speed 😉

  • @shaikmohammedabdulsamad343
    @shaikmohammedabdulsamad343 Год назад +1

    Thanks, Reza, for the excellent video and its neatly explained. This is the common use case and very useful. As always you are my 🦸

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

    *Genius *