How to size Power Apps components dynamically in 1 easy step!

The new Power Apps components feature adds a lot of options for reusing elements within your App. In this post I’m going to look at how to size Power Apps components.

Create a component

When you create a new component in your App you will get something like this:

The height is set to 640 and the width is set to 640. I’m not sure why this is set as a default size, but I do know that I hardly ever create components that are 640×640.

You could now decide to add some controls to this component however it might help to set the height and width first. In my example in this post I will get my component to be sized properly first before I look at the content of my component.

I’m first going to look at creating a header for my app. In this header I want to display the title of my screen. The width of the header should stretch the full width of my app and I want the header to be 40px high while it displays the text in white on an orange back ground.

Size Power Apps components

I could of course update the component details to something like shown below but what if my app size is changed?

When the width of my app is changed to something different then I will need to update my components. That isn’t very convenient. For many of the components you might find that the size of the component depends on the size available within the app. When you copy components form one app to the other you might even find that you have different sizes of apps.

You can however from your component refer to the width of the app and therefor size Power Apps components dynamically. Dynamically sized Apps will be easy to maintain and help you make your apps more responsive. As shown below I’m going to use App.Width to set the width of my component.

Adding the header text

Now that I’ve got the Width of the app I’m ready to get the text added to the header.

Now I’m adding a label and set the text of the label to App.ActiveScreen.Name. This will collect the current screen name from the app.

Which ever screen you are on in your app the App.ActiveScreen.Name will give you the name of the currently active screen. Therefor it will be important to name your screens properly, if you weren’t already doing so for accessibility reasons.

Add the component to a screen

Time to switch to my app and add the component that I’ve developed. We will now see the advantage of the way we did size Power Apps components quite quickly. In the Custom menu option, I’m finding the cmpHeader component back.

And the result is there! A component showing a header in my app. The title of my screen is used to set the text.  All we now have to do is name the screens properly!

Now I can add as many screens as I want without the need to pass any details to my header component. The component will collect the information that it needs.

Other uses

In this post the example of a header is quite simple. Other uses could be thing like a left hand menu that needs to be created across many of the screens. Using the Create your menus using a gallery in PowerApps idea, you could also create a component feeding your menus in a similar way.

Similar to the header you could also add a footer component to your pages. When you size Power Apps components as described you can create a screen layout that can be specified within the components and only the variable bits then need to be developed within your power apps screens, making it easier to maintain your company standards.