Make Your First Power Apps Canvas Component

When developing Power Apps I always follow the motto “don’t repeat yourself.” It means if I have already built a feature that I need I should re-use the same code rather make it again from scratch. Power Apps Canvas components allow makers to build a set of custom controls and use them across several apps. Re-using components has personally saved me hundreds of hours of work and reduced the number of bugs in my apps. In this article I will show you how to make your first Power Apps canvas component.

Table Of Contents:
• Introduction: The Fahrenheit To Celsius Conversion Component
• Create A New Power Apps Canvas Component
• Add An Input Property To A Power Apps Component
• Calculate The Fahrenheit To Celsius Conversion
• Add An Output Property To A Power Apps Component
• Define The Component's OnReset Behaviour
• Insert A Power Apps Component Into A Canvas App

Introduction: The Fahrenheit To Celsius Conversion Component

The Fahrenheit to Celsius Conversion Component takes a temperature reading in fahrenheit and calculates the equivalent temperature in celsius.

Create A New Power Apps Canvas Component

Open Power Apps Studio and create a new app from blank. Select Components from the Tree View then click New Component. Name the component cmp_FahrenheitToCelsius.

Change the Width property of the component to 300 and the Height property to 120.

Next we will add controls to the component to capture user input. Insert a text input onto the left side of the component and place a label on top of it with the word “Fahrenheit.”

Then on the right-side of the component we will show the result of the fahrenheit to celsius calculation. Insert a new label with the text “Celsius” to serve as a title and another label below it with a text property showing 0.

Add An Input Property To A Power Apps Component

All controls in Power Apps have properties to define how they should behave on the screen. For Power Apps components we need to create those properties for ourselves. Select the component from the Tree View and select new custom property from the right-pane.

We want to make an input property called Default to supply a default value to the fahrenheit text input. Write the word “Default” in the Display Name and Name fields. Choose the property type Input and select the data type Number. Then click Create. The input property Default will appear in the right-menu.

Next we’ll load the component input property with a value. Choose the Default property of the default component and enter the number 72.

To show the value in the text input we must link it to the component’s Default property.

Write this code in the Default property of the text input

cmp_FahrenheitToCelsius.Default

Calculate The Fahrenheit To Celsius Conversion

Power Apps components are great for taking an input value, doing some operation on that value and outputting the result. In our component, we want to read-in a value in fahrenheit, convert it to celsius and then display the result to the user.

Use this code in the Text property of the celsius value label to perform the conversion from fahrenheit to celsius.

Round(
(Value(txt_FahrenheitValue.Text) - 32) * 5 / 9,
 1
)

Add An Output Property To A Power Apps Component

Our component is now displaying the the value in Celsius. But what if we wanted to reference the celsius value in a canvas app? To do this, we need to create an output property.

Select new custom property from the right-menu.

Set the custom property Display Name and the Name to Value, choose the Property Type Output and make the Data Type Number. Then click Create. The new output property will appear in the right-side menu.

Then we select the component from the Tree View and define the Value output property we just created.

Write this code in the the Value property of the component.

Value(lbl_CelsiusValue.Text)

Define The Component’s OnReset Behaviour

New component makers and experience veteran’s alike often forget to define how to reset the component and what should happen when the component becomes reset. We won’t make that same mistake.

When a maker inputs a new value into the Default property our component should be reset to reflect the change. Open the Default property and check the box beside Raise OnReset when value changes. Then click Save.

Then highlight the component and navigate to the OnReset property.

Write this code in the OnReset property of the component to update the the fahrenheit text input with a new value.

Reset(txt_FahrenheitValue)

Insert A Power Apps Component Into A Canvas App

Our Power Apps Canvas Component to convert fahrenheit to celsius is complete. Now let’s import it into a canvas app. Go the Screens tab in the Tree View and select the component from the Custom menu.

The component is now included on the screen.

Want To Learn More About Power Apps Canvas Components?

This tutorial is part of a free online course called Learn Power Apps Canvas Components By Making 5 Components. The best way to learn isn’t by watching videos, or by reading articles. The best way to master Power Apps canvas components is by building real-world projects. So that’s exactly what we’ll do. Go ahead and get started on the other lessons below. I know you’re going to get alot of this free course.

Questions?

If you have any questions about Make Your First Power Apps Canvas Component please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.