Skill for Creating and Updating Yida Form Pages
Overview
This skill describes how to call Yida APIs via HTTP requests to create or update form pages. Two modes are supported:
- create mode: Create a new form page, define field lists, field types, options, etc. First create a blank form to get formUuid, then save the form Schema.
- update mode: Update an existing form page, supporting operations like adding, deleting, modifying fields and adjusting attributes. First get the existing Schema, apply modifications and then save.
When to Use
Use this skill in the following scenarios:
- Users need to create data collection forms (such as registration forms, survey forms) in applications
- Users need to create form pages with fields to store data
- Users need to update fields of existing forms (add, delete, modify)
- After creating an application with yida-create-app, need to create forms to collect data
Usage Examples
Example 1: Create a New Form
Scenario: Create a simple user information form in an application
Command:
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js create "APP_XXX" "用户信息表" '[{"type":"TextField","label":"姓名","required":true},{"type":"SelectField","label":"部门","options":["技术部","产品部"]}]'
Output:
json
{"success":true,"formUuid":"FORM-XXX","formTitle":"用户信息表","appType":"APP_XXX","fieldCount":2}
Example 2: Update an Existing Form
Scenario: Add a new field to an existing form
Command:
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js update "APP_XXX" "FORM-XXX" '[{"action":"add","field":{"type":"TextField","label":"备注"}}]'
Usage Methods
create mode (Create New Form)
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js create <appType> <formTitle> <fieldsJsonOrFile>
Parameter Description:
| Parameter | Required | Description |
|---|
| Yes | Application ID, e.g., |
| Yes | Form name |
| Yes | Field definition, supporting two formats: JSON string (starting with ) or JSON file path |
Example:
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js create "APP_xxx" "图片生成表" .claude/skills/yida-create-form-page/scripts/fields.json
Output: Logs are output to stderr, JSON results are output to stdout:
json
{"success":true,"formUuid":"FORM-XXX","formTitle":"图片生成表","appType":"APP_xxx","fieldCount":4,"url":"{base_url}/APP_xxx/workbench/FORM-XXX"}
update mode (Update Existing Form)
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js update <appType> <formUuid> <changesJsonOrFile>
Parameter Description:
| Parameter | Required | Description |
|---|
| Yes | Application ID, e.g., |
| Yes | Unique identifier of the form page, e.g., |
| Yes | Modification definition, supporting two formats: JSON string (automatically recognized if starting with ) or JSON file path |
Example (JSON string, recommended):
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js update "APP_xxx" "FORM-yyy" '[{"action":"add","field":{"type":"TextField","label":"备注"}}]'
Example (JSON file):
bash
node .claude/skills/yida-create-form-page/scripts/create-form-page.js update "APP_xxx" "FORM-yyy" changes.json
Output: Logs are output to stderr, JSON results are output to stdout:
json
{"success":true,"formUuid":"FORM-YYY","appType":"APP_XXX","changesApplied":3,"changes":[...],"url":"https://www.aliwork.com/APP_XXX/workbench/FORM-YYY"}
Field Definition JSON Format
Field definition is a JSON array, where each element describes a field. Two formats are supported:
Format 1 (Recommended)
Define
and
directly in the object:
json
[
{ "type": "TextField", "label": "姓名", "required": true },
{ "type": "SelectField", "label": "部门", "options": ["技术部", "产品部", "设计部"] },
{ "type": "DateField", "label": "入职日期" }
]
Format 2 (Compatible)
Place field properties in the
sub-object:
json
[
{ "field": { "type": "TextField", "label": "姓名" }, "required": true },
{ "field": { "type": "SelectField", "label": "部门", "options": ["技术部"] } }
]
Both formats have the same effect, Format 1 is recommended for its simplicity.
Field Properties:
| Property | Type | Required | Description |
|---|
| String | Yes | Field type (see supported field types below) |
| String | Yes | Field label |
| Boolean | No | Whether it is required, default (not required) |
| String | No | Placeholder prompt text |
| String | No | Field behavior, (normal, default) / (read-only) / (hidden) |
| String[] | No | Display terminals, (default) / (PC only) / (mobile only) |
| String | No | Label alignment, (default) / / |
| String[] | Conditionally required | Option list, required for option-type fields |
| Boolean | No | Whether multiple selection is allowed, available for /// |
| Object[] | Conditionally required | Sub-field list, required for |
| Object | Conditionally required | Associated form configuration object, required for , see below for details |
Default Properties of Each Field Type
The following lists the
unique default properties automatically set when creating each field type (common properties like
,
,
,
are shared by all fields and will not be repeated).
TextField / TextareaField
| Property | Default Value | Description |
|---|
| | Validation type |
| | Maximum number of characters |
| | Show clear button |
| | Custom storage |
| | Scan code input |
NumberField
| Property | Default Value | Description |
|---|
| | Number of decimal places |
| | Step value |
| | Thousands separator |
| | Custom storage |
| "" | Unit |
RateField
| Property | Default Value | Description |
|---|
| | Total number of stars |
| | Allow half stars |
| | Show grade text |
RadioField / CheckboxField
| Property | Default Value | Description |
|---|
| | Data source type |
| | Value type |
SelectField / MultiSelectField
| Property | Default Value | Description |
|---|
| | Support search |
| | Auto width |
| | Local filtering |
| / | Selection mode |
DateField
| Property | Default Value | Description |
|---|
| | Date format |
| | Show clear button |
| | Reset time |
| | Disabled date rule |
| format options: | | |
- : Year
- : Year-Month
- : Year-Month-Day
- : Year-Month-Day Hour:Minute
- : Year-Month-Day Hour:Minute:Second
CascadeDateField
| Property | Default Value | Description |
|---|
| | Date format |
| | Show clear button |
| | Reset time |
| format options: | | |
- : Year
- : Year-Month
- : Year-Month-Day
- : Year-Month-Day Hour:Minute
- : Year-Month-Day Hour:Minute:Second
EmployeeField
| Property | Default Value | Description |
|---|
| | User range |
| | Display method |
| | Starting department |
| | Render link when viewing |
| | Close after selection |
DepartmentSelectField
| Property | Default Value | Description |
|---|
| | Department range |
| | Selection mode |
| | Show full department path |
| | Select all button |
CountrySelectField
| Property | Default Value | Description |
|---|
| | Selection mode |
| | Support search |
| | Select all button |
AddressField
| Property | Default Value | Description |
|---|
| | Country mode |
| | Address type |
| | Enable location |
| | Show country |
AttachmentField
| Property | Default Value | Description |
|---|
| | List display type |
| | Allow multiple files |
| | Maximum number of files |
| | Maximum file size (MB) |
| | Auto upload |
| | Online editing |
ImageField
| Property | Default Value | Description |
|---|
| | List display type |
| | Allow multiple images |
| | Maximum number of images |
| | Maximum file size (MB) |
| | Accepted file types |
| | Camera watermark date |
| | Camera watermark location |
| | Camera upload only |
TableField
| Property | Default Value | Description |
|---|
| | Show row numbers |
| | Number of rows per page |
| | Maximum number of rows |
| | Minimum number of rows |
| | PC-side layout |
| | Mobile layout |
| | Table theme |
| | Show action column |
| | Show delete button |
| | Show copy button |
| | Allow export |
| | Allow import |
| | Batch delete |
| | Enable summary |
| | Freeze action column |
AssociationFormField
For detailed usage, refer to
reference/AssociationFormField.md
SerialNumberField
| Property | Default Value | Description |
|---|
| Default rule (prefix + auto-increment) | Serial number generation rule array |
| | Serial number preview |
| | Reset starting value |
| | Whether to sync serial number configuration |
| Auto-generated | Serial number formula (automatically generated by the system, including corpId, appType, formUuid, fieldId and rule configuration) |
Default Serial Number Rule:
- Rule 1: Fixed prefix "serial" (4 characters)
- Rule 2: Auto-incrementing numbers (5 digits, starting from 1, no reset)
formula Format (object format, not string):
json
{
"formula": {
"expression": "SERIALNUMBER(\"<corpId>\", \"<appType>\", \"<formUuid>\", \"<fieldId>\", \"<escapedRuleJson>\")"
}
}
Where
is the JSON string of
{ "type": "custom", "value": <serialNumberRule array> }
, with double quotes escaped (
→
).
Modification Definition JSON Format (update mode)
Modification definition is a JSON array, where each element describes a modification operation. It can be directly passed as a JSON string in the command line parameter, or written to a file and then passed as the file path.
json
[
{ "action": "add", "field": { "type": "TextField", "label": "姓名", "required": true } },
{ "action": "add", "field": { "type": "SelectField", "label": "部门", "options": ["技术部", "产品部"] }, "after": "姓名" },
{ "action": "delete", "label": "备注" },
{ "action": "update", "label": "年龄", "changes": { "required": true, "placeholder": "请输入年龄" } },
{ "action": "update", "label": "状态", "changes": { "label": "审批状态", "options": ["待审批", "已通过", "已拒绝"] } }
]
Operation Types
| Operation | Required Properties | Optional Properties | Description |
|---|
| , | , , , , , , , , , | Add a new field, / specifies the insertion position (matched by field label) |
| | — | Delete the field with the specified label |
| , | | Modify properties of the field with the specified label; if the field is in a sub-table, specify the parent-child table label via |
Properties Supported by update's changes
| Property | Type | Description |
|---|
| String | Modify field label |
| Boolean | Modify whether it is required |
| String | Modify placeholder prompt |
| String[] | Modify option list (for option-type fields: RadioField/SelectField/CheckboxField/MultiSelectField) |
| Boolean | Modify whether multiple selection is allowed (EmployeeField/DepartmentSelectField/CountrySelectField) |
| String | Modify field behavior: / / |
| String[] | Modify display terminals: / / |
| String | Modify number field unit (only available for ), e.g., , |
Field Definition for add's field
Identical to the field definition format in create mode, refer to the "Field Definition JSON Format" section above.
Prerequisites
- Node.js
- exists in the project root directory (scan code login will be triggered automatically on first run)
Calling Process
create mode
- Prepare the field definition JSON file
- Read in the project root directory to obtain the login state (including corpId); if it does not exist, automatically call to trigger scan code login
- Call the API to create a blank form and get formUuid; automatically handle exceptions according to the in the response body (see the "Error Handling Mechanism" section of the yida-login skill document)
- Generate the form Schema JSON based on the field definition (the formula of SerialNumberField will automatically use corpId, appType, formUuid and fieldId to construct)
- Call the API to save the Schema; also automatically handle exceptions according to the in the response body
- Call the API to update the form configuration (MINI_RESOURCE = 0); also automatically handle exceptions according to the in the response body
update mode
- Read in the project root directory to obtain the login state (including corpId); if it does not exist, automatically call to trigger scan code login
- Call the API to obtain the complete Schema of the current form; automatically handle exceptions according to the in the response body:
errorCode: "TIANSHU_000030"
(csrf verification failed) → automatically refresh csrf_token and retry
- (login expired) → automatically re-login and retry
- Parse the modification definition (JSON string or JSON file)
- Execute each modification operation in order:
- add: Construct a new field component and insert it at the specified position (or at the end)
- delete: Find and remove the field by label
- update: Find the field by label and update its properties
- Set the formula for all SerialNumberField (using corpId, appType, formUuid and fieldId)
- Call the API to save the modified Schema; also automatically handle exceptions according to the in the response body (same as above)
- Call the API to update the form configuration (MINI_RESOURCE = 0); also automatically handle exceptions according to the in the response body (same as above)
File Structure
yida-create-form-page/
├── SKILL.md # This document
└── scripts/
├── create-form-page.js # Form page creation & update script
API Description
saveFormSchemaInfo (Create Blank Form, create mode)
- URL:
POST /dingtalk/web/{appType}/query/formdesign/saveFormSchemaInfo.json
- Content-Type:
application/x-www-form-urlencoded
- Parameters:
| Parameter | Type | Required | Description |
|---|
| String | Yes | CSRF Token (obtained from yida-login) |
| String | Yes | Form type, fixed as |
| String (JSON) | Yes | Form name, in i18n format: {"zh_CN":"名称","en_US":"名称","type":"i18n"}
|
json
{
"content": { "formUuid": "FORM-XXX" },
"success": true
}
getFormSchema (Obtain Form Schema, update mode)
- URL:
GET /alibaba/web/{appType}/_view/query/formdesign/getFormSchema.json
- Parameters:
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form UUID |
| String | No | Schema version, default |
- Return Value: Complete form Schema JSON, including array, with the same structure as the format saved by
saveFormSchema (Save Form Schema, shared by both modes)
- URL:
POST /dingtalk/web/{appType}/_view/query/formdesign/saveFormSchema.json
- Content-Type:
application/x-www-form-urlencoded
- Parameters:
| Parameter | Type | Required | Description |
|---|
| String | Yes | CSRF Token (obtained from yida-login) |
| String | Yes | Form UUID |
| String (JSON) | Yes | Form Schema content () |
| String | Yes | Fixed as |
| String | Yes | Fixed as |
updateFormConfig (Update Form Configuration)
- URL:
POST /dingtalk/web/{appType}/query/formdesign/updateFormConfig.json
- Content-Type:
application/x-www-form-urlencoded
- Parameters:
| Parameter | Type | Required | Description |
|---|
| String | Yes | CSRF Token (obtained from yida-login) |
| String | Yes | Form UUID |
| Number | Yes | Version number (starts from 1 for newly created forms) |
| String | Yes | Fixed as |
| Number | Yes | Fixed as (form page configuration value) |
json
{
"success": true,
"traceId": null,
"throwable": null,
"errorCode": null,
"content": null,
"errorMsg": null
}
Supported Field Types
| Field Type | componentName | Description | Special Properties |
|---|
| TextField | Single-line text, used for names, titles, numbers, etc. | — |
| TextareaField | Multi-line text, used for descriptions, remarks, etc. | — |
| RadioField | Single selection, used for gender, status and other mutually exclusive options | |
| SelectField | Drop-down single selection, suitable for scenarios with many options (>5) | |
| CheckboxField | Multiple selection, used for hobbies, skill tags, etc. | |
| MultiSelectField | Drop-down multiple selection, suitable for scenarios with many options (>5) | |
| NumberField | Number, used for amounts, quantities, ages, etc. | — |
| RateField | Rating, used for satisfaction evaluation and other star rating scenarios | — |
| DateField | Date, used for birthdays, deadlines, etc. | — |
| CascadeDateField | Cascading date, used for date range selection | — |
| EmployeeField | Member, select members within the organization | |
| DepartmentSelectField | Department, select departments within the organization | |
| CountrySelectField | Country, select countries/regions | |
| AddressField | Address, used for shipping addresses, etc. | — |
| AttachmentField | Attachment upload | — |
| ImageField | Image upload | — |
| TableField | Table (sub-table), used for structured data | |
| AssociationFormField | Associated form | |
| SerialNumberField | Serial number, automatically generate unique numbers | |
Cooperation with Other Skills
- Create Application → Use skill to get
- Create Form Page → This skill (create mode), get and field IDs
- Update Form Page → This skill (update mode), perform field add/delete/modify on existing forms
- Obtain Form Schema → Use skill to view the current form structure in advance
- Record Configuration → Write and field IDs to
- Create Custom Page → Use skill
- Deploy Page Code → Use skill
Tip: If you need to create a custom display page (no fields, used for deploying JSX code), please use the
skill.
Form Data Operation APIs
The following APIs are used to perform add/delete/modify/search operations on form data in custom pages or scripts, called via
this.utils.yida.<method-name>(params)
, all APIs return Promise.
saveFormData — Create New Form Instance
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form UUID |
| String | Yes | Application ID |
| String | Yes | Form data (JSON string) |
javascript
this.utils.yida.saveFormData({
formUuid: 'FORM-XXX',
appType: window.pageConfig.appType,
formDataJson: JSON.stringify({
textField_xxx: 'Single-line text',
numberField_xxx: 100,
}),
}).then(function(res) {
console.log('Created successfully, instance ID:', res.result);
}).catch(function(err) {
console.error('Creation failed:', err.message);
});
updateFormData — Update Form Instance
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form instance ID |
| String | Yes | Fields to be updated (JSON string) |
javascript
this.utils.yida.updateFormData({
formInstId: 'FINST-XXX',
updateFormDataJson: JSON.stringify({ textField_xxx: 'New value' }),
});
deleteFormData — Delete Form Instance
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form UUID |
| String | Yes | Form instance ID |
getFormDataById — Query Single Instance Details
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form instance ID |
searchFormDatas — Query Instance List by Condition
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form UUID |
| String | No | Filter by field value (JSON string) |
| Number | No | Current page, default 1 |
| Number | No | Number of records per page, default 10, maximum 100 |
javascript
this.utils.yida.searchFormDatas({
formUuid: 'FORM-XXX',
searchFieldJson: JSON.stringify({ textField_xxx: 'Query value' }),
currentPage: 1,
pageSize: 10,
}).then(function(res) {
// res.data: Instance list, res.totalCount: Total number
console.log('Query results:', res.data);
});
searchFormDataIds — Query Instance ID List by Condition
Same parameters as
, returns an array of instance IDs (suitable for batch operation scenarios).
getFormComponentDefinationList — Obtain Form Field Definitions
| Parameter | Type | Required | Description |
|---|
| String | Yes | Form UUID |
Notes
- Temporary files are written to the .cache folder in the current project root directory; create the folder if it does not exist, do not write to other system folders
- In update mode, the operations in the modification definition JSON are executed in sequence, pay attention to the dependencies between operations (e.g., delete first then add)
- Field matching is based on Chinese labels (), ensure the label name is accurate
- is automatically updated when adding fields, no manual handling required
- It is recommended to view the current Schema structure via the skill before making important modifications
- The script is compatible with the old create mode calling method (without the prefix), but it is recommended to use the new explicit mode parameter
Set Default Value of EmployeeField to Current Logged-in User
The update mode of
does not support directly setting the "current logged-in user" default value for EmployeeField, which needs to be achieved by directly modifying the Schema after update.
Correct Schema Configuration Format
To set the default value of Yida EmployeeField to the current logged-in user, the following three properties need to be modified simultaneously (obtain the Schema via
, directly modify the props of the corresponding field, then call
to save):
json
{
"valueType": "variable",
"complexValue": {
"complexType": "formula",
"formula": "USER()",
"value": []
},
"variable": {
"type": "user"
}
}
⚠️ Note:
must be
, not
(the latter will be rejected by Yida, reporting "Expression parsing failed" error).
Modification Steps
- Call to obtain the current Schema (return structure is
{ success, content: { pages, ... } }
)
- Recursively find the field node of the target in the object
- Write the above three properties to the field node
- Call and pass in the modified (note: pass the object, not the entire response body)
- Call to update the form configuration
Detailed Explanation of SerialNumberField Serial Number Rules
Default Scenario (No Custom Requirements)
Only one
rule, 4-digit auto-increment, starting from 1, no reset:
json
{
"serialNumberRule": [
{
"resetPeriod": "noClean",
"dateFormat": "yyyyMMdd",
"ruleType": "autoCount",
"timeZone": "+8",
"__sid": "item_auto_count",
"__hide_delete__": true,
"__sid__": "serial_auto_count",
"digitCount": "4",
"isFixed": true,
"initialValue": 1,
"content": "",
"formField": ""
}
],
"serialNumPreview": "0001"
}
⚠️ Note: For the default
rule,
must be
(cannot be deleted), and
is the string
.
Custom Scenario (Combination of Multiple Rules)
The following 4 rule types are supported, which can be combined and arranged arbitrarily:
| Description | Key Fields |
|---|
| Auto count (auto-incrementing numbers) | (number of digits, string), (starting value), (reset period) |
| Fixed character | (fixed string content) |
| Submission date | (date format, e.g., , ) |
| Get form field value | (field fieldId) |
Custom Rule General Structure:
json
{
"resetPeriod": "noClean",
"dateFormat": "yyyyMMdd",
"ruleType": "<type>",
"timeZone": "+8",
"__sid": "item_<unique-id>",
"__hide_delete__": false,
"__sid__": "serial_<unique-id>",
"digitCount": 4,
"isFixed": true,
"initialValue": 1,
"content": "<fixed-character, only fill for character type>",
"formField": "<field-fieldId, only fill for form type>",
"isFixedTips": "",
"resetPeriodTips": ""
}
⚠️ Note: In custom rules,
is of
number type (not string), and
is
; while in the default
rule,
is the
string and
is
.
| Value | Description |
|---|
| No reset (permanent auto-increment) |
| Reset daily |
| Reset monthly |
| Reset annually |
Date Format Options (for
type rules):
| Value | Example |
|---|
| (last two digits of year) |
| |
| |
| |
Example: Rule Configuration for YY-Submission Date-4-digit Auto Count
:
json
{
"serialNumberRule": [
{
"ruleType": "character",
"content": "YY",
"dateFormat": "yyyyMMdd", "timeZone": "+8",
"resetPeriod": "noClean", "digitCount": 4,
"isFixed": true, "initialValue": 1,
"isFixedTips": "", "resetPeriodTips": "",
"formField": "",
"__sid": "item_char_yy", "__sid__": "serial_char_yy", "__hide_delete__": false
},
{
"ruleType": "date",
"content": "",
"dateFormat": "yy", "timeZone": "+8",
"resetPeriod": "noClean", "digitCount": 4,
"isFixed": true, "initialValue": 1,
"isFixedTips": "", "resetPeriodTips": "",
"formField": "",
"__sid": "item_date_yy", "__sid__": "serial_date_yy", "__hide_delete__": false
},
{
"ruleType": "autoCount",
"content": "",
"dateFormat": "yyyyMMdd", "timeZone": "+8",
"resetPeriod": "noClean", "digitCount": 4,
"isFixed": true, "initialValue": 1,
"isFixedTips": "", "resetPeriodTips": "",
"formField": "",
"__sid": "item_auto", "__sid__": "serial_auto", "__hide_delete__": true
}
],
"serialNumPreview": "YY260001"
}
formula Construction Rules
must be in
object format (not string), the last parameter of
is the JSON string of
{ "type": "custom", "value": <serialNumberRule array> }
, with double quotes escaped:
javascript
var ruleJson = JSON.stringify({ type: 'custom', value: serialNumberRule });
var escapedRuleJson = ruleJson.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
var expression = 'SERIALNUMBER("' + corpId + '", "' + appType + '", "' + formUuid + '", "' + fieldId + '", "' + escapedRuleJson + '")';
obj.formula = { expression: expression };