Skip to main content

Form Container

WdForm

Practical Guide

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 scenarioformTypestring

Default value: "create"

Data sourcedatasourceTypestring

Default value: "model"

data modeldataSourceNamestring

Example: ""

Field managementfieldsarray
data identification (_id)_idstring

Example: ""

Form valuevalueobject

Auto-fill form input data. Each key is assigned to an input with a matching form data key.

Query methodmethodGetItemstring

Example: ""

Query input parametersparamGetItemobject

Enter object literals directly, such as {status: 1}

Example: {}

Add methodmethodCreatestring

Example: ""

Update methodmethodUpdatestring

Example: ""

Number of form columns on PCcolNumstring

Default value: "1"

PC component widthlgWidthstring

Size configuration only applicable to PC

Default value: "hundred"

Example: "md"

Title positionlayoutstring

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
submitsubmitCompatible with all platforms

-

verified successfullyvalidateSuccessobject
  • errors: object 校验错误
    Compatible with all platforms

    -

    Verification failedvalidateFailobject
    • errors: object 校验错误
      Compatible with all platforms

      -

      query is emptyqueryEmptyobject
      • data: object

        查询结果

        Compatible with all platforms

        -

        query succeededquerySuccessobject
        • data: object

          查询结果

          Compatible with all platforms

          -

          Query failedqueryFailobject
          • 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 disabledisDisabledSubmitboolean

          Whether the form is disabled for submission

          Form scenarioformTypestring
          data modeldataSourceNamestring
          Title positionlayoutstring

          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.errorsobject

          Verification error information of the submission object

          Data source initial valueremoteValueobject

          Data source initialization request initial value

          Frontend form valuevalueobject

          Frontend form state value

          data source type informationdataSourceProfile

          Data source information

          Submit input parameters for the data source methodsubmitParamsobject

          Submit parameters to the data source method, no query bind when

          Clear verificationclearValidateobject

          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 valuesetValueobject
          • value: object

            表单的值

            通过 $w.form1.setValue({a:'111'}) 设置组件值

            submitsubmit

            Trigger form submission via $w..submit()

            Create and bind policy Query instance Reset instance access passwordclearValueobject
            • isImmediate: boolean是否开启防抖

            Clear the form with $w..clearValue()

            Clear verificationclearValidate

            Clear validation with $w..clearValidate()

            verificationvalidate

            Trigger form submission via $w..validate()

            Disable submissiondisableSubmit

            Disable form submission via $w..disableSubmit

            Enable submissionenableSubmit

            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-formform 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-formWrite 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-formWrite 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-formCan 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.