on-change

Optional

Default: unset

Triggered when: Specific per component. Please see the table below.

Event parameters:

• $value or $object - The current bound value

• oldValue - The current bound value before the change

• newValue - The current bound value after the change

Return value: Specific per component (based on field type). Please see the table below.

on-change is an event that calls a JS/TS $:function or navigation. See more details:

pageJS/TS Events

Component-specific details

Component	Triggered when	Return value
capture-coordinates	The device updates the current location.	Location object, e.g. {latitude: -33.9000764, longitude: 18.8476332, altitude: null, horizontal_accuracy: 23.987, vertical_accuracy: null, timestamp: 2022-05-15T11:28:20.794Z} Limitation: Capturing the altitude and/or vertical_accuracy is not supported on several platforms / devices, including Android devices. These devices will return null for these fields.
capture-file	A file is uploaded, or deleted when in display mode.	Attachment id, or null if cleared. E.g. {id: 974abd87-d00f-4255-81ac-16fed6d7085a}
capture-photo	A photo is captured or selected from gallery, updated, or deleted when in display mode.	Attachment id, or null if cleared. E.g. {id: 974abd87-d00f-4255-81ac-16fed6d7085a}
capture-signature	A signature is captured, updated or deleted when in display mode.	Attachment id, or null if cleared. E.g. {id: 974abd87-d00f-4255-81ac-16fed6d7085a}
date-input	A date is selected, updated or cleared.	Selected date, or null if cleared. E.g. 2022-05-15
datetime-input	A date and time is selected, updated or cleared.	Selected date and time, or null if cleared. E.g. 2022-05-15T11:28:20.794Z
multiple-choice-checklist	An item is checked or unchecked.	Array containing the selected values. E.g. [email, sms]
object-dropdown	A new selection is made, or the selection is cleared.	Selected object or an array of selected objects, or null if cleared. E.g. {name: Argentina, population: null}
object-table	A row is selected.	Selected object, E.g. {name: Argentina, population: null}
scan-barcode	A barcode is scanned.	String containing the scanned barcode. E.g. "ZQ222-TH678"
single-choice-dropdown	A new selection is made, or the selection is cleared.	Key of the selected option (string), or null if cleared. E.g. "purple"
single-choice-radio	A new selection is made.	Key of the selected option (string), or null if cleared. E.g. "purple"
text-input	Text is entered, updated or cleared.	String containing the entered text. E.g. "purple"
toggle	The toggle state is updated.	true or false

Example:

main.view.xml

<capture-photo bind="my_photo" on-change="$:callEvent($value, oldValue, newValue)" source="any" resolution="small" downloadable="true" />

main.js

function callEvent(currentValue, oldValue, newValue) {
    console.log(JSON.stringify(currentValue), JSON.stringify(oldValue), JSON.stringify(newValue));
    // Example:
    // {"id":"16af8e07-e181-4bdc-a6d7-f3841d0959b7"} {"id":"00cef6fb-0476-40a7-9ec5-f2222d2d7972"} {"id":"16af8e07-e181-4bdc-a6d7-f3841d0959b7"}
}