This was one of the best video tutorials that explains & shows how to build the responsive form. The biggest bonus was the Multi-card select tip. I’ve been doing one by one so I just avoided making these.
Your tutorials are an absolute game-changer in the Power Apps world! 🌟 Your dedication and expertise shine through in every video, making learning a breeze. Thanks for sharing your knowledge with the community and empowering us all , and we can't thank you enough! Keep rocking those tutorials! 🙌😄
I've learned more from this video than I have since I began working in PowerApps (almost a year). I kept hearing myself say "Are you KIDDING me?" because he made things that I've struggled with seem so simple with steps I didn't know existed. The bad thing is I've now got to go back and recreate most of the apps I've published. :-( Very nicely done, Reza! Looking forward to seeing more.
I'm new in this PowerApps development and was looking for a tutorial for responsive design in PowerApps. I must say this is the best video I've came across and the way you explained it is simply amazing and commendable. Thanks!
Thanks for the tutorial, it popped up in my suggested feed. Usually I don't comment but this was such a clear and concise video that I decided to. Have also subscribed.
Great Tutorial! Recently discovered you as I've been learning powerapps the past few months, appreciate how your videos are easy to follow and very thorough.
Easily the best video explaining responsive design in PowerApps, some touch on breakpoints but not much else that's useful for dealing with the different components and items you'll be using
@@RezaDorrani Hi Reza, I have question, if there are more than 10 field s in form and if I want to add more than one button ,then your trick is not working..can you please suggest any work around..
Fantastic video! At One question: At 22:43min, why ist the Comment Text directly larger then the other ones? In my cases the boxes are all the size. If I manually make it lager, my responsiv-disgn doesn’t work anymore 😕
I did this video long back so do not remember the specifics. Responsive design has come a long way since. Best to use responsive containers going forward. Check my playlist on responsive design
Awesome Video Reza, I really like your choice of topic. Looking forward for more videos on those topics which others normally don't cover. I like the multiple Datacard selection trick. :) Just one comment: The clarity of the video is not HD even though I selected max. HD in UA-cam settings.
Firstly thank you for the awesome feedback. Makes all the effort worthwhile. I did notice about the video topping up at 720p although it was uploaded in 1080p. I will check tomorrow.
@@RezaDorrani For me its still same... May be UA-cam need to watch your video to make it more Responsive ;) By the way, just a question, is it possible to make an app by combining two template Apps together. Let say, "Onboarding Tasks" and "Service Desk" template apps?
Thanks for great tutorial Reza. Concise, clear and to the point for popular requirement. Does the new container feature introduced in PowerApps help to reduce some of these formula's?
Thank you for the wonderful feedback. The new container feature does ease some of these formulas. However galleries, form controls and components also act like containers only. I do plan in future to do a v2 of responsive design and will cover those advanced concepts.
As always great video, thank you very much. One question, if i have a screen with two columns of dropdowns, txt box and labels controls, what is the best way to lay out it on the screen( eg inside a table or separate two section, etc, not sure what is the correct way) and make it responsive in canves app. Thanks.
You can use containers for a screen with multiple controls. Containers is currently in preview. I do plan to do a video on Containers in the future. I am also working on an App that I will be releasing shortly. That App is full of containers.
Thanks for this video! At the very end you stated that you can get the Submit button to be placed directly below the form by calculating the height of the form, but you didn't show that formula. I can't seem to get it right - can you share what that formula should be for the Height property of Form? Then I assume Y value of the button would be Form.Height + Form.Y?
Thank you Reza for this informative video. I was so happy to apply these settings changes to get my app to be responsive. I made the adjustments to my power app in the Screen size + orientation settings to make it so but my app does not honor the change. When I create a screen with the label texts, as in your example (at 5:46), to show screen sizes, my values do not adjust when the screen size is changed but stays on Value 1 for phone. Do you have any ideas why the responsive settings changes have no effect for me? I've saved and published, deleted cache, and tried the same on multiple browsers. Any ideas?
You mentioned you made changes so that you App does not honor the change. Did you update the App settings to enable responsiveness? You would have to do that else your App will always adhere to its base dimensions.
@@RezaDorrani Thanks for the reply. Yes I've updated settings by turning off Scale to fit and Lock aspect ratio. After publish and clear cache, the app is still not responsive. I've seen other videos suggesting to also try the Container control in Advanced Settings. After publish and clear cache, this change doesn't work either. I don't know what I am missing. The settings changes seem so simple to perform to create a responsive design. Weird huh?
Ah I think I got it. Previewing from inside the canvas editor after publish does not show the responsive qualities. However, playing the app from Component libraries screen (Apps list) does show the responsive qualities and the card "Responsive App", modeled after the example from your video, shows the screen size numbers as expected. Thank you that was driving me nuts :)
@@RezaDorrani yes, You provided some amazing tips. The Control and then the control A was a great tip. :) As a newbie I thank you for all you do, I know it's a lot of work.
Hi Reza, can it be possible if you can do a just a quick video building an eco (Engg Change Order )app .How can it be done .It will be really helpful .Thankyou
I make videos when I get multiple requests on a particular topic. I frequently (around once a month) ask subscribers for topic suggestions on my UA-cam channels community tab. Subscribers vote for topics and the highest voted ones is what I select. Be on the lookout for the next topic suggestion discussion.
Excellent Video Reza. A Quick Query - I have 8 columns and my desktop experience gives 4 columns in each row. But when i shrink the screen to have 3 columns, then my 1st and 3rd row has 3 columns and 2nd and 4th row has 1 column. Am i missing something. Any workaround or suggestion will be highly helpful
I remember my college days where I used to teach my friends. They always told me I would be a good teacher and I would laugh it off. Never knew UA-cam would get me into teaching :)
Hey Reza could you also kindly tell us how did you enable the option to show the picture of the person to from whom the ticket was created :) in here you created a ticket so in all tickets on the ticket your picture was show in the gallery form. Excited to find out thanks again
Hi Reza it's at the beginning of the video at 1:07 time frame and if you see next to your name there is a picture and same goes for James Taylor he made the ticket so his picture is being shown. Thanks for the prompt reply
No it's actually the same video and in the ticket section if you see along side User full name of the person who created the ticket there is also his picture and I would like to know how to integrate that.
Can you make an existing App responsive or you need to recreate from the scratch and implement the tricks shown in this video before you do your building blocks??
You can make it responsive by working through screen by screen. It is a lot of work. The new responsive screen layouts and containers do help - ua-cam.com/video/bND8yN4jng0/v-deo.html
Cool, but I have created a form using a data source control, but no data is showing up and nothing shows up in preview? Is there a tutorial on how to make a basic editable form from a list? This seems incredibly hard to do. Thx
Hi Tim, the form control has a mode property associated with it. You can set the form mode to New Edit or View by using formulas. If form mode is edit or display, then it needs to have its Item property filled out. Check this - ua-cam.com/video/F67_sZYMC2E/v-deo.html
Hi Raza, Thank you for this very easy to understand tutorial. There is 1 issue i am facing. In a form when snap to column=3 and all the setting are similar to yours. In a layout where the form is suppose to show 2 columns/raw. It is changing the layout and showing 2 columns but, after every 3(value of snap to column) columns it is changing the line (by changing the axis) Which means , in a layout of 2 you have 2 controls, then next line only 1 (because that makes 3 in total) This repeats after every 3 columns. Any solution for this
@@RezaDorrani So in this case, I tried several things but nothing seems to work. Is there a way around? For now I ended up setting snap to column to 2.
Hi, when building apps in teams canvas apps, the responsive is bit difficult to achieve, can we build same app for mobile and desktop, in the same app, and based on the screen size etc.. info, the app should load either for mobile or desktop screens - can you guide how to do this?
When I set the form to 2 columns and increase screen size to 3 or 4, the form doesn't expand to the full size. It gets to a certain size and stops expanding.. any ideas?
I seriously wish I hadn't followed this and created a blank power app, which I then was unable to connect to my list to replace the forms. So, yes, there is some great stuff here, but this was a big gotcha resulting in re-work.
@@RezaDorrani Hello Reza, issue goes on there still for screen size 3, 20:44 (from community call) you already mentioned this issue once more there. did you find a solution for that. we cant implement it like this. thats not helping at all.
I did in same way but responsiveness is not working below 1700 size..When i shrink my screen it will show half screen of the app.What can be the reason?
That is probably because the App has a minimum dimension set. Responsive design has come a long way with the new responsive containers. Check ua-cam.com/video/1o2L0DADzKQ/v-deo.html
@@RezaDorrani Thanks Reza. This is the issue with app preview. Because when I play app it works fine. But in preview it shows extra outer space and non-responsive.
I have a full playlist on responsive design. All you have to do is bind your collection to a gallery to show the data. So focus on making the gallery responsive.
This was one of the best video tutorials that explains & shows how to build the responsive form. The biggest bonus was the Multi-card select tip. I’ve been doing one by one so I just avoided making these.
Thank you
@@RezaDorraniamazing v
Your tutorials are an absolute game-changer in the Power Apps world! 🌟 Your dedication and expertise shine through in every video, making learning a breeze. Thanks for sharing your knowledge with the community and empowering us all , and we can't thank you enough! Keep rocking those tutorials! 🙌😄
Wow, thank you! I will keep trying my best
I've learned more from this video than I have since I began working in PowerApps (almost a year). I kept hearing myself say "Are you KIDDING me?" because he made things that I've struggled with seem so simple with steps I didn't know existed. The bad thing is I've now got to go back and recreate most of the apps I've published. :-( Very nicely done, Reza! Looking forward to seeing more.
Thank you so much for the fantastic feedback.
Appreciate the subscription and I will try to best to keep producing quality videos.
I'm new in this PowerApps development and was looking for a tutorial for responsive design in PowerApps. I must say this is the best video I've came across and the way you explained it is simply amazing and commendable. Thanks!
Thank you Sahil for the amazing feedback. Makes all my efforts worthwhile.
Simply the best tutorial with complete explanation. Thumbs Up.
Much appreciated!
Thanks for the tutorial, it popped up in my suggested feed.
Usually I don't comment but this was such a clear and concise video that I decided to.
Have also subscribed.
Thank you Mark for your kind words and thanks for the sub.
Great tutorial for responsive design. Cannot resist from subscribing the channel. Looking forward for such great tutorial videos.
Thanks for the sub.
Great Tutorial! Recently discovered you as I've been learning powerapps the past few months, appreciate how your videos are easy to follow and very thorough.
Thank you for your kind words.
One of the best Video by Reza. Thank you for providing solution. I was looking for Responsive screen solution and it is simply, amazing :)
Glad to hear that
Easily the best video explaining responsive design in PowerApps, some touch on breakpoints but not much else that's useful for dealing with the different components and items you'll be using
Thank You 😊
I do have a more recent video on responsive design. Check ua-cam.com/video/1o2L0DADzKQ/v-deo.html
Congratulations Reza, very good tutorial !
Thank you!
Excellent guide Reza, you always come up with something new. Thanks a lot.
Thank you Viraj
Thanks a lot. As usual very informative, clear and useful.
Glad it was helpful!
Thank you for your informative video. This is very easy to understand and very detailed.
You are most welcome!
Thank you, Reza! Wonderful video. Very informative and useful.
Most welcome
Thank you for watching
Bravo Reza,
Very informative and engaging I'm going to watch it again.
Please continue with more videos:)
Thank you :)
Excellent Explanation Thank you so much
You are most welcome
Learnt a few new things and got some great ideas. Thanks!
Thanks for watching
Great tutorial Reza. Specially the DataCard width piece was something new for me. Thank you :)
Glad you liked it!
That hack I came across while prepping for this video. It just worked :)
Very informative on Responsiveness--Appreciate your time..
Thank you
Great start for new comers..you nailed it.🔥
Thanks Yash
@@RezaDorrani Hi Reza, I have question, if there are more than 10 field s in form and if I want to add more than one button ,then your trick is not working..can you please suggest any work around..
@@yashwantsuryawanshi9080 It should work. Try posting your query with screenshots on the community forum.
Awesome video Reza. Greetings from Colombia
Thank you Juan. Greetings from USA.
Amazing, just what I needed. Definitely subscribed.
Welcome aboard!
Gratitude !!!!
This is one of the video that I found very informative. Oh My God you got a new subscriber 😍
Thank you for your kind words
All class Reza, well done
Thank You Thomas
Awesome tricks...👍🏼👍🏼🎉
Thanks 🤗
Amazing Video Reza! Thank you.
Thank you Matt! Glad you liked it and congratulations on being in the top 5 of the Power Apps demo extravaganza:)
Wow, it was much needed.
Thanks Reza
Thank you Sayyed
Fantastic video! At One question: At 22:43min, why ist the Comment Text directly larger then the other ones? In my cases the boxes are all the size. If I manually make it lager, my responsiv-disgn doesn’t work anymore 😕
I did this video long back so do not remember the specifics.
Responsive design has come a long way since. Best to use responsive containers going forward.
Check my playlist on responsive design
👏👏👏bravo. great tutorial
Thanks
Great Tutorial! Just love it!!
Thanks so much!
Excellent as always.
Thanks Ketan
Excellent video.. 👍
Thank you
It's Amazing @Reza
Thank You
Awesome Video Reza, I really like your choice of topic. Looking forward for more videos on those topics which others normally don't cover. I like the multiple Datacard selection trick. :)
Just one comment: The clarity of the video is not HD even though I selected max. HD in UA-cam settings.
Firstly thank you for the awesome feedback. Makes all the effort worthwhile.
I did notice about the video topping up at 720p although it was uploaded in 1080p. I will check tomorrow.
Just noticed 1080p showed up. UA-cam does take a while before posting the full resolution.
Try it out and let me know.
@@RezaDorrani For me its still same... May be UA-cam need to watch your video to make it more Responsive ;)
By the way, just a question, is it possible to make an app by combining two template Apps together. Let say, "Onboarding Tasks" and "Service Desk" template apps?
Thanks for great tutorial Reza. Concise, clear and to the point for popular requirement. Does the new container feature introduced in PowerApps help to reduce some of these formula's?
Thank you for the wonderful feedback.
The new container feature does ease some of these formulas. However galleries, form controls and components also act like containers only.
I do plan in future to do a v2 of responsive design and will cover those advanced concepts.
@@RezaDorrani Thank you. Looking forward for v2
Great tutorial Reza, thank you!! It is possible to apply the same logic to the letter size?
Yes works both ways. Some formulas may need a few tweaks if you begin with tablet mode but the concept is similar.
As always great video, thank you very much. One question, if i have a screen with two columns of dropdowns, txt box and labels controls, what is the best way to lay out it on the screen( eg inside a table or separate two section, etc, not sure what is the correct way) and make it responsive in canves app. Thanks.
You can use containers for a screen with multiple controls. Containers is currently in preview. I do plan to do a video on Containers in the future.
I am also working on an App that I will be releasing shortly. That App is full of containers.
@@RezaDorrani thanks , much appreciated your knowledge sharing.
Thanks for this video! At the very end you stated that you can get the Submit button to be placed directly below the form by calculating the height of the form, but you didn't show that formula. I can't seem to get it right - can you share what that formula should be for the Height property of Form? Then I assume Y value of the button would be Form.Height + Form.Y?
Your formula is correct. I had tried it and it worked but some recent updates seem to have an issue with calculating the height of the form.
Thank you Reza for this informative video. I was so happy to apply these settings changes to get my app to be responsive. I made the adjustments to my power app in the Screen size + orientation settings to make it so but my app does not honor the change. When I create a screen with the label texts, as in your example (at 5:46), to show screen sizes, my values do not adjust when the screen size is changed but stays on Value 1 for phone. Do you have any ideas why the responsive settings changes have no effect for me? I've saved and published, deleted cache, and tried the same on multiple browsers. Any ideas?
You mentioned you made changes so that you App does not honor the change. Did you update the App settings to enable responsiveness? You would have to do that else your App will always adhere to its base dimensions.
@@RezaDorrani Thanks for the reply. Yes I've updated settings by turning off Scale to fit and Lock aspect ratio. After publish and clear cache, the app is still not responsive. I've seen other videos suggesting to also try the Container control in Advanced Settings. After publish and clear cache, this change doesn't work either. I don't know what I am missing. The settings changes seem so simple to perform to create a responsive design. Weird huh?
Brett Governanti Try building a new App just to test the responsiveness.
Ah I think I got it. Previewing from inside the canvas editor after publish does not show the responsive qualities. However, playing the app from Component libraries screen (Apps list) does show the responsive qualities and the card "Responsive App", modeled after the example from your video, shows the screen size numbers as expected. Thank you that was driving me nuts :)
Brett Governanti It was mentioned in the video 😊
Awesome video Thank you :)
Thank you Angel.
I personally felt this video was cool :)
Specially for the form control data cards trick for responsiveness.
Simple but effective.
@@RezaDorrani yes, You provided some amazing tips. The Control and then the control A was a great tip. :) As a newbie I thank you for all you do, I know it's a lot of work.
Hey, great tutorial!, Could you provide the dataset links?
Dataset is a standard sharepoint list. You can use this video technique with any SharePoint list of your choice.
I followed you as fast as a knife through butter.
🧈 🍴 Welcome aboard 😊
Thank you!!
Fantastic!!!
Thanks
Reza first thing first excellent session as always!
QQ: Can't we see check behavior of the design across devices without publishing every time?
Thank you!
To check responsiveness the only option today is to publish the App.
Hi Reza, can it be possible if you can do a just a quick video building an eco (Engg Change Order )app .How can it be done .It will be really helpful .Thankyou
I make videos when I get multiple requests on a particular topic.
I frequently (around once a month) ask subscribers for topic suggestions on my UA-cam channels community tab.
Subscribers vote for topics and the highest voted ones is what I select.
Be on the lookout for the next topic suggestion discussion.
@@RezaDorrani Thanks Reza :)
Excellent Video Reza.
A Quick Query - I have 8 columns and my desktop experience gives 4 columns in each row. But when i shrink the screen to have 3 columns, then my 1st and 3rd row has 3 columns and 2nd and 4th row has 1 column. Am i missing something. Any workaround or suggestion will be highly helpful
You may have to play with the X and Y formulas for the data cards to get it to work.
"Which is defined!"
if everyone shouted this while they were teaching i would have understood this in college.
I remember my college days where I used to teach my friends. They always told me I would be a good teacher and I would laugh it off. Never knew UA-cam would get me into teaching :)
Talent has a name called Reza Dorrani, nice and appreciate you
Thank you for your kind words
Hey Reza could you also kindly tell us how did you enable the option to show the picture of the person to from whom the ticket was created :) in here you created a ticket so in all tickets on the ticket your picture was show in the gallery form. Excited to find out thanks again
Can you point me to the timing in the video where I showcase the picture of the person?
Hi Reza it's at the beginning of the video at 1:07 time frame and if you see next to your name there is a picture and same goes for James Taylor he made the ticket so his picture is being shown. Thanks for the prompt reply
@@arsalsubhan Are you sure? At 1:07 its adding the App name. You may be talking about a different video.
No it's actually the same video and in the ticket section if you see along side User full name of the person who created the ticket there is also his picture and I would like to know how to integrate that.
@@arsalsubhan You are commenting on ua-cam.com/video/HIS36rspx6g/v-deo.html video. It has no user image. Sorry but I am not sure how to help.
Thank you sm!
Most welcome
Very cool
Thank you Jorge.
There have been some new announcements on responsive design in the past few weeks - ua-cam.com/video/bND8yN4jng0/v-deo.html
Can you make an existing App responsive or you need to recreate from the scratch and implement the tricks shown in this video before you do your building blocks??
You can make it responsive by working through screen by screen. It is a lot of work. The new responsive screen layouts and containers do help - ua-cam.com/video/bND8yN4jng0/v-deo.html
Cool, but I have created a form using a data source control, but no data is showing up and nothing shows up in preview? Is there a tutorial on how to make a basic editable form from a list? This seems incredibly hard to do. Thx
Hi Tim, the form control has a mode property associated with it. You can set the form mode to New Edit or View by using formulas. If form mode is edit or display, then it needs to have its Item property filled out.
Check this - ua-cam.com/video/F67_sZYMC2E/v-deo.html
Hi Raza, Thank you for this very easy to understand tutorial.
There is 1 issue i am facing.
In a form when snap to column=3 and all the setting are similar to yours.
In a layout where the form is suppose to show 2 columns/raw. It is changing the layout and showing 2 columns but, after every 3(value of snap to column) columns it is changing the line (by changing the axis)
Which means , in a layout of 2
you have 2 controls, then next line only 1 (because that makes 3 in total)
This repeats after every 3 columns.
Any solution for this
Since your snap to column value is equal to the number of controls in your form. I can see this scenario in your video
Snap to columns 3 has a known bug. It distorts the form.
@@RezaDorrani So in this case, I tried several things but nothing seems to work. Is there a way around?
For now I ended up setting snap to column to 2.
@@waqasidris4891 Snap to 2 or 4 would be better options since 3 has been a known bug since a long time.
@@RezaDorrani Same case with 4, it changes the line after 4 controls
Hi, when building apps in teams canvas apps, the responsive is bit difficult to achieve, can we build same app for mobile and desktop, in the same app, and based on the screen size etc.. info, the app should load either for mobile or desktop screens - can you guide how to do this?
Check my responsive design playlist - ua-cam.com/play/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_.html
Bonjour Reza
J'aime bien tes cours. Je suis francophone mais j'ai besoin de cours en power Apps. Quelles sont les conditions?
I do not offer any courses.
When I set the form to 2 columns and increase screen size to 3 or 4, the form doesn't expand to the full size. It gets to a certain size and stops expanding.. any ideas?
There are still a lot of bugs with the container control. Remember these controls are in preview.
Hey Reza,
Have you covered any scenario where same app is responsive in Mobile and In Laptop or Tablet?
Thanks in advance
I mean when user open the app in mobile it opens in Mobile format and when user opens in Laptop it opens in that layout.
I have a full responsive series playlist
"scale to fit" - ensure this is set to off. I have shown this in video and almost in all of my responsive design videos.
Can you do a video on PCF
I am assuming this is for a beginners guide for pcf
Check this video
ua-cam.com/video/u2YIhcKMWBQ/v-deo.html
Really impressive. Why Microsoft locked it’s App remains the question. Isn’t responsive the best way forward? 🤔🙈😬
Responsiveness is the best way forward but it is a choice.
great!!!!
Thanks
I seriously wish I hadn't followed this and created a blank power app, which I then was unable to connect to my list to replace the forms. So, yes, there is some great stuff here, but this was a big gotcha resulting in re-work.
I would recommend looking into responsive design containers - ua-cam.com/play/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_.html
Please make a video on insert Table in text editor
Do you mean the rich text editor control?
What is the scenario you are trying to accomplish?
@@RezaDorrani Email, I wish to insert Table while composing mail from Powerapps Just like option in OWA.
Size 3 is creating an issue with more than 4 items at form. Any work around?
Check my demo on the community call here - ua-cam.com/video/prWj2oGgAHY/v-deo.html
@@RezaDorrani Hello Reza, issue goes on there still for screen size 3, 20:44 (from community call) you already mentioned this issue once more there. did you find a solution for that. we cant implement it like this. thats not helping at all.
@@speranza4music Check screen size, if 3 then force layout to 4 columns.
@@RezaDorrani not the best option but yes possible. hope they will fix this. looks really like a bug, thank you.
@@speranza4music It is a bug.
Why do many stripes on the screen? I am very interested in this topic. :((
What time in video?
Hi is this powerapps usable for frontend developers?
Power Apps is made for everyone - front end devs, admins, power users, business users etc.
I did in same way but responsiveness is not working below 1700 size..When i shrink my screen it will show half screen of the app.What can be the reason?
That is probably because the App has a minimum dimension set.
Responsive design has come a long way with the new responsive containers. Check ua-cam.com/video/1o2L0DADzKQ/v-deo.html
@@RezaDorrani Thanks Reza. This is the issue with app preview. Because when I play app it works fine. But in preview it shows extra outer space and non-responsive.
@@supriyamadiwal5466 Report the issue on powerusers.microsoft.com/t5/Power-Apps-Ideas/idb-p/PowerAppsIdeas
@@RezaDorrani Sure, Thanks for quick response 😊
Reza, Is there a way to integrate content type in powerapp?
Like on dynamic selection on content type it will move to that specific powerapp screen
Hi Reza, So sorry, it is not available on the site.
UA-cam is currently down :)
Give it an hour or two.
UA-cam and my video both are up and running now :)
👍
:)
How about putting formulas in your description please which going to help us enormously 🤔
I have collection data columns in my app , how can I create the responsive app?
I have a full playlist on responsive design.
All you have to do is bind your collection to a gallery to show the data. So focus on making the gallery responsive.