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

# Associated Form

> This article describes the associated form component, including how to link data from other forms, populate that data into the current form, and configure display settings. It also covers association attributes such as primary and secondary information display, multiselect mode, data filling rules and conditions, record creation in an associated form, and data filtering.

## 1. Associated Form

### 1.1 What Is an Associated Form

The associated form component links data from other forms and populates that data into components in the current form.

It also supports filtering when retrieving data from the associated form.

Associated form component

**Note: In the latest version,** the associated form supports forms across apps.

#### 1.2 Use Cases

* View data from another form in the current form and open it with a single click.

## 2. Association Attributes

### 2.1 Associated Form and Displayed Content

* Link to other regular forms and workflow forms.

Association attributes

Display settings

#### 2.1.1 Displayed Information of the Associated Form (Primary and Secondary Information)

Primary and secondary information are used to display and search data in the dropdown list of the associated form component.

Set primary and secondary information

* Primary information can be used for search when data is submitted. Only text input components are currently supported (including serial numbers). Secondary information can be any form component.
* Display settings are required when data is submitted. If the serial number feature is enabled, primary information shows the serial number by default. Change it as needed.

**Note**: If the serial number feature is enabled and no value is entered, the serial number is used by default.

#### 2.1.2 Multiselect Mode

The associated form supports both single-select and multiselect modes. Single-select is the default (multiselect mode is off).

Multiselect mode

**Note**: Data filling is supported in single-select mode only. It is not supported in multiselect mode.

#### 2.1.3 Data Filling

* In addition to selecting data from another form, data filling copies fields from the selected associated record into fields of the current form.

Data filling

* When setting filling conditions, define multiple conditions for the same field in the dialog box that appears.

Note: If the associated form is used together with a subform, only single-record data formula linkage is supported. Populating a subform with multiple records is not supported.

* Due to differences in data structures, field mapping restrictions apply, as shown in the following table:

**Field mapping for data filling**

| **Field type in the associated form**                                      | **Selectable field type in the current form**                         |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| Select                                                                     | Select, Dropdown Select, Single-line text, Numerical                  |
| Dropdown Select                                                            | Select, Dropdown Select, Single-line text, Numerical                  |
| Multiselect                                                                | Multiselect, Dropdown Multiselect, Numerical                          |
| Dropdown Multiselect                                                       | Multiselect, Dropdown Multiselect, Numerical                          |
| Single-line text                                                           | Select, Dropdown Select, Single-line text, Multi-line text, Numerical |
| Multi-line text                                                            | Select, Dropdown Select, Single-line text, Multi-line text, Numerical |
| Other types (such as Address)                                              | Same type only (such as Address)                                      |
| \[System field] Instance ID (currently supported only for subform filling) | Single-line text                                                      |

#### 2.1.4 Allow Creating Records in the Associated Form

The associated form component allows record creation by default, which means a Create button appears in the selection dropdown and on the management page.

Create a record in the associated form

* Workflow forms do not support record creation.

**① Management page of the associated form**

Filter and search data in the associated form. This page works as the data management page of that form.

#### 2.1.5 Data Filtering

Data filtering predefines filter conditions to limit the range of data visible during data submission.

Data filtering

**① Set filter conditions**

* Two types are available: value and field.

Value: a fixed value. Enter or select the value in the input box or control on the right.

Field: the condition changes dynamically based on the value of a field on the current page, which affects the dropdown list and search results.

**Note:**

* Associated data that is already selected is not affected by condition changes, and it is not cleared when the conditions are no longer met.
* Each field supports only one set of filter conditions. Some components, such as date range, support separate range conditions.

**② Field restrictions for filter conditions**

Due to system restrictions, not all fields support search or can be used as field filter conditions.

The following tables list the components that do not support search and the field mapping for the field filter type.

**Components that do not support search**

<table>
  <tr>
    <td>**Component name**</td>
    <td>**Component identifier**</td>
  </tr>

  <tr>
    <td>Subform</td>
    <td>TableField</td>
  </tr>

  <tr>
    <td>Rich Text</td>
    <td>EditorField</td>
  </tr>

  <tr>
    <td>Associated form</td>
    <td>AssociationFormField</td>
  </tr>

  <tr>
    <td colSpan={2}>Other fields excluded from search in the page settings</td>
  </tr>
</table>

**Field mapping for field type conditions**

| **Field type in the associated form** | **Selectable field type in the current form**                         |
| ------------------------------------- | --------------------------------------------------------------------- |
| Select                                | Select, Dropdown Select, Single-line text, Numerical                  |
| Dropdown Select                       | Select, Dropdown Select, Single-line text, Numerical                  |
| Multiselect                           | Multiselect, Dropdown Multiselect                                     |
| Dropdown Multiselect                  | Multiselect, Dropdown Multiselect                                     |
| Single-line text                      | Select, Dropdown Select, Single-line text, Multi-line text, Numerical |
| Multi-line text                       | Select, Dropdown Select, Single-line text, Multi-line text, Numerical |
| Other types (such as Address)         | Same type only (such as Address)                                      |

**Note**: A field with filter conditions no longer appears in the list of available search fields.

## 3. Submitting Associated Form Data and Viewing Details

Keep the following in mind when you submit a page that contains the associated form component after filling it in according to the configured data filtering and filling conditions:

1. If the associated page is a form page, all submitted data is available for selection.

2. If the associated page is a workflow page, submitted data is available for selection only after the approval is complete.

After submission on a PC

1. On the details page, click the associated form field to open the details page of the associated instance.

**Note**: If the primary information field in the associated form has no data, the FINST ID of that data instance is displayed instead. It also appears as a blue hyperlink that opens the details page.

After submission on a mobile device:

1. On the mobile details page, an arrow icon to the right of the associated form component indicates that the record can be opened.

## 4. Data Format

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
  {
    appType: 'APP_XOXRQ4842LVM51RRJC7N',
    formType: 'receipt',
    formUuid: 'FORM-DFYJ319VV0ILV3BW1C8HHBHHJPXI3X095L5IK1',
    instanceId: 'FINST-DFYJ319VD4IL2SMEZH8Q63MY7UR3302NRL5IK1',
    subTitle: 'BB',
    title: 'AA',
  }
]
```

## 6. FAQ

<AccordionGroup>
  <Accordion id="q1" title="Q: What is the difference between an associated form and associating data from other forms?">
    The associated form is more powerful and will gradually replace the older feature. Do not continue using the feature that links data from other forms.
  </Accordion>

  <Accordion id="q2" title="Q: Why can't an associated form reference components in a subform?">
    This is not supported yet.
  </Accordion>

  <Accordion id="q3" title="Q: Can I select an associated form component for data linkage?">
    This is not supported yet.
  </Accordion>

  <Accordion id="q4" title="Q: How do I assign a value to an associated form component with JS?">
    **Procedure:**

    Copy the following code and modify it as needed:

    ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
    this.$('associationFormComponentId').setValue(
    [
      {
        appType: 'APP_XOXRQ4842LVM51RRJC7N',  // App code
        formType: 'receipt',    // Type of form bound to the associated form component: receipt or process
        formUuid: 'FORM-DFYJ319VV0ILV3BW1C8HHBHHJPXI3X095L5IK1',  // Unique form ID
        instanceId: 'FINST-DFYJ319VD4IL2SMEZH8Q63MY7UR3302NRL5IK1',  // ID of the associated data instance
        subTitle: 'BB',  // Secondary information field
        title: 'AA',  // Primary information field
      },
      {
        appType: 'APP_XOXRQ4842LVM51RRJC7N',  // App code
        formType: 'receipt',    // Type of form bound to the associated form component: receipt or process
        formUuid: 'FORM-DFYJ319VV0ILV3BW1C8HHBHHJPXI3X095L5IK2',  // Unique form ID
        instanceId: 'FINST-DFYJ319VD4IL2SMEZH8Q63MY7UR3302NRL5IK2',  // ID of the associated data instance
        subTitle: 'DD',  // Secondary information field
        title: 'CC',  // Primary information field
      }
      ……
    ]
    )
    ```

    Result:
  </Accordion>

  <Accordion id="q5" title="Q: My associated form has more than 20 records but only 20 are displayed. How do I access the rest?">
    The associated form displays only 20 records by default. Enter a keyword to search for the other records.
  </Accordion>

  <Accordion id="q6" title="Q: Does the associated form support batch import?">
    Yes. For import rules, see [https://docs.aliwork.com/docs/yida\_updates/gddpov#k27QX](https://docs.aliwork.com/docs/yida_updates/gddpov#k27QX).
  </Accordion>

  <Accordion id="q7" title="Q: Does the associated form support deduplication settings?">
    Not yet. As a workaround, use a business association rule to sync data to an intermediate table, keep the data in that table unique, and set the intermediate table as the Data Source of the associated form.
  </Accordion>

  <Accordion id="q8" title="Q: What if the error 'Data does not meet the filter conditions' appears?">
    This error is caused by spaces in the associated data. Remove the spaces from the associated data.
  </Accordion>

  <Accordion id="q9" title="Q: Why is the selected field of the associated form displayed as an instance ID?">
    Check whether the field is hidden in the view permission group of the associated form. If it is hidden, the field shows -- when you select associated data, and the instance ID of the record is displayed after selection.
  </Accordion>

  <Accordion id="q10" title="Q: Why does EQ(associated form component, 'aaa') return an error?">
    The associated form component cannot yet be used as a condition in business association rules, such as the UPSERT formula. In such cases, use the `Dropdown Select` or `Dropdown Multiselect` component instead.
  </Accordion>
</AccordionGroup>