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

[@anjanchidige]

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

[@RezaDorrani]

Thank You so much

[@sachingaidhane5393]

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.

[@RezaDorrani]

Glad it was helpful!

[@nestorph21]

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

[@RezaDorrani]

Great to hear! Thanks so much.

[@KyleOuyang]

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]

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.

[@sankhlayashraj]

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

[@RezaDorrani]

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

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]

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

[@dougydoe]

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]

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

[@Kumar-u8n6v]

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]

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

[@ramdevineni143]

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

[@RezaDorrani]

Glad it was helpful!

[@Amit4u4365day]

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

[@RezaDorrani]

So happy to hear that! Thanks for watching

[@bernardnguyen5382]

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

[@RezaDorrani]

My pleasure!

[@RobotRisingTech]

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]

So happy to hear the feedback. Thanks so much.

[@AutumnHearne]

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

[@RezaDorrani]

Glad it helped!

[@AutumnHearne]

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

[@andreassukau9400]

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!

[@RezaDorrani]

You’re most welcome

[@shubhamkoolwal139]

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

[@RezaDorrani]

Thanks Shubham

[@smartwatchicon]

Wow, what an amazing tutorial Reza.

[@RezaDorrani]

Glad you liked it

[@MrSantoshKm]

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

[@RezaDorrani]

Glad it was helpful!

[@techprogrammer_]

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

[@RezaDorrani]

Glad to hear that

[@m1rroredgesharpeningservic546]

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

[@RezaDorrani]

Great to hear!

[@oluwatobipaul6171]

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

[@RezaDorrani]

Responsive design for the win

[@damonehartnick8085]

clean and easy to understand thank you sir🤓

[@RezaDorrani]

You are most welcome

[@m365dev]

Simply full of knowledge

[@RezaDorrani]

Thanks

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

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.

[@dayanereis872]

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]

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.

[@alzaimoor79]

Great session, looking forward to session cover grouping

[@RezaDorrani]

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

[@SadekInfos7392]

powerapps legend , thank you again

[@RezaDorrani]

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

[@SadekInfos7392]

so did we with your help ;) @@RezaDorrani

[@mallelajyothi9819]

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

[@RezaDorrani]

Welcome

[@AmitManwar-Sniper]

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

[@RezaDorrani]

Happy to hear that!

[@Saif_Ali_Khan_1301]

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.

[@RezaDorrani]

Great 👍

[@JamesGolding1]

Very Clear! Thank You.

[@RezaDorrani]

Welcome!

[@youtube_Salim]

thank you very much for all the explanations

[@RezaDorrani]

Most welcome

[@zoofboof9180]

That tip at 12:20 is some good stuff.

[@RezaDorrani]

Thanks

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

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.

[@the_power_ride]

This is really usefull Thanks rezza❤️

[@RezaDorrani]

Glad to hear that! Most welcome

[@parthshah1314]

Sir!! Hats Off 🙇🏻

[@RezaDorrani]

Thank You 😊

[@vighneshkum]

Very good explained ❤.

[@RezaDorrani]

Thanks

[@Rohit-y2k4i]

awesome video.very informative 🤩.Thank you Reza

[@RezaDorrani]

Glad you liked it!

[@JackPower-w3h]

Very informative 👏👏

[@RezaDorrani]

Glad it was helpful!

[@DaHooka]

Nice how to! Thanks

[@RezaDorrani]

Welcome

[@nelsonhsbc]

Excellent idea!

[@RezaDorrani]

Thanks!

[@hiwot3212]

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]

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

[@zanzaid]

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]

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.

[@richardhedley6751]

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]

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]

@@RezaDorrani thanks for responding, totally understand.

[@AhteshamKamali]

Awesome ❤❤, thanks for sharing

[@RezaDorrani]

Thanks for watching!

[@shaikhfirdos2723]

Amazing tricks..❤❤

[@RezaDorrani]

Thanks!

[@HiroshimaMS]

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

[@RezaDorrani]

Most welcome

[@romerbi]

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]

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.

[@luisfernandomacedo1451]

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

[@RezaDorrani]

Its only through the Gold membership

[@anur9860]

Well explained

[@RezaDorrani]

Thanks

[@champkiddoo9968]

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

[@RezaDorrani]

Those are probably emojis. Windows+.

[@philippkowalski1105]

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]

Check General section in settings

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

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

[@paolovr1970]

Thanks Reza 🙏🙏🙏

[@RezaDorrani]

Most welcome

[@craigwhite5429]

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]

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.

[@AnanyaSri-yg6is]

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

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

[@hetaldubal5562]

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]

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.

[@ayus43]

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]

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

[@yijinlin6885]

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]

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.

[@hasaninew]

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

[@RezaDorrani]

Setting is now in General Tab. Check kzbin.info/www/bejne/iojGgqqlmLGme5Ysi=U34IaBzdqgEPeWWE

[@Amit4u4365day]

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

[@RezaDorrani]

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

[@andresfriss687]

muito bom!!!

[@RezaDorrani]

Obrigada

[@dandrem.4074]

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

[@RezaDorrani]

No

[@dandrem.4074]

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

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

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

[@RezaDorrani]

@@dandrem.4074 Copy and paste to move controls

[@HabeshaBliss]

I can still use dialogue box for non responsive Apps?

[@RezaDorrani]

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

[@mallelajyothi9819]

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

[@RezaDorrani]

Please check documentation on PAD

[@trivenijoshi4389]

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

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

[@JohnHall]

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]

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.

[@hetaldubal5562]

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

[@RezaDorrani]

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

[@rohitnema1556]

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]

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 KZbin feature which channel owners can turn on. There onwards the entire process is controlled by KZbin

[@rohitnema1556]

@@RezaDorrani Thanks

[@AnanyaSri-yg6is]

Its better if u share that type of scenarios

[@RezaDorrani]

What scenario?

[@Itsyunusahmed]

🎉

[@RezaDorrani]

👍

[@Ali-h1p7v]

Good work but coding still faster.

[@RezaDorrani]

KZbin has an option to slow down the speed 😉

[@BevinKumarKA]

*Genius *

[@RezaDorrani]

Thanks

[@shaikmohammedabdulsamad343]

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

[@RezaDorrani]

You are most welcome!