How to create custom components in PowerApps in 10 minutes

PowerApps can be a powerful tool for creating fast prototypes, small business apps, and proof of concepts. There are a lot of built-in components that are useful but often require a lot of configuration if you want more than just the default functions and style.

Enter PowerApps components. Components let you create your own reusable components which can be exported and imported to different projects, and make maintenance a lot easier for developers.

Components are useful in building larger apps that have similar control patterns. If you update a component definition, all instances in the app reflect your changes. You can also improve performance by using one or more components because you don’t copy and paste controls, which duplicates overhead.

Components are isolated instances that are decoupled from your app. This means that a custom component can’t access variables declared in your app unless they are parsed as properties into the component (more on that later).

Create your first component

The first thing you need to do is enable components:

1. Open the PowerApps Studio.
2. Go to App settings > Advanced settings.
3. Turn on “Components” in Experimental features.
4. In the Tree View, select “Components” and you will land on a square canvas.

Now you will be able to see Components in PowerApps studio.

Let’s try to build a simple component.

When creating a new component, you can use all the default components such as buttons, galleries, media and so on. For the sake of simplicity I won’t dive into the more advanced components but use something simple as a button.

Create a new component and gave it a meaningful name and add a button component to it:

So far nothing fancy. Let’s try and give the component a bit more options. Selecting the newly created component you can create custom properties:

Custom properties allow you to parse input from the app and output values back from the component. These can be used to do internal logics inside the component or for changing the content of the component.

Create a new custom property and call it Title, select Input as property type and use Text as data type.

Now we can use the input property for changing things inside our component. Click on the button we added earlier and set the Text value to CustomButton.Title.

As seen here we can now access the new input property and use it. Try adding a few more input properties like color and font-size.

Navigate back to Screens and now you can add your new component (Insert -> Components).

Update the input properties that you defined earlier. In my case I added Title, Color, and FontSize:

This is of course just a trivial example. In a real app, you wouldn’t want to have to define those properties for every component, but rather define them inside the custom component as default value. This way you can, for example, update the color of all buttons in one place instead of having to update each component individually.

Now let’s try to add some simple navigation logic. Add another screen to the app and call it Screen2.

Go to your custom component and add a new input property to your button and call it NavigateTo and select Screen as date type.

Update the OnSelect property of the button inside the custom component to Navigate(CustomButton.NavigateTo).

Going back to the app we can now tell our custom component where to navigate when clicking on it.

Now we have successfully built a navigation button — very simple!

What’s next?

As this simple exercise has shown you can build custom components very fast but this is only scratching the surface of what you can create. You can create very complex and specific components and export and reuse them across multiple apps.

Try building some components with more advanced logic and data connections.

Please let me know if this has been helpful. Any feedback is much appreciated. I am thinking of doing a series on PowerApps, let me know if that would be something that might interest you.