JavaScript Events

In addition to onpress events on button components, JourneyApps provides some basics events that are triggered on user interaction.

Please Note: The JavaScript Events feature is available since version 3.22.0 of the JourneyApps Container on Android, and since version 1.10.8 of the JourneyApps Container on iOS. Certain events require a greater JourneyApps Container version, please see the table below for details. If you have trouble while trying to use this functionality, please ensure that you've updated to the latest versions of the JourneyApps Container on either Android or iOS. If you are using a custom-branded version of the JourneyApps Container, please contact JourneyApps Support to obtain an updated version.

The following events are currently supported:

Component	Event	Triggered when	Event Parameter	JourneyApps Container Version
`barcode`	`on-scan`	After a barcode is scanned.	The barcode (`string`).	Android 3.22.0; iOS 1.10.8.
`signature`	`on-capture`	After a signature is saved or cleared.	Signature id, or `null` if cleared.	Android 3.22.0; iOS 1.10.8.
`picture`	`on-capture`	After a photo is captured or selected from gallery.	Photo id.	Android 3.22.0; iOS 1.10.8.
`selectbox`	`on-change`	After a new selection is made.	Selection value.	Android 3.22.0; iOS 1.10.8.
`checklist`	`on-change`	After an item is checked or unchecked.	Selected values (`array`).	4.0.11.
`date`	`on-change`	After the selected date is changed or cleared.	Selected value	4.6.1.
`datetime`	`on-change`	After the selected date or time is changed or cleared.	Selected value	4.6.1.

The event attribute specifies a JavaScript function to be called when the event is triggered.

Example

The below example code shows how events can be used on each of the above components:

View XML:

<view label="...">
    <var name="barcode" type="string" />
    <var name="signature" type="attachment" media="image/svg+xml" />
    <var name="photo" type="attachment" media="image/jpeg" />
    <var name="color" type="enum">
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
    </var>
    <var name="startdate" type="date" />
    <var name="starttime" type="datetime" />    

    <barcode label="Scan" bind="barcode" on-scan="scannedBarcode" />
    <signature label="Sign" bind="signature" on-capture="capturedSignature" />
    <picture label="Take Photo" bind="photo" on-capture="capturedPhoto" />
    <selectbox type="dropdown" label="Select one" bind="color" on-change="selectedColor" />
    <date label="Select a date" bind="startdate" on-change="selectedDateOrDateTime" />
    <datetime label="Select a date and time" bind="startdate" on-change="selectedDateOrDateTime" />

</view>

View JavaScript:

function scannedBarcode(barcode) {
    dialog('Scanned barcode', barcode);
}

function capturedSignature(id) {
    if(id == null) {
        dialog('Signature', 'Cleared');
    } else {
        dialog('Signature', 'Signed');
    }
}

function capturedPhoto(id) {
    dialog('Photo', 'Captured');
}

function selectedColor(value) {
    var colors = {0: 'Red', 1: 'Green', 2: 'Blue'};
    if(value == null) {
        dialog('Color', 'Cleared');
    } else {
        dialog('Color', colors[value]);
    }
}

function selectedDateOrDateTime(value) {
    if (value == null) {
      dialog('Date / DateTime', 'Cleared');
    } else {
      dialog('Date / DateTime', JSON.stringify(value));
    }
}