Form Container

WdForm

Practical Guide

• Introduction and Usage of Form Container

• Develop a Form Application in 3 Minutes

• Implement Form Data Staging

• Practical Guide for Form/Table Component Binding Expression (query)

• Submitting Form Data When Form Components Are Hidden

• Application Practice for Form Creation and Query Scenarios

• Form Cascading Selection Configuration Method

• Implement Multi-column Layout in One Row for PC Forms

• Calculating and Displaying User Input Data in Forms

• Implementation Approach for Pagaged or Step-by-Step Form Submission

• Modifying Field Default Values in Form Container Update Scenarios

Applicable Scenarios

Quickly implement scenarios for submitting and displaying form data. After binding a data source, components such as single-line inputs, dropdown selections, and submit buttons can be automatically generated based on field types.

Basic Capabilities Description

1. Creating, updating, or viewing form data via the Form Container
2. Supports binding data sources of data models or APIs types to achieve data interaction between frontend and backend
3. Through field properties, you can control the ordering, visibility, and switching of component types for field mapping within internal form components
4. For more practical instructions, refer to the Practical Guide for Common Form Scenarios

Extended Scenarios Description

Calculating and Displaying User Input Data in Forms

Example

The following is a complex value calculation scenario

• formArr1: an array where the value of c in each row is the sum of a and b
• formArr2: an array where the value of c in each row is the sum of a and b
• sum1: the accumulated sum of the c values in formArr1
• sum2: the accumulated sum of the c values in formArr2

Configuration Method

1. As shown, drag the form container and nested components into place, and configure as needed. The expression for the value of c as the sum of a and b in the nested component is implemented as follows:

   Number($w.formArr1.value[$w.index_formArr1].a)*Number($w.formArr1.value[$w.index_formArr1].b)

2. sum1 is the accumulated sum of the c values in the array formArr1 The expression is implemented as follows:

   $w.form1.value?.formArr1?.reduce((sum, v) => sum +Number(v.c) , 0)

3. sum1+sum2 The expression is implemented as follows:

   Number($w.form1.value.sum1)+Number($w.form1.value.sum2)

4. sum1/sum2

   The expression is implemented as follows:

   Number($w.form1.value.sum1)/Number($w.form1.value.sum2)

Dynamically Implementing Data Creation, Update, and Viewing Scenarios Using 1 Form Container Component

Example

Bind a variable to the "Form Scenario" property of the form container, and assign different values to the variable to implement creation, update, and view scenarios.

Configuration Method

1. Create a variable of type string named sence
2. Bind the form container to a required data model to render and generate form components, then bind the "Form Scenario" property of the form container to the sence variable
3. In different business scenarios, assign different values to the sence variable to enable the form container to serve different purposes.
   1. Assign "create" to the form container to set it as the creation scenario for submitting new data.
   2. Assign "edit" to the form container to set it as the update scenario for editing and updating existing data.
   3. Assign "read" to the form container to set it as the view scenario for displaying and viewing existing user data.

Binding Expression

Expressions can be static data or variables. You can connect to built-in data tables and external APIs, etc., via Query, and then bind a query in the expression.

Format Requirements for Method Parameters When Data Source Type is APIs (This feature has been deprecated in the latest version)

1. When the Form Scenario is "creation", configure

   1. Add a method: Business-required form fields must be flattened at the root node of input parameters. Example:

2. When the Form Scenario is "update", configure

   1. Query method: Requires form fields to be flattened at the root node of output parameters. Example:
   2. Update method: Business-required form fields must be flattened at the root node of input parameters. Example:

3. When the Form Scenario is "view", configure

   1. Query method: Requires form fields to be flattened at the root node of output parameters. Example:

Property Introduction

External properties received by the component

Property Name	Property Identifier	Type	Description

Form scenario	formType	string	Default value: "create"
Data source	datasourceType	string	Default value: "model"
data model	dataSourceName	string	Example: ""
Field management	fields	array
data identification (_id)	_id	string	Example: ""
Form value	value	object	Auto-fill form input data. Each key is assigned to an input with a matching form data key.
Query method	methodGetItem	string	Example: ""
Query input parameters	paramGetItem	object	Enter object literals directly, such as {status: 1} Example: {}
Add method	methodCreate	string	Example: ""
Update method	methodUpdate	string	Example: ""
Number of form columns on PC	colNum	string	Default value: "1"
PC component width	lgWidth	string	Size configuration only applicable to PC Default value: "hundred" Example: "md"
Title position	layout	string	Set the title and input selection region of the current form component in the container to left and right layout or up-down layout Default value: "horizontal"

Event Introduction

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

submit	submit		Compatible with all platforms	-
verified successfully	validateSuccess	object errors: object 校验错误	Compatible with all platforms	-
Verification failed	validateFail	object errors: object 校验错误	Compatible with all platforms	-
query is empty	queryEmpty	object data: object 查询结果	Compatible with all platforms	-
query succeeded	querySuccess	object data: object 查询结果	Compatible with all platforms	-
Query failed	queryFail	object error: object 错误信息 组件内部抛出的错误信息 requestid: string请求 id 如果是接口相关错误会提供请求 id message: string错误提示信息 code: string错误码 original: 原始错误	Compatible with all platforms	-

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name	Property Identifier	Type	Description

Whether submission is disabled	isDisabledSubmit	boolean	Whether the form is disabled for submission
Form scenario	formType	string
data model	dataSourceName	string
Title position	layout	string	Set the title and input selection region of the current form component in the container to left and right layout or up-down layout
Error message.	errors	object	Verification error information of the submission object
Data source initial value	remoteValue	object	Data source initialization request initial value
Frontend form value	value	object	Frontend form state value
data source type information	dataSourceProfile		Data source information
Submit input parameters for the data source method	submitParams	object	Submit parameters to the data source method, no query bind when
Clear verification	clearValidate	object	Clear verification

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

set value	setValue	object value: object 值 表单的值	通过 $w.form1.setValue({a:'111'}) 设置组件值
submit	submit		Trigger form submission via $w..submit()
Create and bind policy Query instance Reset instance access password	clearValue	object isImmediate: boolean是否开启防抖	Clear the form with $w..clearValue()
Clear verification	clearValidate		Clear validation with $w..clearValidate()
verification	validate		Trigger form submission via $w..validate()
Disable submission	disableSubmit		Disable form submission via $w..disableSubmit
Enable submission	enableSubmit		Enable form submission via $w..enableSubmit

Style API

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name	Class Name	Description and Examples

root element	.wd-form	form component root element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-form { /* Write CSS styles here */ }
Root element of the PC form	.wd-pc-form	Write styles for PC forms /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-form { /* Write CSS styles here */ }
H5 form root element	.wd-h5-form	Write style for H5 form /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-form { /* Write CSS styles here */ }
WeChat Mini Program form root element	.wd-mp-form	Can write style for mini program form /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-mp-form { /* Write CSS styles here */ }

Learn about Style API

Frequently Asked Questions

When using data container components, must other components be placed inside them?

The Data Container is the core component for page-data interaction, capable of directly querying and displaying data. On our platform, multiple data container components are available, such as ListView, DataView, WdForm, and WdTable.

The Data Container enables deep integration of data and page components. This greatly simplifies data operation processes. In addition to providing data, the Data Container also supports common page interaction features, such as pagination loading, loading status, and error prompts.

When using data containers, if a component relies on data returned by the data container, it is recommended to place the component inside the data container component. For example, to display an image from a specific field in a data detail, it is better to place the component inside the corresponding data container. This way, the data container can automatically handle loading states, loading failures, etc., without needing to worry about rendering timing.

If you only need to use the data container to obtain data without performing UI interactions, you can directly use the Query function to query data.

How to prevent duplicate form submissions?

On the form submit button, create a Boolean variable with a default value of false and bind it to the button's disabled property. When the form container's submit event triggers, perform a "variable assignment" to set this variable to true. Then, in the success branch, call the data source method to submit the data. After successful submission, trigger another "variable assignment" to reset the variable to false. During submission, when the variable value is true, the button remains disabled, thus preventing duplicate submissions.

How do you refresh other components when an event is triggered?

When you need to refresh other components upon an event trigger, bind a variable to the target component's property, for example by referencing this variable in a filter parameter expression. Then change the variable's value in the triggering event to update the corresponding target component's content.