Important note: do not forget to enable Developer mode in your editor. Use the Cog in the upper left.
There is some communication possible in javascript to connect your own custom scripts to Peggy Pay.
Via the Peggy Pay class in Javascript you can access formfields, get and set values and add events.
Getting data
Get the data of all formfields in a javascript object:
Call: PeggyPay.getData()
Returns:
Getting a field
Get a formfield by its fieldname. The fieldname can be set in the basic field properties in the Peggy Pay editor.
Call: PeggyPay.getField("fieldName")
Returns: a javascript FormElement class
With this class you can get or set the value, add events, manage state and add your custom validator!
Field methods:
Description | method | Example/content |
---|---|---|
Gets the value of a field | getValue() | |
Sets the value of a field | setValue(value) | |
Set the layout of a field | setLayout() | 1/3, 2/5, .. |
Set the layout of the input in a field | setInputLayout() | 1/3, 2,5, .. |
Set the alignment of the input if ajusted the input layout | layoutInputAlignment() | left/center/right |
Ajust the vertical alignment | layoutVerticalAlign() | top/center/bottom |
Get the label | getLabel() | |
Get the sublabel | getSubLabel() | |
Set the label | setLabel(label) | |
Set the sublabel | setSubLabel(label) | |
Get the visible state of the field | getVisible() | |
Set the visible state of the field | setVisible(visible) | true/false |
Get the readonly state of the field | getReadonly() | |
Set the readonly state of the field | setReadonly(v) | true/false |
Get the required state of the field | getRequired() | |
Set the required state of the field | setRequired(v) | true/false |
If the field has list-data, for example the dropdown or choice fields, you can set the data with this function | setRawData(data) | [ ] |
Same as above, but then with data you get from getData() | setData(data) | field.getData() |
Or just add 1 option to a list | addDataOption( keyValueObject, index = null) | { key: 10, value: "My label" } |
Set the input type of a single line text field | setInputType(inputType) | Text/Date/Number/Hidden/Password/Email/Color |
If you use ajax/http on this field, the HTTP response can be retrieved via this function | getAjaxResult() |
Usage:
const field = PeggyPay.getField("myFieldName"); field.setLabel("New label"); field.setLayout("1/3");
Field events:
onkeyup
onchange
onajaxloaded
Usage:
const field = PeggyPay.getField("myFieldName"); field.onchange.add( function(field) )