Configure model-driven app form event handlers

Form event handlers for Power Apps forms can be configured for the following areas in a form:

An event handler consists of a reference to a JavaScript web resource and a function defined within that web resource that executes when the event occurs. Each element can have up to 50 separate event handlers configured.

Configure an event handler

The following procedure describes how to configure an event handler for a form. Use similar steps to configure an event handler for a tab, column, or IFrame.

1. Sign in to Power Apps, open the table that you want, and then open the form in the form designer where you want to configure an event handler.

2. Depending on the library state, choose from the following options:

   • If the library containing the function you want to set as the event handler is already available, on the right properties pane under Account Main form, select the Events tab, and then go to step 3.
   • If the library containing the function you want isn't already available, select Form libraries on the left navigation pane, and then select Add library:
     1. On the Add JavaScript Library page, select New.
     2. In the new browser tab, complete the properties to create the JScript web resource, and then select Save, and then select Publish. More information: Create a JavaScript web resource
     3. Close the browser tab and go back to the Add JavaScript Library list.
     4. Select the JavaScript web resource from the list, select Add, and then select the Events tab.

     Note

     You might have to select Cancel, and then select Add library to refresh the list.

3. On the Events tab, select Event Handler and complete the following information to configure the form event, and then select Done:

   • Event Type:

     • On Save: When a record is saved after a form field change.
     • On Load: When the form opens.

   • Library: The JavaScript web resource.

   • Function: The name of the function within the JavaScript web resource that should be executed for the event.

   • Enabled: By default, the event handler is enabled. Clear the Enabled checkbox if you don’t want to enable this event.

   • Pass execution context as the first parameter: Some functions require an execution context to be passed to the function. Select Pass execution context as the first parameter if it's required.

   • Comma-separated list of parameters that will be passed to the function: Some functions can accept a set of parameters to control the behavior of a function. The list of parameters can include variables or another function as accepted by the function parameters allowed by the JavaScript scripting language. If passing in parameters is required, enter them in the Comma separated list of parameters that will be passed to the function.

   • Table column dependencies: For On Save events, select the columns where you want the event to be triggered after a record save.

     

4. Save, and then Publish the form.

Example hello world for the onload event

This simple example demonstrates how to configure an onload form event using parameter passing of a single defined variable in the event handler, which displays an alert when the form loads.

1. Create the web resource using the Hello world JavaScript sample. More information: Create or edit model-driven app web resources to extend an app
2. Open the table Main form for editing in the form designer. This example uses the Student custom table main form.
3. On the left Information pane, select the Events tab.
4. Select Add library, select the web resource you created (in this example the resource is named javascript-hello-world), and then select Add.
5. Select On Load to expand it, and then select Event Handler.
6. In the Configure Event pane, enter the Function name (in this example, helloworld), and then in the Comma separated list of parameters that will be passed to the function box enter a parameter such as n = "Hello world!".
7. Select Done.
8. Save and publish the form.

Test the event by playing a model-driven app that includes the form. When the main form loads, an alert displays the modal dialog message "Hello world!" For this example, the user must select OK to dismiss the alert to continue using the form.

Hello world JavaScript sample

function helloworld(n) {
alert(n);
}

Configure an event handler using the classic experience

1. In the classic form editor, select the element with the event you want to configure a handler for.

2. On the Home tab, in the Edit group, select Change Properties or simply double-click the element.

3. In the element properties dialog, select the Events tab.

4. Expand the Form Libraries area. If the library containing the function you want to set as the event handler isn't already listed, add the library.

5. To add a form library to an event handler:

   1. In the Form Libraries section of the Event List, select Add.

   2. Locate the JavaScript web resource in the list of available web resources. Select it and then select Add.

      If the JavaScript web resource you need doesn't exist, select New to open a new web resource form and create one.

   3. To create a JavaScript web resource, see Create a JavaScript web resource.

   4. The web resource you created is now selected in the Look Up Row dialog. Select Add to close the dialog.

6. In the Event Handlers section, select the event you want to set an event handler for.

7. Select Add to open the Handler Properties dialog.

8. On the Details tab, choose the appropriate library and type the name of the function that should be executed for the event.

9. By default the event handler is enabled. Clear the Enabled checkbox if you do not want to enable this event.

   Some functions require an execution context to be passed to the function. Select Pass execution context as the first parameter if it's required.

   Some functions can accept a set of parameters to control the behavior of a function. If these are required, enter them in the Comma-separated list of parameters that will be passed to the function.

10. On the Dependencies tab, add any columns that the script depends on into the Dependent Columns area.

11. Select OK to close the Handler Properties dialog.

12. When the event handler is entered, you can adjust the order in which the function is executed relative to any other functions by using the green arrows to move it up or down.

13. Select OK to close the element properties dialog.

14. Select Save to save your changes. Select Publish to publish the form.

Create a JavaScript web resource

1. In the web resource form set the following properties:

   Property	Value
   Name	Required. Type the name of the web resource.
   Display Name	Required. Type the name to be displayed in the list of web resources.
   Description	Optional. Type a description of the web resource.
   Type	Required. Select Script (JScript).
   Language	Optional. Choose one of the languages available for your organization.

2. If you have been provided with a script, we highly recommend that you use the Browse button to locate the file and upload it.

Alternatively, you can select the Text Editor button and paste or type the contents of the script in the Edit Content dialog.

3. Select Save and close the web resource page.

Next steps

Walkthrough: Write your first client script
Use the Main form and its components