Components: Start your Journey with Reusable Controls
In my first month of joining Microsoft, Emma Cooper, a Program Manager on the PowerApps team, knocked on my door with a shine of delight in her eyes.
“You can copy and paste controls from one tab to another. Do you want to try it out?” Emma knew my answer without me needing to say a word. My inner geek already opened up a tab and I was in PowerApps heaven.
But it was not yet time to share this wonderful news.
So when I saw the first demo of the reusable component feature, I knew I would have an even harder time keeping it to myself. Our community has been asking for reusability of controls and formulas. But, again, it was not yet time to announce them.
Here was a feature that would let me simplify the construction of my apps even further. Not only could I save myself a copy paste, but I could revise the original (master-instance) and have its changes reflected across all screens of my app. I could export my favorite component and import a copy into another app.
I thought that was amazing.
I was thinking too small.
Brewing in the creative minds here at PowerApps was a way of taking this component capability even further: custom properties. Thinking of the properties that I had come to know and love–I could now define my own! Text, numbers, values, colors, records, tables… I could make properties of any type for whatever purpose I have.
Let me put this into perspective: I have pushed the limits of PowerApps to do things beyond what it is expected to do. But I must confess that while I have worked with components extensively, I have not yet come close to reaching the full power of custom properties.
So after holding in my eagerness for all this time, it is my privilege and my joy to announce to you on behalf of our hard working team that components are now available worldwide for everyone to create, to share, and to fall in love with PowerApps all over again.
Try Components Now
At the time of writing, components are publicly available and will no longer require a Preview environment. You will need to enable the feature in the studio:
File > App settings > Advanced settings > Components
Let’s learn and explore component creation together. As a first step into making components, you can watch this video on making a numeric up and down component and view the introductory blog and videos in the section for Additional Resources.
In the coming weeks, you can look forward to videos on learning new best practices as you create components.
Just as you have informed features like copy paste, we invite you to share your feedback about components on the PowerApps Community Forum. When you write a post, please include the message tags “components” and “new features.” This will help us follow up with questions specific to component creation.
Current limitations
The Components feature is a work in progress. It is important to understand its current limitations which our team is working to lift.
Below are some to be mindful of as you implement components into your apps or your organization’s apps. You can view the full documentation for more details.
- Known issue: locales that use non-English (United States) number or comma separators in formulas may receive an error when inserting a component. This issue has been resolved and a fix will roll out worldwide within two weeks (depends on your region).To mitigate this before then, you can revise the properties like Fill (of type Color) for your locale. For example, someone in Germany might revise the commas in a Fill property like this:
RGBA(0, 0, 0, 0) -> RGBA(0; 0; 0; 0) - Instance: a master-instance of a component is scoped to the app. It is a local master. This means that changes you make to the master-instance only affect the copies of the component within the app. The changes do not affect the copies in other apps.
- However, you can update the copies in other apps by explicitly re-importing the component ‘library’. It would automatically detect the masters imported previously and update them.
- Images: it is not yet possible to package media files when importing a component, but this feature is coming soon.
- Collections: using a collection within a component is not yet fully supported, but you can use variables today.
- Data sources: data sources are not saved with components. Forms and data-grids are disabled due to this reason.
- Nesting: components cannot be inserted into galleries, forms, and data cards today. Likewise, forms and data-grids cannot be embedded into components.
Additional Resources
Introducing Components blog by Yifei Wang
Component Best Practices Playlist (Bookmark this!)
For introductory information on the component feature, please view these previous videos.
Getting Started – Header Component