Form
I. View Characteristics
- View Type: Form (FORM)
- Data Type: Object
- DSL Feature: Supports layout functionality.
- General Behaviors of Data Structure:
- Query Behaviors: Page initialization, data population.
- Form Behaviors:
- Interactive Behaviors: Data entry, data validation, data submission, etc.
- Sub-table Query Behavior: Query via frontend pagination.
- Common Interfaces: (Default Data Manager Functions)
- construct: Page initialization. (pk is null)
- queryOne: Data population. (pk is not null)
- create: Creation during new entry. (pk is null)
- update: Update during editing. (pk is not null)
II. DSL Structure
A simplified view can be written as follows: ("Simplified" means each tag has fewer attributes, not fewer nodes.)
<view type="FORM" model="demo.DemoModel" name="demo_form_view">
<template slot="actions">
<action name="$$internal_GotoListTableRouter" label="Return" type="default"/>
<action name="create" validateForm="true" goBack="true"/>
<action name="update" validateForm="true" goBack="true"/>
</template>
<template slot="fields">
<field data="id" invisible="true"/>
<field data="code"/>
<field data="name"/>
</template>
</view>
- In this DSL, fields and actions are defined based on the model
demo.DemoModel
, and placed in corresponding positions through slots provided by the layout. - The top-to-bottom order of elements in the slot represents their relative positions; changing the order will change their rendered position on the page.
- The
action
tag uses thevalidateForm
attribute to enable form submission validation, and thegoBack
attribute to automatically return to the previous page after successful submission. - The return action is a client-side action, which is independent of the model and has no metadata.
- In the
fields
slot, you can use allPack components
to implement grid layout functionality.
Note
For more content related to Layout, please refer to: Layout
For more content related to DSL, please refer to: DSL
For more content related to Pack components, please refer to: Pack
III. Default Field Components
In the above DSL, we did not specify the widget
attribute. In this case, the Widget framework will obtain the corresponding default component based on the field metadata attributes. The following lists all default components currently used in the Form view:
Field Type | Multi-value | Default Component | TypeScript Class |
---|---|---|---|
Text (STRING) | No | Text (Input) | FormStringInputFieldWidget |
Yes | Tag (Tag) | FormStringMultiTagFieldWidget | |
Multi-line Text (TEXT) | No | Multi-line Text (TextArea) | FormTextFieldWidget |
Rich Text (HTML) | No | Rich Text (RichText) | FormHtmlRichTextFieldWidget |
Phone (PHONE) | No | Phone (Phone) | FormPhoneFieldWidget |
Email (EMAIL) | No | Email (Email) | FormEmailFieldWidget |
Integer (INTEGER) | No | Integer (Integer) | FormIntegerFieldWidget |
Yes | Tag (Tag) | FormIntegerMultiFieldWidget | |
Float (FLOAT) | No | Number (Float) | FormFloatFieldWidget |
Money (MONEY) | No | Currency (Currency) | FormMoneyFieldWidget |
Boolean (BOOLEAN) | No | Switch (Switch) | FormBooleanSwitchFieldWidget |
Enumeration (ENUM) | No | Dropdown Single-select (Select) | FormEnumFieldWidget |
Yes | Dropdown Multi-select (Select) | FormEnumMultiSelectFieldWidget | |
Date Time (DATETIME) | No | Date Time (DateTimePicker) | FormDateTimeFieldWidget |
Date (DATE) | No | Date (DatePicker) | FormDateFieldWidget |
Time (TIME) | No | Time (TimePicker) | FormTimeFieldWidget |
Year (YEAR) | No | Year (YearPicker) | FormYearFieldWidget |
Key-Value Pair (MAP) | No | Key-Value Pair (Map) | FormMapFieldWidget |
Many-to-One (M2O) | No | Dropdown Single-select (Select) | FormM2OSelectFieldWidget |
One-to-Many (O2M) | Yes | Dropdown Multi-select (Select) | FormO2MSelectFieldWidget |
Many-to-Many (M2M) | Yes | Dropdown Multi-select (Select) | FormM2MFieldSelectWidget |
IV. Optional Field Components
For each field type, in addition to the corresponding default components mentioned above, there are some components that can be used by specifying the widget
attribute. The following lists the existing field components in the current Form view:
Field Type | Multi-value | Component | TypeScript Class |
---|---|---|---|
Text (STRING) | No | Color (ColorPicker) | FormStringColorPickerFieldWidget |
Handwritten Signature (Signature) | FormStringSignatureFieldWidget | ||
Drag-and-Drop Upload (UploadDraggable) | FormStringUploadDraggableFieldWidget | ||
File (Upload) | FormStringUploadFieldWidget | ||
Image (UploadImg) | FormStringUploadImgFieldWidget | ||
Embedded Webpage (Iframe) | FormStringIframeFieldWidget | ||
Hyperlink (Hyperlinks) | FormStringHyperlinksFieldWidget | ||
File Download (Download) | FormStringDownloadFieldWidget | ||
Media Player (MediaPlayer) | FormStringMediaPlayerFieldWidget | ||
Phone (Phone) | FormStringPhoneFieldWidget | ||
Email (Email) | FormStringEmailFieldWidget | ||
Yes | File (Upload) | FormStringUploadFieldWidget | |
Image (UploadImg) | FormStringUploadImgFieldWidget | ||
Media Player (MediaPlayer) | FormStringMediaPlayerFieldWidget | ||
Multi-line Text (TEXT) | No | Handwritten Signature (Signature) | FormStringSignatureFieldWidget |
Drag-and-Drop Upload (UploadDraggable) | FormStringUploadDraggableFieldWidget | ||
File (Upload) | FormStringUploadFieldWidget | ||
Image (UploadImg) | FormStringUploadImgFieldWidget | ||
File Download (Download) | FormStringDownloadFieldWidget | ||
Integer (INTEGER) | No | Slider Input (Slider) | FormIntegerSliderFieldWidget |
Yes | Tag (Tag) | FormIntegerTagFieldWidget | |
Boolean (BOOLEAN) | No | Dropdown Single-select (Select) | FormBooleanSelectFieldWidget |
Radio Button (Radio) | FormBooleanRadioFieldWidget | ||
Checkbox (Checkbox) | FormBooleanCheckboxFieldWidget | ||
Enumeration (ENUM) | No | Radio Button (Radio) | FormEnumRadioWidget |
Yes | Checkbox (Checkbox) | FormEnumMultiCheckboxFieldWidget | |
Many-to-One (M2O) | No | Radio Button (Radio) | FormM2ORadioFieldWidget |
Form (Form) | FormM2OFormFieldWidget | ||
Tree Selection (TreeSelect) | FormM2OTreeSelectFieldWidget | ||
Cascading Selection (Cascader) | FormM2OCascaderFieldWidget | ||
Drag-and-Drop Upload (UploadDraggable) | FormM2OUploadDraggableFieldWidget | ||
File (Upload) | FormM2OUploadFieldWidget | ||
Image (UploadImg) | FormM2OUploadImgFieldWidget | ||
Address (Address) | FormM2OAddressFieldWidget | ||
Company (Company) | FormM2OCompanyFieldWidget | ||
Department (Department) | FormM2ODepartmentFieldWidget | ||
Employee (Employee) | FormM2OEmployeeFieldWidget | ||
One-to-Many (O2M) | Yes | Checkbox (Checkbox) | FormO2MCheckboxFieldWidget |
Table (Table) | FormO2MTableFieldWidget | ||
Tree Selection (TreeSelect) | FormO2MTreeSelectFieldWidget | ||
Cascading Selection (Cascader) | FormO2MCascaderFieldWidget | ||
Transfer Box (Transfer) | FormTransferFieldWidget | ||
Drag-and-Drop Upload (UploadDraggable) | FormO2MUploadDraggableFieldWidget | ||
File (Upload) | FormO2MUploadFieldWidget | ||
Image (UploadImg) | FormO2MUploadImgFieldWidget | ||
Many-to-Many (M2M) | Yes | Checkbox (Checkbox) | FormM2MCheckboxFieldWidget |
Table (Table) | FormM2MTableFieldWidget | ||
Tree Selection (TreeSelect) | FormM2MTreeSelectFieldWidget | ||
Cascading Selection (Cascader) | FormM2MCascaderFieldWidget | ||
Transfer Box (Transfer) | FormTransferFieldWidget | ||
Tree (Tree) | FormM2MTreeFieldWidget | ||
Drag-and-Drop Upload (UploadDraggable) | FormM2MUploadDraggableFieldWidget | ||
File (Upload) | FormM2MUploadFieldWidget | ||
Image (UploadImg) | FormM2MUploadImgFieldWidget | ||
Company (Company) | FormM2MCompanyFieldWidget | ||
Department (Department) | FormM2MDepartmentFieldWidget | ||
Employee (Employee) | FormM2MEmployeeFieldWidget |
V. DSL Property Configuration
(I) Form Property Configuration
<element widget="Form">
......
</element>
- layout: Form layout (
'horizontal' | 'vertical' | 'inline'
) - cols: Number of grid columns per row (
number
) - submitType: Submission type (
SubmitType
) - relationUpdateType: Association update type (
RelationUpdateType
) - filter: Invisible filter condition (
rsql
) - domain: Visible filter condition (
rsql
) - load: Loading function code,
FunctionDefinition#fun
(string
)
(II) General Field Configuration
- invisible: Whether to hide (
boolean | expression
) - usingLoading: Whether to use loading transition animation (
boolean
) - submitType: Submission type (
SubmitType
) - relationUpdateType: Association update type (
RelationUpdateType
) - layout: Form layout (
'horizontal' | 'vertical' | 'inline'
) - label: Field title (
string | expression
) - labelInvisible: Whether to hide the field title (
boolean
) - help: Field help text (
string
) - hint: Field prompt text (
string | expression
) - required: Whether it is mandatory (
boolean | expression
) - requiredTips: Mandatory prompt text (
string
) - readonly: Whether it is read-only (
boolean | expression
) - disabled: Whether it is disabled (
boolean | expression
) - validateTrigger: Validation trigger timing (
('change' | 'blur')[]
) - validator: Validation expression (
expression
) - validatorMessage: Prompt text when validation expression fails (
string
) - patternType: Use built-in regex validation type for verification (
FieldStringPatternType | expression
) - pattern: Regular expression (
RegExp
) - tips: Prompt text when regex validation fails (
string | expression
) - constructDataTrigger: Submission data trigger timing (
('change' | 'blur')[]
) - constructFun: Submission data function code,
FunctionDefinition#fun
(string
) - constructSubmitType: Submission data type (
'CURRENT' | 'ROOT' | 'SELF' | 'CUSTOM'
) - submitFields: Submission data fields, effective when
constructSubmitType="CUSTOM"
(string[]
) - clearFieldsTrigger: Field clearing trigger timing (
('change' | 'blur')[]
) - clearFields: List of fields to clear after trigger (
string[]
) - allowClear: Allow clearing values (
boolean
) - placeholder: Placeholder prompt text (
string | expression
) - emptyStyle: Empty value style (
string | 'hyphen' | 'empty' | 'null'
)
Note
Properties marked with "" are not fully universal; they depend on the implementation of specific components. If the component's own interaction does not support or implement the property, the configuration may be ineffective.
For example: The Checkbox component cannot implement the function of the allowClear
property.
(III) Field Component Property Configuration
1. String (STRING)
FormStringInputFieldWidget
<field data="stringField" />
- type: Input type (
'text' | 'password' | expression
) - prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
) - crypto: Encrypted storage (
boolean
) - translation: Translate displayed value (
boolean
)
FormStringColorPickerFieldWidget
<field data="stringField" widget="ColorPicker" />
- predefine: Predefined colors (
JSON - string[]
)
FormStringSignatureFieldWidget
<field data="stringField" widget="Signature" />
- showClearButton: Whether to display the clear button (
boolean
) - clearButtonText: Text of the clear button (
string
) - showSaveButton: Whether to display the save button (
boolean
) - saveButtonText: Text of the save button (
string
) - signatureFontColor: Signature text color (
color
) - signatureBackGroundColor: Signature background panel color (
color
)
FormStringUploadDraggableFieldWidget
<field data="stringField" widget="UploadDraggable" />
- draggableIcon: Drag-and-drop upload icon (
icon
) - draggableTipText: Drag-and-drop upload prompt text (
string
) - showDraggableExtendsionsText: Whether to display supported file extensions (
boolean
) - draggableExtendsionsText: Prompt text for allowed file types (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormStringUploadFieldWidget
<field data="stringField" widget="Upload" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
- cdnKey: Specify upload CDN key, used with backend OSS configuration (
string
) - privateLink: Use backend for file upload/download, used when OSS direct upload from client is unavailable (
boolean
)
FormStringUploadImgFieldWidget
<field data="stringField" widget="UploadImg" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - uploadIconText: Upload icon prompt text (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormStringIframeFieldWidget
<field data="stringField" widget="Iframe" />
- mode: Component mode (
'DYNAMIC' | 'STATIC'
)
Note
- When the component mode is
STATIC
, it can display an embedded web page. - When the component mode is
DYNAMIC
, the configurable properties of the component are similar to those of the FormStringInputFieldWidget component.
FormStringHyperlinksFieldWidget
<field data="stringField" widget="Hyperlinks" />
- target: Link opening method (
'OPEN_WINDOW' | 'ROUTER'
) - text: Link display text (
string
)
FormStringDownloadFieldWidget
<field data="stringField" widget="Download" />
- linkDisplayTextPrefix: Download prompt text prefix (
string
) - linkDisplayText: Download prompt text (
string
) - downloadFileName: Name of the downloaded file (
string
)
FormStringMediaPlayerFieldWidget
<field data="stringField" widget="MediaPlayer" />
- mode: Component mode (
'DYNAMIC' | 'STATIC'
) - fileSource: File source (
'UPLOAD' | 'INPUT'
)
Note
- When the component mode is
STATIC
, it can display a media player. - When the component mode is
DYNAMIC
, the file source property takes effect:- When the file source is
UPLOAD
, the configurable properties of the component are similar to those of the FormStringUploadFieldWidget component. - When the file source is
INPUT
, the configurable properties of the component are similar to those of the FormStringInputFieldWidget component.
- When the file source is
FormStringPhoneFieldWidget
<field data="stringField" widget="Phone" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
)
FormStringEmailFieldWidget
<field data="stringField" widget="Email" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
)
FormStringMultiTagFieldWidget
<field data="stringMultiField" />
- allowRepeat: Whether to allow duplicates (
boolean
) - unitValueLength: Maximum length of unit value (
number
)
2. Multi-Line Text (TEXT)
FormTextFieldWidget
<field data="textField" />
- minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
) - rows: Minimum number of rows (adjusts default input box height) (
number
)
3. Rich Text (HTML)
FormHtmlRichTextFieldWidget
<field data="htmlField" />
- height: Height (
string | number
) - encode: Encrypted storage (
boolean
)
4. Phone (PHONE)
FormPhoneFieldWidget
<field data="phoneField" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
)
5. Email (EMAIL)
FormEmailFieldWidget
<field data="emailField" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - minLength: Minimum length (
number | expression
) - maxLength: Maximum length (
number | expression
) - showCount: Display character counter (
boolean
)
6. Integer (INTEGER)
FormIntegerFieldWidget
<field data="integerField" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - unit: Unit (
string | expression
) - showThousandth: Whether to display thousand separators (
boolean | expression
) - size: Number of integer digits (
number | expression
) - min: Minimum value (
number | expression
) - max: Maximum value (
number | expression
) - step: Increment or decrement step (
number
) - addStep: Increment step (takes precedence over the
step
property) (number
) - reduceStep: Decrement step (takes precedence over the
step
property) (number
) - autocorrection: Auto-correction after losing focus (
boolean
)
FormIntegerSliderFieldWidget
<field data="integerField" widget="Slider" />
- min: Minimum value (
number | expression
) - max: Maximum value (
number | expression
) - step: Increment or decrement step (
number
) - direction: Slider direction (
'horizontal' | 'vertical'
) - reverse: Reverse the coordinate axis (flip the slider) (
boolean
) - hasTooltip: Display prompt bubble (
boolean
)
FormIntegerMultiFieldWidget
<field data="integerMultiField" />
- allowRepeat: Whether to allow duplicates (
boolean
) - unitValueLength: Maximum length of unit value (
number
) - limit: Maximum number of tags (
number
) - min: Minimum value of a single number (
number | expression
) - max: Maximum value of a single number (
number | expression
)
FormIntegerTagFieldWidget
<field data="integerMultiField" widget="Tag" />
- allowRepeat: Whether to allow duplicates (
boolean
) - unitValueLength: Maximum length of unit value (
number
)
7. Float (FLOAT)
FormFloatFieldWidget
<field data="floatField" />
- prefix: Prefix text (
string | icon
) - prefixType: Prefix type (
'TEXT' | 'ICON'
) - prefixStore: Whether to store the prefix (
boolean
) - suffix: Suffix text (
string | icon
) - suffixType: Suffix type (
'TEXT' | 'ICON'
) - suffixStore: Whether to store the suffix (
boolean
) - unit: Unit (
string | expression
) - showThousandth: Whether to display thousand separators (
boolean | expression
) - size: Number of integer digits (
number | expression
) - precision: Number of decimal places (
number | expression
) - min: Minimum value (
number | expression
) - max: Maximum value (
number | expression
) - step: Increment or decrement step (
number
) - addStep: Increment step (takes precedence over the
step
property) (number
) - reduceStep: Decrement step (takes precedence over the
step
property) (number
) - autocorrection: Auto-correction after losing focus (
boolean
)
8. Money (MONEY)
FormMoneyFieldWidget
<field data="moneyField" />
Same properties as the FormFloatFieldWidget
component.
9. Boolean (BOOLEAN)
FormBooleanSwitchFieldWidget
<field data="booleanField" />
FormBooleanSelectFieldWidget
<field data="booleanField" widget="Select" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
)
FormBooleanRadioFieldWidget
<field data="booleanField" widget="Select" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - orientation: Arrangement direction (
'TRANSVERSE' | 'VERTICAL'
) - radioMode: Option style (
'BUTTON'
) - rowLimit: Number of options displayed per row (
number
) - autocorrection: Auto-correction after losing focus (
boolean
)
FormBooleanCheckboxFieldWidget
<field data="booleanField" widget="Checkbox" />
V. DSL Property Configuration (Continued)
10. Enumeration (ENUM)
FormEnumFieldWidget
<field data="enumField" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
)
FormEnumRadioWidget
<field data="enumField" widget="Radio" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - orientation: Arrangement direction (
'TRANSVERSE' | 'VERTICAL'
) - radioMode: Option style (
'BUTTON'
) - rowLimit: Number of options displayed per row (
number
) - autocorrection: Auto-correction after losing focus (
boolean
)
FormEnumMultiSelectFieldWidget
<field data="enumMultiField" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
)
FormEnumMultiCheckboxFieldWidget
<field data="enumMultiField" widget="Checkbox" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - orientation: Arrangement direction (
'TRANSVERSE' | 'VERTICAL'
)
11. Date-Time (DATETIME)
FormDateTimeFieldWidget
<field data="datetimeField" />
- format: Date-time formatting text (
string
)
12. Date (DATE)
FormDateFieldWidget
<field data="dateField" />
- format: Date formatting text (
string
)
13. Time (TIME)
FormTimeFieldWidget
<field data="timeField" />
- format: Time formatting text (
string
)
14. Year (YEAR)
FormYearFieldWidget
<field data="yearField" />
- format: Year formatting text (
string
)
15. Key-Value Pair (MAP)
FormMapFieldWidget
<field data="mapField" />
- limit: Limit the number of key-value pairs (
number
)
16. Many-to-One (M2O)
FormM2OSelectFieldWidget
<field data="m2oField" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - load: Loading function code,
FunctionDefinition#fun
(string
) - showSearch: Whether to allow searching (
boolean
) - searchFields: Search fields (
string[]
) - optionLabel: Option title (
expression
)
FormM2ORadioFieldWidget
<field data="m2oField" widget="Radio" />
- orientation: Arrangement direction (
'TRANSVERSE' | 'VERTICAL'
) - optionLabel: Option title (
expression
)
FormM2OFormFieldWidget
<field data="m2oField" widget="Form">
<view type="FORM">
<template slot="fields">
<field data="id" invisible="true" />
<field data="code" />
<field data="name" />
</template>
</view>
</field>
FormM2OTreeSelectFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="TreeSelect">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- onlySelectedLeaf: Only allow selecting leaf node data (
boolean
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormM2OCascaderFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="Cascader">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- changeOnSelect: Change on selection (
boolean
) - showPath: Display selected path (
boolean
) - labelsSeparator: Title text separator (
string
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormM2OUploadDraggableFieldWidget
<field data="m2oField" widget="UploadDraggable" />
- draggableIcon: Drag-and-drop upload icon (
icon
) - draggableTipText: Drag-and-drop upload prompt text (
string
) - showDraggableExtendsionsText: Whether to display supported file extensions (
boolean
) - draggableExtendsionsText: Prompt text for allowed file types (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormM2OUploadFieldWidget
<!-- references="base.PamirsFile" -->
<field data="m2oField" widget="Upload" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
- cdnKey: Specify upload CDN key, used with backend OSS configuration (
string
) - privateLink: Use backend for file upload/download, used when OSS direct upload from client is unavailable (
boolean
)
FormM2OUploadImgFieldWidget
<!-- references="base.PamirsFile" -->
<field data="m2oField" widget="UploadImg" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - uploadIconText: Upload icon prompt text (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormM2OAddressFieldWidget
<!-- references="resource.ResourceAddress" -->
<field data="m2oField" widget="Address" />
- changeOnSelect: Change on selection (
boolean
) - showPath: Display selected path (
boolean
) - labelsSeparator: Title text separator (
string
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
)
FormM2OCompanyFieldWidget
<!-- references="business.PamirsCompany" -->
<field data="m2oField" widget="Company" />
FormM2ODepartmentFieldWidget
<!-- references="business.PamirsDepartment" -->
<field data="m2oField" widget="Department" />
FormM2OEmployeeFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2oField" widget="Employee" />
17. One-to-Many (O2M)
FormO2MSelectFieldWidget
<field data="o2mField" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - load: Loading function code,
FunctionDefinition#fun
(string
) - showSearch: Whether to allow searching (
boolean
) - searchFields: Search fields (
string[]
) - optionLabel: Option title (
expression
)
FormO2MCheckboxFieldWidget
<field data="o2mField" widget="Checkbox" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - load: Loading function code,
FunctionDefinition#fun
(string
) - optionLabel: Option title (
expression
)
FormO2MTableFieldWidget
<field data="o2mField" widget="Table">
<view type="TABLE">
<template slot="fields">
<field data="id" invisible="true" />
<field data="code" />
<field data="name" />
</template>
</view>
</field>
FormO2MTreeSelectFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="o2mField" widget="TreeSelect">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- onlySelectedLeaf: Only allow selecting leaf node data (
boolean
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormO2MCascaderFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="o2mField" widget="Cascader">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- changeOnSelect: Change on selection (
boolean
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormO2MUploadDraggableFieldWidget
<field data="o2mField" widget="UploadDraggable" />
- draggableIcon: Drag-and-drop upload icon (
icon
) - draggableTipText: Drag-and-drop upload prompt text (
string
) - showDraggableExtendsionsText: Whether to display supported file extensions (
boolean
) - draggableExtendsionsText: Prompt text for allowed file types (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormO2MUploadFieldWidget
<field data="o2mField" widget="Upload" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
- cdnKey: Specify upload CDN key, used with backend OSS configuration (
string
) - privateLink: Use backend for file upload/download, used when OSS direct upload from client is unavailable (
boolean
)
FormO2MUploadImgFieldWidget
<field data="o2mField" widget="UploadImg" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - uploadIconText: Upload icon prompt text (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
18. Many-to-Many (M2M)
FormM2MFieldSelectWidget
<field data="m2mField" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - load: Loading function code,
FunctionDefinition#fun
(string
) - showSearch: Whether to allow searching (
boolean
) - searchFields: Search fields (
string[]
) - optionLabel: Option title (
expression
)
FormM2MCheckboxFieldWidget
<field data="m2mField" widget="Checkbox" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - load: Loading function code,
FunctionDefinition#fun
(string
) - optionLabel: Option title (
expression
)
FormM2MTableFieldWidget
<field data="m2mField" widget="Table">
<view type="TABLE">
<template slot="fields">
<field data="id" invisible="true" />
<field data="code" />
<field data="name" />
</template>
</view>
</field>
FormM2MTreeSelectFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="TreeSelect">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- onlySelectedLeaf: Only allow selecting leaf node data (
boolean
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormM2MCascaderFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Cascader">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- changeOnSelect: Change on selection (
boolean
) - enableSearch: Whether to allow searching (
boolean
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormTransferFieldWidget
<field data="m2mField" widget="Transfer" />
- maxNumber: Maximum number of selections (
number
) - minNumber: Minimum number of selections (
number
) - optionLabel: Option title (
expression
) - enableSearch: Whether to enable searching (
boolean
) - sortable: Whether to enable sorting (
boolean
) - leftDisplayType: Left display type (
'LIST' | 'TABLE'
) - leftFields: Left table display fields, effective when
leftDisplayType="TABLE"
(string[]
) - rightDisplayType: Right display type (
'LIST' | 'TABLE'
) - rightFields: Right table display fields, effective when
rightDisplayType="TABLE"
(string[]
)
FormM2MTreeFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Tree">
<nodes>
<node model="business.PamirsCompany" label="activeRecord.name" labelFields="name" selfReferences="parent" />
<node model="business.PamirsDepartment" label="activeRecord.name" labelFields="name" references="company" selfReferences="parent" />
<node model="business.PamirsEmployee" label="activeRecord.name" labelFields="name" references="departmentList" />
</nodes>
</field>
- onlySelectedLeaf: Only allow selecting leaf node data (
boolean
) - checkStrictly: Parent-child node selection status association when selected (
boolean
) - nodeCheckedAll: Allow node selection of all (
boolean
) - nodeCheckedAllLabel: Select all title text (
string
) - nodeUncheckedAllLabel: Deselect all title text (
string
) - fetchAll: Fetch all data at once (
boolean
) - node.model: Hierarchical model code (
string
) - node.label: Hierarchical option title (
expression
) - node.labelFields: Hierarchical title fields (
string[]
) - node.references: Hierarchical associated model code (
string
) - node.selfReferences: Self-association field code (
string
)
FormM2MUploadDraggableFieldWidget
<field data="m2mField" widget="UploadDraggable" />
- draggableIcon: Drag-and-drop upload icon (
icon
) - draggableTipText: Drag-and-drop upload prompt text (
string
) - showDraggableExtendsionsText: Whether to display supported file extensions (
boolean
) - draggableExtendsionsText: Prompt text for allowed file types (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormM2MUploadFieldWidget
<field data="m2mField" widget="Upload" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
- cdnKey: Specify upload CDN key, used with backend OSS configuration (
string
) - privateLink: Use backend for file upload/download, used when OSS direct upload from client is unavailable (
boolean
)
FormM2MUploadImgFieldWidget
<field data="m2mField" widget="UploadImg" />
- uploadPlaceholder: File upload prompt text (
string
) - uploadIcon: File upload prompt icon (
icon
) - uploadIconText: Upload icon prompt text (
string
) - partSize: Size of a single chunk (
number
: MB) - chunkUploadThreshold: Chunk total threshold (
number
) - parallel: Upload concurrency count (
number
) - limit: Maximum number of uploads (
number
) - limitSize: Maximum size of a single uploaded file (
number
: MB) - limitFileExtensions: Restricted file extension types (
string
)e.g.: '.jpg,.jpeg,.png'
FormM2MCompanyFieldWidget
<!-- references="business.PamirsCompany" -->
<field data="m2mField" widget="Company" />
FormM2MDepartmentFieldWidget
<!-- references="business.PamirsDepartment" -->
<field data="m2mField" widget="Department" />
FormM2MEmployeeFieldWidget
<!-- references="business.PamirsEmployee" -->
<field data="m2mField" widget="Employee" />