Recently the PowerApps team released a new feature in preview – Components. I was really looking forward to the availability of this feature. An excellent reason to share my experience trying it out.
Components are described as groups of controls that can be reused across screens and apps.
Because this feature is still in preview it is only available for apps created in a preview environment. More info about the preview environment you can find in the PowerApps documentation. Create your app in the Preview environment, go to the App settings and switch on the Components feature on the bottom of the list. The feature is available immediately.
NOTE: the product team is actively working on this feature. The working of the feature might change over time.
Components in the app designer
In the app designer a new Components tab is available in the left navigation pane next to the Screens tab, accompanied by a new Components menu item under the Insert tab.
Both menu options offer the New Component option and a import and export component menu item – more about that later. When you click New component a new canvas will open up in middle pane looking similar to a new screen canvas, apart from the size. This canvas is where you build your new component on for reuse in the app. The component has a default name that you can change and some layout properties, like size and color. Unlike the screen canvas you can change the height and width of each component canvas.
Building a component
You start building your component by adding controls from the insert menu to the canvas, just like you would do on a screen canvas. A component could be something as simple as a control with some properties set to a specific set of values. I thought it would be nice to make something a little bit more complex. I decide to build one of the composite controls examples you can find in the PowerApps blog : the Numeric up and down counter.
I created this composite control before, so all I needed to do is copy – paste the grouped controls to a new component canvas in an app in my preview environment.
Only global variables
One of my first findings was that the concept of context variables is not available in a component. Since the example of the Numeric Up and Down counter depends on a context variable to set the number, I needed to rethink how to set this number. Global variables are supported though. But, global in this case means ‘The whole component' instead of ‘The whole app'.
For the Up and Down Counter I simply changed all formulas to set global variables instead of context variables. And I used the default property of the text box to set the starting number of the counter.
Size of the canvas
I changed the name of the component to NumUpDown. Switching back to the screen view my NumUpDown component was added as a new item in the Components menu. After selecting this item the up an down counter including the component canvas were added to the screen as a single control. The length and with of this control were the same as the component canvas. Changing the size into something that matches the controls on the canvas is something to take into consideration when you start building a component.
Input and output properties
At this point I have a custom build control, that can count up and down. But as it is now I cannot bring data into the control or use the counter value as output. There are only 6 properties that come default with the component: Fill, Height, Width, X, Y and Visible. Since the default properties only refer to layout settings, the amount of options to add logic to the component with these properties is very limited. This is where custom properties come in.
On the lower right pane of the properties tab in the Component view there is a menu item to add custom properties to the component. You can make Input properties to receive values from to app to use internally in the component. And Output properties to emit data or state from the component to use elsewhere in the app.
For the Up and Down counter I added a custom property to set the number that is used to add or subtract by selecting the up and down arrows. And an output property to get the current value of the counter. After saving the custom properties, extra property fields are added in the Data section of the Advanced tab in the right pane.
Now you can add formulas to these properties. In my case I added a formula to the Value-output property so it would get the value of the counter text field. And I updated the OnSelect formulas of the up and down arrows to look at the CounterUnit property to determine how much to add or subtract from the current counter value.
With these properties my component basically became a functioning control that can receive or emit data or state.
Preview the component
While in the component view the app preview mode is disabled. You can use the the Alt-key – select combination to preview the control, but the result of trying out your component this way is unpredictable. The best way to test out your component is to add it to a screen and try it out that way. My experience is that most changes that you make to your component will be applied to the component on the screen.
Reusability
After creating the component you can add it as often as you like to your app. But to reuse the component in other apps you need the export – import options in the component context menu – since the component canvas can not be copy – pasted from one app to another.
The Export components action exports all components available in the app in a single .msapp file. This file can be selected in another app through the Import components action. If a component with the same name is already available in the app you are asked if you want to replace the component or cancel the import.
Conclusion
This new feature will bring even more functionality to easily build powerful apps. The reusability is a big plus in my opinion. The same techniques that are used to build a canvas app are used to build components. No special new skills needed, which is nice.
Area for improvement is the error messages around the use of context variables. Something like a notification that clearly states that context variables are not supported in components would have been nice.