Responsive components in PowerApps

Microsoft has released Components as an experimental feature in PowerApps and of course, this has made me very excited.

A couple weeks back, Microsoft has announced this also on the PowerApps blog. There is an excellent example in there from Brian Dang. He has created a great example, but when I added this component to my canvas app and resized it to the width of my tablet size app it really didn't look well anymore.

Component-Before

Responsive components

Components are great to use in both tablet and mobile apps. You can easily edit a component to become responsive.

How does that work? Let me show you...

First, open the components tab and select the header component. There are a couple of parts in the header component:

  • Image3 - The user photo on the right side of the header
  • Arrow4 - The arrow icon on the left side of the header
  • Label4 - The label in the middle of the header

Adjust the X value of the image

Image3

Select Image3 in the tree view or select it in the canvas. Select the X in the properties panel and make sure you change the value to the following expression:

Header.Width - Image3.Width - 14

Image3-X

Adjust the width value of the label

Label4

Select Label4 in the tree view or select it in the canvas. Select width in the properties panel and make sure you change the value to:

Header.Width

Label4-Width

Wrap up

You can see it's really easy to make a component responsive.

Component-After

There's a lot of stuff that you can do to make a component even more responsive with resizing width and height based on the size of the component. I hope this gives you an understanding of how you can get started with responsive components.

responsive-layout

With the responsive apps just around the corner, it's a good idea to invest some time in this, because you can imagine this is a lifesaver.

Downloads

Download the orginal component here.
Download the responsive component here.

Comments

comments powered by Disqus