I. View Characteristics

View Type: Detail (DETAIL)
Data Type: Object
DSL Characteristics: Supports layout functionality.
General Behaviors of Data Structure:
- Query Behavior: Data population.
Detail Behaviors:
- Interaction Behavior: All fields are displayed in read-only mode; no other interactions are available.
- Sub-table Query Behavior: Queries are performed via backend pagination.
Common Interfaces: (Default data manager functions)
- queryOne: For data population. (Valid when pk is not null)
- queryPage: For sub-table query behavior.

II. DSL Structure

A simplified version of the view can be written as follows: (Here, "simplified" means each tag has fewer attributes, not fewer nodes.)

xml

<view type="DETAIL" model="demo.DemoModel" name="demo_detail_view">
    <template slot="actions">
        <action name="$$internal_GotoListTableRouter" label="Back" 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>

The detail view and form view both belong to the Object-type view, and their DSL structures are identical. The only differences between the two views lie in the view type and name.

Note

To understand the detail view, you can refer to the form view architecture. For more information, see: Form (Form)

III. Default Field Components

In the above DSL, we did not specify the widget attribute. In this case, the Widget framework will retrieve the corresponding default component based on the field metadata attributes. The following table lists all default components currently used in the detail view:

Field Type	Multi-value	Default Component	TypeScript Class
Text (STRING)	No	Text (Input)	DetailStringFieldWidget
Text (STRING)	Yes	Tag (Tag)	DetailStringTagFieldWidget
Multi-line Text (TEXT)	No	Multi-line Text (TextArea)	DetailCommonFieldWidget
Rich Text (HTML)	No	Rich Text (RichText)	DetailHtmlFieldWidget
Phone (PHONE)	No	Phone (Phone)	DetailStringFieldWidget
Email (EMAIL)	No	Email (Email)	DetailStringFieldWidget
Integer (INTEGER)	No	Integer (Integer)	DetailNumberWidget
Integer (INTEGER)	Yes	Tag (Tag)	DetailStringTagFieldWidget
Float (FLOAT)	No	Number (Float)	DetailNumberWidget
Money (MONEY)	No	Currency (Currency)	DetailNumberWidget
Boolean (BOOLEAN)	No	Switch (Switch)	DetailBooleanFieldWidget
Enumeration (ENUM)	No	Dropdown Single-select (Select)	DetailEnumFieldWidget
Enumeration (ENUM)	Yes	Dropdown Multi-select (Select)	DetailEnumMultiFieldWidget
Date Time (DATETIME)	No	Date Time (DateTimePicker)	DetailDateTimeFieldWidget
Date (DATE)	No	Date (DatePicker)	DetailDateFieldWidget
Time (TIME)	No	Time (TimePicker)	DetailTimeFieldWidget
Year (YEAR)	No	Year (YearPicker)	DetailYearFieldWidget
Key-Value Pair (MAP)	No	Key-Value Pair (Map)	DetailMapFieldWidget
Many-to-One (M2O)	No	Dropdown Single-select (Select)	DetailM2OSelectFieldWidget
One-to-Many (O2M)	Yes	Dropdown Multi-select (Select)	DetailO2MSelectFieldWidget
Many-to-Many (M2M)	Yes	Dropdown Multi-select (Select)	DetailM2MSelectFieldWidget

IV. Optional Field Components

For each field type, in addition to the corresponding default components mentioned above, there are other components that can be used by specifying the widget attribute. The following table lists all existing field components in the detail view:

Field Type	Multi-value	Component	TypeScript Class
Text (STRING)	No	Color (ColorPicker)	DetailStringColorPickerFieldWidget
		Handwritten Signature (Signature)	DetailStringSignatureFieldWidget
		File (Upload)	DetailStringUploadFieldWidget
		Image (UploadImg)	DetailStringUploadImgFieldWidget
		Embedded Webpage (Iframe)	DetailStringIframeFieldWidget
		Hyperlink (Hyperlinks)	DetailStringHyperlinksFieldWidget
		File Download (Download)	DetailStringDownloadFieldWidget
		Media Player (MediaPlayer)	DetailStringMediaPlayerFieldWidget
	Yes	File (Upload)	DetailStringUploadFieldWidget
	Yes	Image (UploadImg)	DetailStringUploadImgFieldWidget
Multi-line Text (TEXT)	No	Handwritten Signature (Signature)	DetailStringSignatureFieldWidget
		File (Upload)	DetailStringUploadFieldWidget
		Image (UploadImg)	DetailStringUploadImgFieldWidget
		File Download (Download)	DetailStringDownloadFieldWidget
Boolean (BOOLEAN)	No	Dropdown Single-select (Select)	?
		Radio Button (Radio)	?
		Checkbox (Checkbox)	?
Many-to-One (M2O)	No	Radio Button (Radio)	?
		Form (Form)	FormM2OFormFieldWidget
		Drag-and-Drop Upload (UploadDraggable)	FormM2OUploadDraggableFieldWidget
		File (Upload)	DetailM2OUploadWidget
		Image (UploadImg)	FormM2OUploadImgFieldWidget
One-to-Many (O2M)	Yes	Checkbox (Checkbox)	?
		Table (Table)	DetailO2MTableFieldWidget
		Drag-and-Drop Upload (UploadDraggable)	FormO2MUploadDraggableFieldWidget
		File (Upload)	FormO2MUploadFieldWidget
		Image (UploadImg)	FormO2MUploadImgFieldWidget
Many-to-Many (M2M)	Yes	Checkbox (Checkbox)	?
		Table (Table)	DetailM2MTableFieldWidget
		Drag-and-Drop Upload (UploadDraggable)	FormM2MUploadDraggableFieldWidget
		File (Upload)	FormM2MUploadFieldWidget
		Image (UploadImg)	FormM2MUploadImgFieldWidget

V. DSL Property Configuration

(I) Detail Property Configuration

xml

<element widget="Detail">
    ......
</element>

layout: Form layout ('horizontal' | 'vertical' | 'inline')
cols: Number of row grids (number)
filter: Invisible filter condition (rsql)
domain: Visible filter condition (rsql)
load: Loading function code, FunctionDefinition#fun (string)

(II) Common Field Configuration

invisible: Whether to hide (boolean | expression)
usingLoading: Whether to use loading transition animation (boolean)
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 required (boolean | expression)
requiredTips: Required prompt text (string)
disabled: Whether to disable (boolean | expression)
emptyStyle: Empty value style (string | 'hyphen' | 'empty' | 'null')

Note

Properties marked with "" are not completely universal properties. They depend on specific component implementations. If the component's interaction does not support or implement them, the configuration may be ineffective.

(III) Field Component Property Configuration

1. String (STRING)

DetailStringFieldWidget

xml

<field data="stringField" />

type: Input type ('text' | 'password' | expression)
prefix: Prefix text (string | icon)
prefixType: Prefix type ('TEXT' | 'ICON')
prefixStore: Whether the prefix is stored (boolean)
suffix: Suffix text (string | icon)
suffixType: Suffix type ('TEXT' | 'ICON')
suffixStore: Whether the suffix is stored (boolean)
crypto: Encrypted storage (boolean)

DetailStringColorPickerFieldWidget

xml

<field data="stringField" widget="ColorPicker" />

DetailStringSignatureFieldWidget

xml

<field data="stringField" widget="Signature" />

signatureFontColor: Signature text color (color)
signatureBackGroundColor: Signature background panel color (color)

DetailStringUploadFieldWidget

xml

<field data="stringField" widget="Upload" />

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)

DetailStringUploadImgFieldWidget

xml

<field data="stringField" widget="UploadImg" />

DetailStringIframeFieldWidget

xml

<field data="stringField" widget="Iframe" />

crypto: Encrypted storage (boolean)

DetailStringHyperlinksFieldWidget

xml

<field data="stringField" widget="Hyperlinks" />

target: Link opening method ('OPEN_WINDOW' | 'ROUTER')
text: Link display text (string)

DetailStringDownloadFieldWidget

xml

<field data="stringField" widget="Download" />

linkDisplayTextPrefix: Download prompt text prefix (string)
linkDisplayText: Download prompt text (string)
downloadFileName: Name of the downloaded file (string)

DetailStringMediaPlayerFieldWidget

xml

<field data="stringField" widget="MediaPlayer" />

DetailStringTagFieldWidget

xml

<field data="stringMultiField" />

2. Multi-line Text (TEXT)

DetailCommonFieldWidget

xml

<field data="textField" />

3. Rich Text (HTML)

DetailHtmlFieldWidget

xml

<field data="htmlField" />

encode: Encoded storage (boolean)

4. Integer (INTEGER)

DetailNumberWidget

xml

<field data="integerField" />

prefix: Prefix text (string | icon)
prefixType: Prefix type ('TEXT' | 'ICON')
prefixStore: Whether the prefix is stored (boolean)
suffix: Suffix text (string | icon)
suffixType: Suffix type ('TEXT' | 'ICON')
suffixStore: Whether the suffix is stored (boolean)
unit: Unit (string | expression)
showThousandth: Whether to display thousandths (boolean | expression)

5. Boolean (BOOLEAN)

DetailBooleanFieldWidget

xml

<field data="booleanField" />

6. Enum (ENUM)

DetailEnumFieldWidget

xml

<field data="enumField" />

DetailEnumMultiFieldWidget

xml

<field data="enumMultiField" />

7. Date-Time (DATETIME)

DetailDateTimeFieldWidget

xml

<field data="datetimeField" />

format: Date-time formatting text (string)

8. Date (DATE)

DetailDateFieldWidget

xml

<field data="dateField" />

format: Date formatting text (string)

9. Time (TIME)

DetailTimeFieldWidget

xml

<field data="timeField" />

format: Time formatting text (string)

10. Year (YEAR)

DetailYearFieldWidget

xml

<field data="yearField" />

format: Year formatting text (string)

11. Key-Value Pair (MAP)

DetailMapFieldWidget

xml

<field data="mapField" />

12. Many-to-One (M2O)

DetailM2OSelectFieldWidget

xml

<field data="m2oField" />

optionLabel: Option title (expression)

DetailM2OUploadWidget

xml

<field data="m2oField" widget="Upload" />

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)

13. One-to-Many (O2M)

DetailO2MSelectFieldWidget

xml

<field data="o2mField" />

optionLabel: Option title (expression)

DetailO2MTableFieldWidget

xml

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

14. Many-to-Many (M2M)

DetailM2MSelectFieldWidget

xml

<field data="m2mField" />

optionLabel: Option title (expression)

DetailM2MTableFieldWidget

xml

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

I. View Characteristics ​

II. DSL Structure ​

III. Default Field Components ​

IV. Optional Field Components ​

V. DSL Property Configuration ​

(I) Detail Property Configuration ​

(II) Common Field Configuration ​

(III) Field Component Property Configuration ​

1. String (STRING) ​

DetailStringFieldWidget ​

DetailStringColorPickerFieldWidget ​

DetailStringSignatureFieldWidget ​

DetailStringUploadFieldWidget ​

DetailStringUploadImgFieldWidget ​

DetailStringIframeFieldWidget ​

DetailStringHyperlinksFieldWidget ​

DetailStringDownloadFieldWidget ​

DetailStringMediaPlayerFieldWidget ​

DetailStringTagFieldWidget ​

2. Multi-line Text (TEXT) ​

DetailCommonFieldWidget ​

3. Rich Text (HTML) ​

DetailHtmlFieldWidget ​

4. Integer (INTEGER) ​

DetailNumberWidget ​

5. Boolean (BOOLEAN) ​

DetailBooleanFieldWidget ​

6. Enum (ENUM) ​

DetailEnumFieldWidget ​

DetailEnumMultiFieldWidget ​

7. Date-Time (DATETIME) ​

DetailDateTimeFieldWidget ​

8. Date (DATE) ​

DetailDateFieldWidget ​

9. Time (TIME) ​

DetailTimeFieldWidget ​

10. Year (YEAR) ​

DetailYearFieldWidget ​

11. Key-Value Pair (MAP) ​

DetailMapFieldWidget ​

12. Many-to-One (M2O) ​

DetailM2OSelectFieldWidget ​

DetailM2OUploadWidget ​

13. One-to-Many (O2M) ​

DetailO2MSelectFieldWidget ​

DetailO2MTableFieldWidget ​

14. Many-to-Many (M2M) ​

DetailM2MSelectFieldWidget ​

DetailM2MTableFieldWidget ​