> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Basics

> This document explains how to edit a form on the YiDA platform, including basic component settings and attribute configuration such as title, placeholder tips, and description. It also covers component state management and default value settings, plus guidance on field validation rules such as required fields and custom function validation.

## 1. Introduction

Drag a component from the left panel of the form to the center design area, then configure its basic settings on the right. Use these settings to personalize form components—for example, modify the Show field, adjust the form Layout, or change the form appearance.

**Path**: Workbench >> YiDA >> My Apps >> Form >> click **Edit** in the upper right corner.

Edit the form.

Form editing page.

## 2. Attributes

**Path**: Select a component >> the Attribute and Premium settings appear on the right.

Add a component.

### 2.1 Title

This is the name of the component. By default, the title matches the component type name, and helps users identify what to fill in.

Change the component title.

If the title is left empty, it is hidden and only the input box is shown:

Empty title.

### 2.2 Placeholder Tip

The placeholder tip describes what content should be entered in the component. It is for guidance only and does not affect the field value.

For example, "Enter the student's name":

### 2.3 Description

The description provides additional information about the component, and is often used to explain its function, scope, or filling instructions. You can enter Text or Insert Link.

### 2.4 State

Set the default state of a field component. You can also control the state through permissions.

For example:

Component state.

* **Normal**: Visible and editable.

* **Disable**: Visible but not editable. Unlike Read-only, the field attributes are still shown.

* **Read-only**: Visible but not editable.

* **Hidden**: The field is invisible and not editable.

### 2.5 Default

The Default value is the value the field takes when a user opens the form.

For some components, you can set Custom, Quick configuration, Formula, data linkage, association with other form data, gateway data, or Search Data Source.

* **Custom**: Set a fixed value. Users can still delete this value and enter new data when filling out the form.

For example:

Component Default.

* **Advanced use**: Write the value from a Data Source as the Default.

* **Formula**

Configure a formula for the Default.

* **Quick configuration**: YiDA provides shortcuts for common configuration scenarios.

* **data linkage**

data linkage.

* **Associate with other form data**

Associate with other form data.

* **Gateway data**

The API must be callable from the public network, and the response format must be `[{"text":"111","value":"111"}]`.

* **Search Data Source**

This API is only triggered when the user searches by entering a value in the component.

Search Data Source.

### 2.6 Validation

You can set Required and custom function validation on all field-type components:

Validation (Required, custom function).

#### 2.6.1 Required

Required means the field must be filled in before data can be submitted. Otherwise, submission fails with a prompt: "XX is a required field."

Required.

#### 2.6.2 Minimum Value

The minimum data value allowed. For example, if the minimum value of a Numerical component is set to 4, the input value cannot be less than 4.

**Supported component types: Numerical**

Minimum value.

#### 2.6.3 Maximum Value

The maximum data value allowed. For example, if the maximum value of a Numerical component is set to 50, the input value cannot exceed 50.

**Supported component types: Numerical**

Maximum value.

#### 2.6.4 Minimum Length

The minimum data length. For example, if the minimum length of a Single-line text field is set to 2, the input must contain at least 2 characters.

**Supported component types: Numerical, Single-line text, Multi-line text**.

Minimum length.

#### 2.6.5 Maximum Length

The maximum data length. For example, if the maximum length of a Dropdown multi-select component is set to 2, no more than 2 options can be selected when submitting data.

**Supported component types: Numerical, Single-line text, Multi-line text, Checkbox, Dropdown multi-select, Department, associated form.**

Maximum length.

#### 2.6.6 Custom Function (Premium Validation)

Basic coding skills are recommended, but non-developers can also reuse the code samples below.

**Example 1**: Check whether the input contains "雨" (rain).

**Note**: The error message for custom function validation is required; otherwise, validation may not work.

Configure a custom function.

You can copy the following JavaScript code as a reference:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Whether the input contains "雨" (rain)
function validateRule(value) {
  if (value.indexOf('雨') > -1) {
    return true;
  }
  return false;
}
```

**Example 2**: Check whether the input starts with "杭州" (Hangzhou).

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Whether the input starts with "杭州" (Hangzhou)
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;
}
```

**Additional examples:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Whether the input contains a space
function validateRule(value) {
  if(/s/.test(value)){
    return false;
  }
  return true;
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Whether the input is a bank card number (basic length check)
function validateRule(value) {
  var regExp = /^([1-9]{1})(d{15}|d{18})$/;
  return regExp.test(value)
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Whether the input is a standard bank card number (Mainland China UnionPay card)
function validateRule(value) {
  value = (value + '').replace(/D+/g, '')
  const regExp = /^([1-9])(d{15}|d{18})$/
  // Check that it does not start with 0 and has the correct length
  if (!regExp.test(value)) {
    return false
  }
  value = value.split('').reverse();
  let total = 0
  for (let i = 0; i < value.length; i++) {
    value[i] = parseInt(value[i]);
    total += i % 2 ? 2 * value[i] - (value[i] > 4 ? 9 : 0) : value[i];
  }
  if (total === 0) {
    return false;
  }
  return (total % 10) === 0;
 }
```

Special thanks to @n233333 for the simple bank card validation solution.

#### 2.6.7 Error Message

When field validation fails, an error is raised and submission is blocked.

**Note**: This field is optional. If left blank, the default message "This field is required" appears:

Error message.

## 3. Premium

### 3.1 Unique Identifier

The unique identifier of the current field is used for data storage on the YiDA backend and for programmatic control. It works like an ID card for each component—every component has a different unique identifier. It generally does not need to be changed, and defaults to a system-generated value.

<Note>
  The field unique identifier (fieldId) is what YiDA uses to reference the field. Changing it affects any formula, data storage (data may also be lost), and JS function references that use this field. We strongly **recommend against** modifying it.
</Note>

Component unique identifier.

### 3.2 Multi-Device Display

Some components have this option, which controls whether the component is shown on desktop or mobile.

**Note**: If this option is configured, retrieving the current component instance through code returns `null`.

Multi-device display.

* **Default**: Show the component on both desktop and mobile.

* Show the component on desktop only.

* Show the component on mobile only.

### 3.3 Data Submission

Some components have this attribute, which controls whether the component's value is submitted when the form is submitted.

* **Submit only when visible**: When the component is hidden, its data is not submitted to the backend by default.
* **Always submit**: Submit the field data regardless of whether the component is visible.

Data submission.

### 3.4 Action Settings

By creating an action, you can trigger behavior when a user interacts with the current field component—for example, sending an analytics event after the user finishes editing this field and moves to the next one.

Action settings — Create action.

**Note**: Adding a new action does not affect the original behavior of the component. For example, if you have made the component Required, validation still runs when the component loses focus, and the function in the action settings is also triggered.

For details, see [JS action panel - Frontend code Open](/yida/developer-features/ocmxyv).

### 3.5 Delete and Copy

**Tip: Delete a component with care, because deleting a form field may invalidate Formulas, business association rules, and other configurations.**

**If your app is still being built, has not gone live, and has no data yet, deleting a field has little impact.**

**If your app is already live and has data, we recommend against deleting a field. Doing so may invalidate configured Formulas and business association rules, and may cause related field data to be lost. Instead, set the field as a Hidden field. To do so:**

**On the form editing page >> select the field >> Attribute >>** [**State**](/yida/form/snftao)

**Delete / Copy path**: Click the component >> Delete or Copy, as shown below:

Copy the component.

Delete the component.

### 3.6 Edit a Component

**Path**: On the form editing page, double-click a component to edit its name:

Edit the component.

### 3.7 Copy and Paste Components (Works Across Pages)

<Warning>
  ⚠️ We recommend pasting components within pages of the same type. Pasting components across different page types may cause unexpected bugs or leave the component unusable. Issues caused by cross-page copying must be resolved on your own.
</Warning>

Use `Ctrl+C` to copy a component on the current page and `Ctrl+V` to paste it. (On `Mac`, use the `Command` key.)

## 4. FAQ

<AccordionGroup>
  <Accordion id="q1" title="4.1 What is the maximum number of components per form page?">
    Too many components on a page affects performance and user experience. To maintain a good experience, we recommend keeping the number of components on a single page low. The Free plan supports up to 50 components per page, while other plans support up to 300. If you need more, split the form into multiple pages by business scenario.
  </Accordion>

  <Accordion id="q2" title="4.2 Why isn't the Required setting taking effect?">
    Check whether the component state is set to Read-only. If a component is Read-only and marked as Required, the Required setting does not take effect.
  </Accordion>
</AccordionGroup>

## 5. Related Topics

[data linkage](/yida/form/arpur0)

[Associate with other form data](/yida/form/tg64d5)

[Configure association options](/yida/form/pw4kp6)

[Form business rules](/yida/form/dssg6y)

[Form validation](/yida/form/un1t9v)

Assign values to invisible fields