Power Apps Responsive Design Tutorial for Canvas Apps
HTML-код
- Опубликовано: 8 сен 2024
- In this Microsoft PowerApps tutorial for Responsive design, we will walk through setting up your App for responsiveness along with understanding the App & Screen properties, building responsive galleries & responsive forms.
Responsive Gallery 17:00
Responsive Form Control 22:26
If you create a responsive layout, controls can respond to different devices or window sizes, making various experiences feel more natural. To achieve responsive layout, you adjust some settings and write expressions throughout your app.
Microsoft Blog: docs.microsoft...
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
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.
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'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.
Excellent Explanation Thank you so much
You are most welcome
Congratulations Reza, very good tutorial !
Thank you!
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 ruclips.net/video/1o2L0DADzKQ/видео.html
Simply the best tutorial with complete explanation. Thumbs Up.
Much appreciated!
Thank you for your informative video. This is very easy to understand and very detailed.
You are most welcome!
Awesome tricks...👍🏼👍🏼🎉
Thanks 🤗
All class Reza, well done
Thank You Thomas
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
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.
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.
Learnt a few new things and got some great ideas. Thanks!
Thanks for watching
Excellent guide Reza, you always come up with something new. Thanks a lot.
Thank you Viraj
Very informative on Responsiveness--Appreciate your time..
Thank you
Fantastic!!!
Thanks
It's Amazing @Reza
Thank You
Great tutorial for responsive design. Cannot resist from subscribing the channel. Looking forward for such great tutorial videos.
Thanks for the sub.
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 :)
👏👏👏bravo. great tutorial
Thanks
Thanks a lot. As usual very informative, clear and useful.
Glad it was helpful!
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 :)
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:)
Awesome video Reza. Greetings from Colombia
Thank you Juan. Greetings from USA.
Thank you sm!
Most welcome
Amazing, just what I needed. Definitely subscribed.
Welcome aboard!
Wow, it was much needed.
Thanks Reza
Thank you Sayyed
Excellent video.. 👍
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.
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
Excellent as always.
Thanks Ketan
Great Tutorial! Just love it!!
Thanks so much!
great!!!!
Thanks
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 RUclips 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. RUclips does take a while before posting the full resolution.
Try it out and let me know.
@@RezaDorrani For me its still same... May be RUclips 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?
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.
Very cool
Thank you Jorge.
There have been some new announcements on responsive design in the past few weeks - ruclips.net/video/bND8yN4jng0/видео.html
I followed you as fast as a knife through butter.
🧈 🍴 Welcome aboard 😊
Thank you!!
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
Talent has a name called Reza Dorrani, nice and appreciate you
Thank you for your kind words
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.
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 - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_
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.
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.
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.
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
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.
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 RUclips would get me into teaching :)
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.
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 RUclips 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 :)
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 - ruclips.net/video/bND8yN4jng0/видео.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 - ruclips.net/video/F67_sZYMC2E/видео.html
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 ruclips.net/video/HIS36rspx6g/видео.html video. It has no user image. Sorry but I am not sure how to help.
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
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.
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 😊
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 - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_
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.
Can you do a video on PCF
I am assuming this is for a beginners guide for pcf
Check this video
ruclips.net/video/u2YIhcKMWBQ/видео.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.
👍
:)
How about putting formulas in your description please which going to help us enormously 🤔
Hi is this powerapps usable for frontend developers?
Power Apps is made for everyone - front end devs, admins, power users, business users etc.
Why do many stripes on the screen? I am very interested in this topic. :((
What time in video?
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 - ruclips.net/video/prWj2oGgAHY/видео.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.
Hi Reza, So sorry, it is not available on the site.
RUclips is currently down :)
Give it an hour or two.
RUclips and my video both are up and running now :)
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 ruclips.net/video/1o2L0DADzKQ/видео.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
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.