Intro to custom functions in Power Apps

tl;dr

Custom functions are a great way to make code reusable in Power Apps. By also leveraging Power Apps component libraries we can use the same code across apps in the environment.

Once there was a time…

when we all started with Power Apps and realized, that all logic in the app is done by calling pre-built functions like CountRows(Inventory). With increased complexity of our apps, we sometimes combined and nested these functions and did some pretty cumbersome calculations in order to get the job done - unfortunately over and over again.

DRY

In traditional programming there is a rule called DRY which stands for Don’t repeat yourself. It means, that you should never have to maintain the same code snippets in several places… You update 5 and forget the 6th instance. This leads to nightmares when developing, maintaining, debugging.

To tackle this in traditional languages, we first define a function and then call it where needed, so that we have a single source of truth. This reduces debugging time and increases developer productivity.

Now what if we could do the very same thing in Power Apps? Instead of copy-pasting code snippets in one app or even across apps ("oh wait, I already solved tis problem in another app"), we could create a parameterized function in a central repository, that we could call from any app.

How to create a custom function

Custom functions are custom properties of components, instead of providing a consistent look & feel of UI elements, they allow makers to reuse code snippets. As all components, they should be stored in component libraries. A component library is a special type of canvas app with the purpose to hold your components in one place, again following the principle of DRY.

Create a component library

1. Open make.powerapps.com
2. Make sure that you are in the environment you want to use the components/custom functions in
3. Select Apps
4. Select Component libraries
5. Select New component library
6. Type a name like Custom functions
7. Select Create

Enable enhanced component properties

As this feature is not GA’ed yet, we need to enable it in the experimental feature section in settings:

1. Select Settings
2. Select Upcoming features
3. Select Experimental
4. Type the first letters of components into the search bar
5. Switch the toggle of Enhanced component properties to true
6. Close the settings again

Create a dateFunctions component

1. Select Components
2. Rename Component1 to something like dateFunctions
3. Resize the component to Width and Height: 0 - we don’t need ANY UI for this

We wil group all functions, that are related to dates in this component.

Create a new custom property (that is our function!)

4. Select New custom property
5. Type getQuarter as DisplayName
6. Set Property type to Output - as we want to output a value
7. Set the Data Type to Number - as we want to return a number (it shall be either 1,2,3, or 4 for the 4 quarters in a year)
8. Select New parameter
9. Type myDate as Parameter Name
10. Select Date & Time as Parameter Type (as we will be providing a date)
11. Check the Required checkbox.
12. Select Create

If you can’t see the New parameter link, go back to Enable enhanced component properties and follow instructions :-)

Now let’s add some code to our new function. You will notice your newly created property getQuarter in the dropdown menu:

Put the following code:

If(
Month(myDate) <= 3,
1,
Month(myDate) >= 4 && Month(myDate) <= 6,
2,
Month(myDate) >= 7 && Month(myDate) < 9,
3,
Month(myDate) >= 10,
4
)

As you can see, this function takes myDate, which needs to be of type Date and time as an input and outputs the respecting quarter as a number.

Try out your component

In this component library, you also have screens, but they are only there to test your components, not to be used as apps.

1. Select Screens
2. Select + Insert
3. Under Custom select dateFunctions - by this you add the component the screen
4. Insert a datepicker control DatePicker1
5. Insert a textlabel
6. Set the Text property of the label to dateFunctions_1.getQuarter(DatePicker1.SelectedDate)
7. If you now change the value of the datepicker, you will see different values i te textlabel - showing the quarter of the date.

Please note the _1 in the component instance 💡

Please publish your component library to make it available in the environment.

The beautiful thing about that is, that you can now consume this function in any app - while the component itself will live and be edited only in the component library. This means that we have our single source of truth and that we enable more people to use code-snippets.

Consume your component in another app

Let’s now consume our brand new function in a canvas app in the same environment. Either open an existing app or create a new one.

1. Select + Insert
2. Select Get more components
3. After your component got imported, you should see this message:
4. Now add the component to a screen by selecting dateFunctions under Library components
5. Now use the component in your app like you tried before in the component library.

Feedback and whats next?

You can now add more custom properties to your dateFunctions component, for other code snippets that you would like to reuse across apps.To do that, create a new custom property and define its parameters. To make it easier for you, you can kickstart your own custom functions component library with my open-source component library:

custom functions repo

Let me know what you think on twitter :-)