Form events

You can use form events to build dynamic and interactive forms that respond to user input in real time. This feature allows you to configure actions that trigger automatically when a form first loads or when a user changes the value of a specific field.

These actions let you create a more intelligent and guided user experience. For example, you can:

Pre-populate fields: Automatically fill in a user’s manager or department when the form loads.
Show or hide fields: Display a State field only when a user selects USA as the country.
Set field values: Calculate a value for one field based on the input of another.
Make fields read-only: Prevent users from editing information that is set automatically.

By using form events, you can design powerful, context-aware forms that simplify data entry and enforce your business rules without requiring custom code.

Use case

Each form field has an Events field that you can trigger on change events or on load events. In the following example, the text field labeled Identity Type has the On Change Event enabled. All other form fields do not have Events enabled.

The script actively listens for a user to change the value of a dropdown field name select. Based on the user’s choice, the script instantly reconfigures the form to show only the relevant fields for that specific request type.

Here’s what the script does:

When a user selects user: The script reveals fields for a person’s first name (givenName), last name (sn), and a justification. It then relabels a user-picker field to Manager and hides the fields related to a machine.
When a user selects machine: The script shows fields for a machine’s name and justification. It then relabels the user-picker field to Machine Owner and hides the fields specific to a user.

The script creates a clean, context-aware user experience by adapting the form in real time to match the user’s intent.

The On Change Event script is as follows:

console.log('firing change event', form.getValue('select'))

if (form.getValue('select') === 'user') {
    form.showField('givenName')
    form.showField('sn')
    form.showField('userJustification')
    form.showField('selectUser')
    form.setLabel('selectUser', 'Manager')
    form.hideField('machineName')
    form.hideField('machineJustification')
    form.hideField('otherText')
}

if (form.getValue('select') === 'machine') {
    form.showField('machineName')
    form.showField('machineJustification')
    form.showField('selectUser')
    form.setLabel('selectUser', 'Machine Owner')
    form.hideField('givenName')
    form.hideField('sn')
    form.hideField('userJustification')
    form.hideField('otherText')
}

Form events

You can use two types of events to trigger actions within a form. These events give you access to form properties and functions that allow you to dynamically manipulate form fields.

Event Types
Event Type	Description
On Load	Executes once when the form initially loads, before it’s rendered to the user. Use this to set up the initial state of the form. Open a form, click ellipsis () > Settings. In the Form Settings panel, enable On Load Event, and then enter your Javascript script that executes when the form loads. You can do things like set and disable values, set query filters, or set select options with your script.
On Change	Executes when a user changes the value of a specific field. You configure this event on a per-field basis to create interactive responses to user input.

Form Properties
Property	Description
form.currentFieldValue	Gets the new value of a field after a user changes it. This property is primarily used within an On Change event.
form.urlParams	Provides access to any query parameters included in the form’s URL.

Form Functions
Function	Description
getLabel(key)	Gets the current display label of a specified field.
setLabel(key, label)	Sets the display label of a specified field.
getValue(key)	Gets the current value of a specified field.
setValue(key, value)	Sets the value of a specified field.
disableField(key)	Disables a specified field, making it read-only.
enableField(key)	Enables a specified field, making it editable.
hideField(key)	Hides a specified field from the form.
showField(key)	Shows a specified field on the form.
getSelectOptions(key)	Gets the list of selectable options for a dropdown or multiselect field.
setSelectOptions(key, options)[1]	Sets the list of selectable options for a dropdown or multiselect field. `options` is an array of objects, each with a `text` and `value` properties. For example: `form.setSelectOptions('enumSelect', [ { text: 'a', value: 'a', }, { text: 'b', value: 'b', }, { text: 'c', value: 'c', }, ]);`
setQueryFilter(key, filter)[1]	Sets the query filter for a user-picker field to refine the list of selectable users.

[1] The setSelectOptions and setQueryFilter functions will be available (IAM-8982) in an upcoming release.

PingOne Advanced Identity Cloud

Form events

Use case

Form events