Content of the Article
- Unlocking Experimental Features in PowerApps
- Creating a Reusable Component in Microsoft PowerApps
- Creating Custom Properties in Microsoft PowerApps
- Using a Reusable Component
- Conclusion of reusable components in Microsoft PowerApps
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.
To open the advanced settings, you must first open the app in the PowerApps Studio.
Then click on "File" and select "Advanced settings".
At the top are the preview features. Scroll down to the Experimental Features. Activate the feature "Components".
Please note that the function "Improved App Rendering" must be activated for the preview features.
If the feature is enabled, you can create a new component under "Insert" and "Components".
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.
We'll insert a label. A label can contain text, numbers, dates or currencies. We are only interested in a text.
Under the icons we select the back icon.
Adjust the size and position of the two elements. Select the Back icon and select the back-function as the executing function for OnSelect.
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.
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.
If you now click Color, you can set a default color.
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".
Now we want to adjust the fill color of our component.
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.
Now we create a text property for our component.
Now select the text element and reference it to the text property you just created.
If the text for the text property is adjusted, this automatically happens on our component as well.
Now we can reuse the component in the application. Switch from Components to Screens and insert the newly created component into the application.
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.
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.