# 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 | ```javascript 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 | ```javascript 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 ```javascript 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 ```javascript 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","
custom rendering field
","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 ```javascript 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 ```javascript 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 ```javascript // 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
{WfForm.generateFieldContentComp("field111_1")} {WfForm.generateFieldContentComp("field112_1")}
{WfForm.generateFieldContentComp("field113_1")} {WfForm.generateFieldContentComp("field114_1")}
, document.getElementByclassName("area_1"); //for reference only, parameter 2 is to distinguish row numbers from specific cells ``` ###