Power Apps Custom Functions & Reusable Code

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-custom-functions-reusable-code/. Author: Matthew Devaney.

Power Apps Custom Functions & Reusable Code Posted by - Matthew Devaney on - February 21, 2021 33 Comments

“Don’t repeat yourself” is a software development principle all great app makers follow. In a practical sense, it means any repetitive code should only be written once as a custom function. Then the function can be called on again-and-again to do a task. For many years Power Apps fans have been asking for a custom functions feature but this week it was finally announced on the official blog.

In this article I will show you how to write a Power Apps custom functions and unlock the power of reusable code. Table of Contents

Introduction: Build The EOMonth Function Enable Power Apps Custom Functions Build A Function Component Use A Function Component On A Screen Add An Optional Parameter Final Thoughts

Introduction: Build The EOMonth Function

EOMonth is handy function that exists in Excel but not in Power Apps. It finds the last day of a given month. We will build EOMonth as a Power Apps custom function. EOMONTH( StartDate, AddMonths) StartDate –

Required. Date/time value to operate on.

AddMonths – Optional. Number of months to add to the start date. Can be either positive or negative.

Assuming today’s date is 2/21/2021 the EOMonth function would show the following results.

EOMONTH(Today(), 0 ) // Result: 2/28/2021

EOMONTH(Today(), 1 ) // Result: 3/31/2021

EOMONTH(Today(), -3 ) // Result: 11/30/2020 Code language: JavaScript ( javascript ) Enable Power Apps Custom Functions

Custom functions are an experimental feature at this time. To use them you must open the advanced settings menu and turn on Enhanced component properties . Build A Function Component

Let’s get started. Open Power Apps Studio and create a new app from blank. Go to the components screen and add a new component called DateFunctions .

Add a new custom property called EOMonth. Make the property type Output and the Data type Date and time . Then click on + New parameter.

Parameters are a new concept. A parameter is a value input by the app maker while using the custom function. Give the parameter a name: StartDate . Select the Data type Date and time and choose Required. Once finished click Create .

Now we will write the custom function. Go to the EOMonth property…

…and write this code in the formula bar. It will calcuate the end of the month based on a StartDate input by the app maker.

Date (Year(StartDate), Month(StartDate)+ 1 , 1 ) -1 Code language: JavaScript ( javascript ) Use A Function Component On A Screen

The custom function not completely done yet but we can already try using it. Go to a blank screen in the app, insert the DateFunctions component and name it cmp_DateFunctions .

Then add a label to the screen and put this code in the Text property. cmp_DateFunctions .EOMonth ( Today ()) Code language: CSS ( css )

It will show the last day of the current month. Add An Optional Parameter

OK, now let’s add another feature to our custom function. EOMonth should give an app maker the ability to optionally add months to the StartDate .

Go back to the DateFunctions component and add another parameter called AddMonths . Define the Data type as Number and do not make it a required value. Click the create button when done.

On the Edit custom property menu you will see StartDate is a required parameter and AddMonths is in the Optional section. Click Save.

Change the EOMonth property of the DateFunctions component… …to this code.

DateAdd( Date (Year(StartDate), Month(StartDate)+ 1 , 1 ), AddMonths, TimeUnit.Months) -1 Code language: JavaScript ( javascript )

Then change the AddMonths property of EOMonth to 0. This is the default value to be used when the app maker does not provide an optional value.

Our custom function is now done! Go back the screen with the component and try adding a number as the 2nd parameter for EOMonth. Final Thoughts

Here are a few more thoughts I have about Power Apps custom functions:

Custom functions require a component to be placed on the screen. Either put your custom functions inside a title bar component which is found on every screen or create a small transparent component to hold them.

Custom functions should be stored in a centralized library so they are reusable from project-to-project.

Don’t wait for this feature to come out of experimental status to start compiling your list of custom functions. Start doing it now so you are ready when the feature hits general availability.

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. Table Of Contents:

Introduction: Learn Power Apps Components By Making 5 Components

1. Make Your First Power Apps Component (Temperature Conversion)

2. Make A Power Apps Navigation Menu Component

3. Make A Power Apps Pop-Up Menu Component

4. Make A Custom Function With Power Apps Canvas Components 5. Make A Power Apps Component Library Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Custom Functions 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. Canvas Components Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps