Detail

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

<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

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

<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

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

DetailStringSignatureFieldWidget

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

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

DetailStringUploadFieldWidget

<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

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

DetailStringIframeFieldWidget

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

crypto: Encrypted storage (boolean)

DetailStringHyperlinksFieldWidget

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

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

DetailStringDownloadFieldWidget

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

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

DetailStringMediaPlayerFieldWidget

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

DetailStringTagFieldWidget

<field data="stringMultiField" />

2. Multi-line Text (TEXT)

DetailCommonFieldWidget

<field data="textField" />

3. Rich Text (HTML)

DetailHtmlFieldWidget

<field data="htmlField" />

encode: Encoded storage (boolean)

4. Integer (INTEGER)

DetailNumberWidget

<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

<field data="booleanField" />

6. Enum (ENUM)

DetailEnumFieldWidget

<field data="enumField" />

DetailEnumMultiFieldWidget

<field data="enumMultiField" />

7. Date-Time (DATETIME)

DetailDateTimeFieldWidget

<field data="datetimeField" />

format: Date-time formatting text (string)

8. Date (DATE)

DetailDateFieldWidget

<field data="dateField" />

format: Date formatting text (string)

9. Time (TIME)

DetailTimeFieldWidget

<field data="timeField" />

format: Time formatting text (string)

10. Year (YEAR)

DetailYearFieldWidget

<field data="yearField" />

format: Year formatting text (string)

11. Key-Value Pair (MAP)

DetailMapFieldWidget

<field data="mapField" />

12. Many-to-One (M2O)

DetailM2OSelectFieldWidget

<field data="m2oField" />

optionLabel: Option title (expression)

DetailM2OUploadWidget

<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

<field data="o2mField" />

optionLabel: Option title (expression)

DetailO2MTableFieldWidget

<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

<field data="m2mField" />

optionLabel: Option title (expression)

DetailM2MTableFieldWidget

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