Skip to main content
Supported Regions:上海

Form Container

WdForm

Practice Guide​

Applicable Scenarios​

Quickly implement scenarios for submitting and displaying form data. After binding the data source, components such as single-line input, dropdown select, submit button, etc., can be automatically generated based on field types.

Basic Capabilities Description​

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

Extended Scenarios Description​

Calculate and Display User-Entered Data in Forms​

Example

Below is a complex value calculation scenario.

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

Configuration Method

  1. Drag the form container and nested components into place as shown in the figure, then configure them as needed.

    Image 9a2e1e3d99aa8e1ce1931589fa39569dThe expression for the c value being 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 cumulative sum of the c values in the array formArr1

    Image e3461104a29516b7bfafb1ca54584416The expression is implemented as follows: ``` $w.form1.value?.formArr1?.reduce((sum, v) => sum +Number(v.c) , 0) ```

  3. sum1+sum2

    Image dd63df6118051e3652d2b38618a5a82cThe expression is implemented as follows: ``` Number($w.form1.value.sum1)+Number($w.form1.value.sum2) ```

  4. sum1/sum2

    Image a72ab48035b44579d8ff17f20f2be687

    The expression is implemented as follows:

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

Use one form container component to dynamically implement data addition, update, and view scenarios.​

Example

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

Configuration Method

  1. Create a variable of type string named senceImage 24db506c64fe53a88dab706c1d46c164
  2. Bind a form container to a required data model to render and generate form components, then bind the "Form Scenario" property of the form container to this sence variable.Image fecb6f338bb78bc8311917fe30cc6a75
  3. Under different business scenarios, assign different values to the sence variable to enable the form container to serve different purposes.
    1. Assign the value 'create' → The form container serves as an addition scenario for submitting new data.
    2. Assign the value 'edit' → The form container serves as an update scenario for editing and updating existing data.
    3. Assign the value 'read' → The form container serves as a view scenario for users to view the display of existing data.

Binding Expression​

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

Format Requirements for Method Parameters When Data Source Type is APIs (Discontinued in the Latest Version)​

  1. When the form scenario is "addition", configuration is required.

    1. New method: Requires business-required form fields to be flattened in the root node of input parameters. Example:
        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/8a176555dfbc0c8bbea16d2fcd1ece6e.png" alt="Image 8a176555dfbc0c8bbea16d2fcd1ece6e" />

  2. When the form scenario is "update", configuration is required.

    1. Query method: Requires form fields to be flattened in the root node of output parameters. Example:
        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/bc60e088438a500031a936f83e81cf46.png" alt="Image bc60e088438a500031a936f83e81cf46" />
    2. Update method: Requires business-required form fields to be flattened in the root node of input parameters. Example:
        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/cc296a413d5be4b50f2f95dc8b69fe56.png" alt="Image cc296a413d5be4b50f2f95dc8b69fe56" />

  3. When the form scenario is "view", configuration is required.

    1. Query method: Requires form fields to be flattened in the root node of output parameters. Example:
        <ImagePreview
      src="https://qcloudimg.tencent-cloud.cn/raw/bc60e088438a500031a936f83e81cf46.png" alt="Image bc60e088438a500031a936f83e81cf46" />

Property Introduction​

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

          -

          Properties 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​

            Do I have to place components inside Data Container components?​

            Data Container is the core component for interaction between pages and data, enabling direct querying and display of data. In our platform, multiple data container components are available for selection, such as ListView, DataView, WdForm, and WdTable.

            Data Containers enable deep integration of data with page components, significantly simplifying data operations. In addition to providing data, Data Containers support common page interaction features such as pagination, loading states, and error prompts.

            When using a data container, if a component depends on the 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's better to place the component inside the corresponding data container. This allows the data container to automatically handle loading states, loading failures, and other situations without needing to manage rendering timing.

            If you only need to use the Data Container to obtain data without UI interaction, you can directly use the Query function to query data.

            How to prevent duplicate form submissions?​

            On the form submission 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 a "variable assignment", 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 to refresh other components when an event is triggered?​

            When you need to refresh other components upon an event trigger, you can bind a variable to the target component's properties, such as referencing this variable in filter parameter expressions. Then modify the variable's value during the event trigger, thereby updating the content of the corresponding target component.