# 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 ``` ###
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ec9help.weaver.com.co/1-ec9-workflow-engine-form-api/3-form-field-event-binding-user-defined-rendering.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.