Content of the Article

Until now there was no possibility to use reusable components in Microsoft PowerApps. It is possible to copy & paste individual components and paste them into the required place.

However, if you want to make changes to this component, these changes must be made to all copied components individually. With the introduction of reusable components, you can create the component once, insert it into the canvas app as often as you like, and then edit them all at the same time.

So far, the feature is just an experimental feature. This means that you must enable it in the advanced app setting and there is no guarantee that it will actually be released in the future. In the following article, we'll explain how to unlock experimental features and what you can use reusable components for.

PowerApps Reusable Components

Unlocking Experimental Features in PowerApps

To open the advanced settings, you must first open the app in the PowerApps Studio.

Component PowerApps

Then click on "File" and select "Advanced settings".

Component PowerApps

Component PowerApps

At the top are the preview features. Scroll down to the Experimental Features. Activate the feature "Components".

Component PowerApps

Please note that the function "Improved App Rendering" must be activated for the preview features.

Component PowerApps

Creating a Reusable Component in Microsoft PowerApps

If the feature is enabled, you can create a new component under "Insert" and "Components".

Component PowerApps

We want to create a reusable header. Therefore we first change the name of the component and also the proportions. The default proportions are 640x640.

Component PowerApps

Component PowerApps

We'll insert a label. A label can contain text, numbers, dates or currencies. We are only interested in a text.

Component PowerApps

Under the icons we select the back icon.

Component PowerApps

Adjust the size and position of the two elements. Select the Back icon and select the back-function as the executing function for OnSelect.

Component PowerApps

Next, we'll insert a picture. The element should be dynamic and contain the image of the user. Select the picture element and type in the user formula.

Component PowerApps

Component PowerApps

Creating Custom Properties in Microsoft PowerApps

Now it is time to create custom properties and use them in the component. With Custom Properties you can determine for example fill color, color, proportions and much more. If elements in a component reference a custom property and adjustments are made to the custom property, these changes are immediately active for all components.

Data types such as value, text, table or color are available. This allows experienced PowerApps users to automatically resize elements when the size of a component changes.

First, we create a color. Pay special attention to the property name. This name is unique and will be reused later in the formula. Select "Input" as property type and "Color" as a data type.

Component PowerApps

If you now click Color, you can set a default color.

Component PowerApps

Now we want the two elements (back icon and text) to reference the color property. To do this, click on the element, select the font color and enter "NameOfTheComponent.NameOfTheProperty" as the formula. In our case, "Header.Color".

Component PowerApps

Now we want to adjust the fill color of our component.

Component PowerApps

Due to the dark blue we are no longer able to see the two inserted elements. To make them visible again, we select white in the Color Property. Thanks to the referencing, the color of both elements is adapted.

Component PowerApps

Component PowerApps

Now we create a text property for our component.

Component PowerApps

Now select the text element and reference it to the text property you just created.

Component PowerApps

If the text for the text property is adjusted, this automatically happens on our component as well.

Component PowerApps

Using a Reusable Component

Now we can reuse the component in the application. Switch from Components to Screens and insert the newly created component into the application.

Component PowerApps

Of course, you can also edit the inserted component and its elements directly in the app. But be careful, if you edit an element directly in the app for which a custom property has been created, changes from the custom property will no longer be applied.

Component PowerApps

Conclusion of reusable components in Microsoft PowerApps

Even if this is an experimental feature, and we cannot be sure whether this function will actually be available in the future. We are pretty sure, Microsoft will release a very similar feature or even exactly this one.

Especially with bigger applications, it would be very helpful to edit the same components simultaneously. There is also the possibility, with the help of Collections and the LookUp function, to display dynamic text contents in the components.

For example, can the name of the page be displayed dynamically. This allows manual work to be reduced to a minimum due to subsequent changes.

Do you have any further questions? Contact one of our consultants or leave a comment.