3 Form field event binding, user-defined rendering

1 Field value change trigger event

Field value change will trigger the bound function, can be bound multiple times BindFieldChangeEvent：function (fieldMarkStr, funobj)

Parameter Description

Parameter	type	Required	Remarks
fieldMarkStr	String	Yes	The binding field is marked, separated by multiple spliced commas, such as: field110( main field), field111_2( fine field )……)
funobj	Function	Yes	The function passes the following three parameters by default, parameter 1: the DOM object of the trigger field, parameter 2: the mark of the trigger field (field27555, etc.), parameter 3: the modified value

WfForm.bindFieldChangeEvent("field27555,field27556",function(obj, id, value){
 console.log ("Wform.bindFieldChangeEvent--", obj, id, value);
});

2 Detail table field values trigger event

Binding for newly added detail line fields and loaded fine line fields, and value changes trigger bound event bindDetailFieldChangeEvent：function (fieldMarkStr, funobj)

Parameter Description

Parameter	type	Required	Remarks
fieldMarkStr	String	Yes	Binding detail fields, can not be underlined, can be separated by multiple splicing commas, for example: field110,field111
funobj	Function	Yes	Field value changes trigger custom functions, which by default pass the following three parameters, parameter 1: field mark (field27583), parameter 2: line mark, parameter 3: modified value

jQuery(document).ready(function(){
 WfForm.bindDetailFieldChangeEvent("field27583, field27584", function(id, rowIndex, value){
 console.log(" Wform.bindDetailFieldChangeEvent --", id, rowIndex, value);
    });
});

3 Field area binding action event

Recommend to use this method to develop, because this interface click, double-click and other actions are not bound to the field element, the interface bound to the cell All functions can be implemented in a formula

Type	Remarks
onblur	Gets focus events that support only single-line text field types
onfocus	Lost focus events, single-line text type only supported
onclick	Click the event, where the field is in the cell area click trigger
ondbclick	Double-click event, where field cell area double-click trigger
mouseover	Mouse move event, mouse move field cell area trigger
mouseout	Mouse out of the event, mouse out of the field where the cell area triggered

bindFieldAction：function (type, fieldids, fn)

Parameter Description

Parameter	type	Required	Remarks
type	String	Yes	Action types, see table above
fieldids	String	Yes	Fields id collections, separated by multiple commas, and detail fields are not underlined for all lines
fn	Function	Yes	Trigger function, which enters the parameter to receive two parameters, fieldid and rowIndex line numbers

Example

WfForm.bindFieldAction("onfocus ","field111, field222", function(fieldid, rowIndex){
     Gets the focus trigger event alert("single-line text field111");
     alert (get focus trigger event in line 222 of the "detail +rowIndex+");
});


WfForm.bindFieldAction("onclick ","field333",function(){
     Click the trigger event alert(" the browse button field, not the magnifying glass selection, but the entire field in the cell area click will trigger "(");
});

4 User-defined proxy single-line textbox field rendering

Minimum version requirements :KB900190407

this interface is effective only for single-line text-box field types, Database field type is varchar

Display effect, events, field value could be controlled by each other, The editable field values modified through interface 3.3 will also be recorded.

System will pass in relevant props, React Developer Tools could used to grab data, Call on demand

proxyFieldComp：function (fieldMark, el, range)

Parameter Description

Parameter	type	Required	Remarks
fieldMark	String	Yes	field designation, format field${ field ID}_field${ line number}
el	React Comp	Yes	Components rendered
range	String	No	Scope of action, default all ,(1: read-only ,2: editable ,3: required), comma separated after combination

Example

WfForm.proxyFieldComp("field111", React.createElement(" div "),{
     style：{background："red"}, 
     children：" sub-items "
}));
// Custom rendering when Field 111 is read-only, editable, and required

WfForm.proxyFieldComp ("field222_1","<div> custom rendering field</div>","2,3");
// Custom rendering when Detail table field 222 is editable/required

5 User-defined Additional Render Form Field

Minimum Version Requirements : KB900190407

Add addtional user-defined rendering for after Method Based on Standard Fields Display Content

This interface parameter description and usage is similar to interface 4.4

afterFieldComp：function (field Mark, el, range)

Example

WfForm.afterFieldComp("field111"),
React.createElement("a"),{
     href："/test.jsp? userid="+WfForm.getFieldValue "("field222"),
     children：" Custom link "
}));
// Field 111 Appends and renders a custom link with read-only, editable, and required

6 User-defined form rendering with functions

Minimum version: KB900190701

Customize render form fields with function return values, support all field types, implement add/override/relayout based on original components, etc.

It is recommended to combine ecode together, to call before module loading, use JSX, to customization

This interface related to form field rendering with a higher priority than 4.4,4.5, that is, fields using this interface proxy, such as 4.4,4.5 will be invalid immediately

proxyFieldContentComp：function (fieldid, FN)

Inteface Parameter Description

Parameter	type	Required	Remarks
field	String	Yes	Format ID, main table/detail fields
fn	Function	Yes	Proxy function, which must have a return value that returns a custom rendered component

Function Parameters of Proxy

Parameter	type	Required	Remarks
info	JSON	Yes	Field base information including field values, field properties, etc
compFn	Function	Yes	Proxy former field component function through which the original component can be obtained

Example

WfForm.proxyFieldContentComp("111",function(info, compFn){
     console.log ("fieldid：",info.fieldid);
     console.log ("line number :", info.rowIndex);
     console.log ("field-only required attribute :", info.viewAttr);
     console.log ("fieldvalue :", info.fieldValue);
    // Returns custom rendered components 
     return React.createElement ("div",{},["play as you want");
     // Return the original component 
     return compFn();
     // Returns a copy component based on the original component 
     return React.createElement ("div",{},["pre-component", compFn()," post-component "]);
});
// If this interface call is made in blocks of code, custompage, etc .(non-module before loading), render fields once
WfForm.forceRenderField("field111");

7 Get field component by field id

Minimum Version: KB900190701

Get the field component according to the field identification, that is, the field component can be extracted separately and rendered anywhere. Note that the read-only editable properties of the field still need to be set up in the background in advance

It is recommended to work with the ecode, using the JSX, and then combined with the designer custom properties or interface 4.6, can achieve a certain area custom typesetting layout rendering multiple form field

generateFieldContentComp:function(fieldMark)

Interface Parameters Description

Parameter	type	Required	Remarks
fieldMark	String	Yes	field designation, format field${field_ID}_field${Detail Row ID}

Example

// Examples of detailed multi-field, sub-specific requirements
Step 1: Template cells give custom class：area_1
Step 2: Custom typesetting rendering area_1 area
ReactDOM.render <div>
     <table>
         <tr>
             <td>{WfForm.generateFieldContentComp("field111_1")}</td>
             <td>{WfForm.generateFieldContentComp("field112_1")}</td>
         </tr>
         <tr>
             <td>{WfForm.generateFieldContentComp("field113_1")}</td>
             <td>{WfForm.generateFieldContentComp("field114_1")}</td>
         </tr>
     </table>
</div>, document.getElementByclassName("area_1");
//for reference only, parameter 2 is to distinguish row numbers from specific cells