1. An overview of the

When designing forms, we often need to be able to execute scripts to change the style and behavior of the form or component before/after it loads. Or the script can be executed when the user clicks on the component. The form’s events are designed for this scenario.

There are two types of events in a form: component events and Element events.

When we open the form Designer, we see a set of events in the Events TAB of the form properties or component properties that contain both types of events. Form events are shown below.

Developers can script events in the event editor or add or remove events.

The added component events need to be in the API’s list to be valid.

2 Element events

2.1 introduction

Element is after Mootools framework encapsulates the HTML DOM object, reference www.chinamootools.com/element.htm… .

Element has the same event type as an HTML DOM object, such as “focus, click, blur”, etc.

The Platform’s Element events are encapsulated by Mootools’s Element.Event class. Element. The Event class reference www.chinamootools.com/element_eve… .

2.2 Use in form Designer

This object points to the platform mwf.xscript. Environment object. This is the context for platform scripts, which can execute scripts similar to “this.form”.

The platform adds a property “target” to this each time an event is run. We can get the current component by calling this.target.

// Get the current component object this.target; // equivalent to this.form.get("fieldName");Copy the code

When we add events to the various components of the form designer, the platform adds events to the corresponding Element object when the form loads. The following table shows the corresponding Element event objects for each component.

Component type

Element event object

Get the Element script

Checkbox

Multiple button

input[type=’checkbox’]

this.form.get(“fieldName”).node.getElements(“input[‘type=’checkbox’]”)

Radio

The radio button

input[type=’radio’]

this.form.get(“fieldName”).node.getElements(“input[‘type=’radio’]”)

Textarea

Multiline text

textarea

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Textfield

Single-line text

input

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Org

personnel

First child div

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Calendar

The date of

input

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Combox

Combo box

First child div

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Opinion

Opinion box

First child object

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Address

Address selection

First child object

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

Number

digital

input

this.form.get(“fieldName”).node.getFirst() || this.form.get(“fieldName”).node;

other

node

this.form.get(“fieldName”).node;

• Sample:

Added a script to the focus event of a text component identified as “subject”.

For the script above, it is executed when the cursor enters the input field.

If you want this event to be triggered by another condition, you can do it with the following script:

var node = this.form.get("subject").node; / / get the component node (the node getFirst () | | node). The fireEvent (" focus "); // Trigger the Focus eventCopy the code

2.3 Usage in Scripts

In the example above, we added events through the event area in the component properties. In addition to this approach, you can also add events to your script.

• Use addEvent to set up a listener for the element.

  myElement.addEvent(type, fn);

Parameters:

Type – (string) Event name without ‘on’.

Fn – (function) Event function.

Returns:

(element) Current element.

Sample:

The following script does what we did in the previous sample by adding the script to the focus event of a text component identified as “subject”

var node = this.form.get("subject").node; Node.getelement ("input").addevent ("focus", function(ev){//ev is Mootools Element Event object, Refer to http://www.chinamootools.com/event.html / / here this point to input this. SetStyle (" border ", "1 px solid blue"); })Copy the code

• Use addEvents to set up multiple listeners for the element.

  myElement.addEvents(events);

Parameters:

Events – (object) An object containing multiple events (the key of the object is the event name and the value is the event function).

Returns:

(element) Current element.

Sample:

var node = this.form.get("subject").node; node.getElement("input").addEvents({ "focus" : Function (ev){//ev is the Mootools Element's Event object, Refer to http://www.chinamootools.com/event.html / / here this point to input this. SetStyle (" border ", "1 px solid blue"); }, "blur": Function (ev){//ev is the Mootools Element's Event object, Refer to http://www.chinamootools.com/event.html / / here this point to input this. SetStyle (" border ", "1 px solid gray"); }})Copy the code

• Use fireEvent to fire one or more events

  myElement.fireEvent(type[, args[, delay]]);

Parameters:

Type – (string) Event name (for example, “click”)

Args – (mixed, optional) Event function argument, array or single object, if more than one argument, must be an array.

Delay – (number, optional) Delay (ms) execution time.

Returns:

(element) Current element.

Sample:

var node = this.form.get("subject").node; / / get the component node (the node getFirst () | | node). The fireEvent (" focus "); // Trigger the Focus eventCopy the code

3 Component Events

3.1 introduction

The components in the platform are a set of objects generated based on the Mootools Class. Mootools Class is the base Class for Mootools framework, reference www.chinamootools.com/class.html.

In Mootools Class in a series of features, including the Class: the Event, refer to www.chinamootools.com/class_extra… The Event section in.

When we add event scripts to the various components of the form designer, these scripts are triggered when the form loads and the code runs to the appropriate location. For example, the platform executes scripts in queryLoad events before loading components (including generating Html Dom, assigning values, and so on). After the component is loaded, events in postLoad are executed.

3.2 Use in form Designer

This object points to the platform mwf.xscript. Environment object. This is the context for platform scripts, which can execute scripts similar to “this.form”.

The platform adds a property “target” to this each time an event is run. We can get the current component by calling this.target.

// Get the current component object this.target; // equivalent to this.form.get("fieldName");Copy the code

For events that require parameters, the platform adds an attribute “event “to this object every time it is run. We can use this.event to get parameters.

// Sometimes we can get the this.event parameter this.event;Copy the code

• Example: Make the current component read-only based on the process activity name in the queryLoad script.

When loading a component, the system determines whether to generate an input box or div node based on the JSON isReadonly.

If you want this event to be triggered by another condition, you can do it with the following script:

var field = this.form.get("subject"); // Get the component Field. fireEvent("queryLoad"); // Trigger the queryLoad eventCopy the code

3.3 Usage in Scripts

In the example above, we added events through the event area in the component properties. In addition to this approach, you can also add events to your script.

• Set an event to the component using addEvent.

  myClass.addEvent(type, fn[, internal]);

Parameters:

Type – (string) The type of event (e.g. ‘queryLoad’) that is included in the form designer component’s event.

Fn – (function) Event function.

Internal – (Boolean, optional) Sets function properties :internal is true. The internal attribute is usually used to prevent deletions.

Returns:

(object) An instance of this class.

Sample:

Add an event to save the form to empty the temporary field.

var form = this.form.getApp().appForm; Form.addevent ("beforeSave", function(){this.form.get("tmpField").setData(" "); Bind (this)) // Use bind(this) to pass the context to the event methodCopy the code

• Use addEvents to set up multiple listeners for the component.

  myClass.addEvents(events);

Parameters:

Events – (object) A key:value object, the name of the key event (such as “queryLoad”), and the value of the function to be called when the event occurs.

Returns:

(object) An instance of this class.

Note: By adding events in this way, this.target and this.event are null.

Sample:

var form = this.form.getApp().appForm; // Get the form component; Form.addevents ({"beforeSave" : function(){this.form.get("tmpField").setData(" "); Bind (this), // "beforeDelete": function(){// add the event before deleting //do something}})Copy the code

• Use fireEvent to fire one or more events

  myClass.fireEvent(type[, args[, delay]]);

Parameters:

Type – (string) Type of the event (for example, ‘beforeSave’).

Args – (mixed, optional) The argument passed to the function. To pass multiple arguments, the argument must be an array.

Delay – (number, optional) Indicates the wait time, in milliseconds.

Returns:

(object) An instance of this class.

Note: By adding events in this way, this.target and this.event are null.

A sample:

var form = this.form.getApp().appForm; // Get the form component; form.fireEvent("beforeSave"); // The beforeSave event is triggeredCopy the code

Example 2: If the temporary field was passed in when triggered, it could be written like this

var form = this.form.getApp().appForm; // Get the form component; form.fireEvent("beforeSave",["tmpFieldName1"]); // The beforeSave event is triggeredCopy the code

The added events need to be as follows:

var form = this.form.getApp().appForm; Form.addevent ("beforeSave", function(fieldName){this.form.get(fieldName).setData(" "); Bind (this)) // Use bind(this) to pass the context to the event methodCopy the code

3.4 Loading sequence of forms and components

• The order in which the entire form loads follows these rules (a-f is also sequential) :

Execute the main form event queryLoad -> beforeLoad -> beforeModulesLoad;

B. Execute queryLoad->postLoad->load events of the component from top to bottom and from inside to outside according to the location of the component in the main form;

C. Execute the main form event postLoad;

C. Direct events on subforms, subpages, and widgets are not executed, but events on components in subforms are executed according to rule B.

D. As sub-forms, sub-pages and components are loaded asynchronously, component events within these components are executed respectively after loading asynchronously;

AfterModulesLoad -> afterLoad;

F. When Tab components, subforms, document manager, etc. are set to lazy load, the subcomponents in these components are not loaded when the main form is loaded. When these components are activated, events are executed according to rule B.

• A direct event that is triggered when the form loads:

The direct event of the form

instructions

queryLoad

Triggered before the form loads. BusinessData, preloaded scripts, and form HTML are in place.

beforeLoad

Triggered before the form loads. Alert for lockdown.

beforeModulesLoad

Triggered before all components of the form are loaded, when the form’s style and JS head have been loaded.

postLoad

Triggered after the form loads. The components of the main form are loaded, but the sub-forms, sub-pages, and components are not guaranteed to be loaded.

afterModulesLoad

Triggered when all components of the form are loaded. This event is emitted when a form contains subforms, subpages, and widgets after these components are loaded.

afterLoad

Triggered after the form loads. This event is emitted when a form contains subforms, subpages, and widgets after these components are loaded.