Terug naar overzicht

Pagina-instellingen - Javascript API

Geschreven door Wim - {$BlogTitle}
Geschreven door: Wim
Datum: Woensdag 09 december 2020

Javascript API

Rechts bevinden zich horizontaal de tabs van de editor. In de afbeelding hieronder is als voorbeeld de tab Instellingen actief.

Instellingen

Rechts bevinden zich vertikaal de tabs voor de instellingen. In de afbeelding hieronder staat als voorbeeld de tab Algemeen.

Scripts

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)  )

Adding a custom field validator

It is very easy to add your own custom validator. Lets say we only want to allow the text "test" in our input. Add the following code to your page to accomplish this.

let field = PeggyForms.getField("field");
field.addInputValidator(
    function(_field) {
        return _field.getValue() === "test";
    },
    "This value must be 'test'"
);

Examples

// Enable a field only when it is later than 12:00
PeggyPay.getField("radio").setVisible( new Date().getHours() > 11 );

// Set field label and layout
const field = PeggyPay.getField("myFieldName");
field.setLabel("New label");
field.setLayout("1/3");

// Event
const field = PeggyPay.getField('myFieldName');
field.onchange.add( function(field) {
	alert(field.getValue();
	yourcode...
} );

// On field init
field.oninit.add( function() );

// On form load event
PeggyPay.onformload.add( function() );

Verder lezen? Save & resume