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.
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
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
Adjust the width value of the label
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:
You can see it's really easy to make a component responsive.
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.
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.