I. View Characteristics

• View Type: Gallery (GALLERY)
• Data Type: List
• DSL Characteristics: Supports layout functionality.
• General Behaviors of Data Structure:
  • Query Behaviors: Pagination, sorting, searching.
  • Interaction Behaviors: Single selection, multiple selections.
• Common Interfaces: (Default data manager functions)
  • queryPage: Supports query functions such as pagination, sorting, and searching.
  • create: Inline editing for creation. (When pk is null)
  • update: Inline editing for updates. (When pk is not null)
  • delete: Delete operation.

II. DSL Structure

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

<view type="GALLERY" model="demo.DemoModel" name="demo_gallery_view">
	<template slot="searchFields">
		<field data="code" />
		<field data="name" />
	</template>
	<template slot="actions">
		<action name="redirectCreatePage" label="Create" />
		<action name="delete" label="Delete" />
	</template>
	<template slot="gallery">
    <field data="id" invisible="true" />
		<template slot="card">
			<template slot="title">
				<field data="name" labelInvisible="true" justifyContent="center" />
			</template>
			<template slot="content">
				<field data="code" />
			</template>
			<template slot="rowActions">
				<action name="redirectUpdatePage" label="Edit" />
				<action name="redirectDetailPage" label="Detail" />
			</template>
		</template>
	</template>
</view>

Overall, the gallery view is similar to the table view, while the content in the title and content slots supports layout functionality.

The gallery view has a DSL structure designed based on view characteristics. It possesses the features of a List data structure and also supports layout functionality in the local cards.

In terms of component division of labor:

• The Gallery component is used to render Card components in a loop, enabling each Card component to have an independent dataset and the ability to render a single piece of data.
• Each Card component is divided into three parts: title area, content area, and action area, which are used to display business data and action behaviors.

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 gallery view:

Field Type	Multi-value	Default Component	TypeScript Class
Text (STRING)	No	Text (Input)	GalleryStringFieldWidget
	Yes	Tag (Tag)	GalleryStringTagFieldWidget
Multi-line Text (TEXT)	No	Multi-line Text (TextArea)	GalleryCommonFieldWidget
Rich Text (HTML)	No	Rich Text (RichText)	GalleryHtmlFieldWidget
Phone (PHONE)	No	Phone (Phone)	GalleryStringFieldWidget
Email (EMAIL)	No	Email (Email)	GalleryStringFieldWidget
Integer (INTEGER)	No	Integer (Integer)	GalleryNumberWidget
	Yes	Tag (Tag)	GalleryStringTagFieldWidget
Float (FLOAT)	No	Number (Float)	GalleryNumberWidget
Money (MONEY)	No	Currency (Currency)	GalleryNumberWidget
Boolean (BOOLEAN)	No	Text (Yes/No)	GalleryBooleanFieldWidget
Enumeration (ENUM)	No	Tag (Tag)	GalleryEnumFieldWidget
	Yes	Tag (Tag)	GalleryEnumMultiFieldWidget
Date Time (DATETIME)	No	Date Time (DateTimePicker)	GalleryDateTimeFieldWidget
Date (DATE)	No	Date (DatePicker)	GalleryDateFieldWidget
Time (TIME)	No	Time (TimePicker)	GalleryTimeFieldWidget
Year (YEAR)	No	Year (YearPicker)	GalleryYearFieldWidget
Key-Value Pair (MAP)	No	Key-Value Pair (Map)	GalleryMapFieldWidget
Many-to-One (M2O)	No	Dropdown Single-select (Select)	GalleryM2OSelectFieldWidget
One-to-Many (O2M)	Yes	Dropdown Multi-select (Select)	GalleryO2MSelectFieldWidget
Many-to-Many (M2M)	Yes	Dropdown Multi-select (Select)	GalleryM2MSelectFieldWidget

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 gallery view:

Field Type	Multi-value	Default Component	TypeScript Class
Text (STRING)	No	Color (ColorPicker)	GalleryStringColorPickerFieldWidget
		File (Upload)	GalleryStringUploadFieldWidget
		Image (UploadImg)	GalleryStringUploadImgFieldWidget
		Embedded Webpage (Iframe)	GalleryStringIframeFieldWidget
		Hyperlink (Hyperlinks)	GalleryStringHyperlinksFieldWidget
		File Download (Download)	?
		Media Player (MediaPlayer)	GalleryStringMediaPlayerWidget
	Yes	File (Upload)	GalleryStringUploadFieldWidget
		Image (UploadImg)	GalleryStringUploadImgFieldWidget
Multi-line Text (TEXT)	No	Handwritten Signature (Signature)	?
		Drag-and-Drop Upload (UploadDraggable)	?
		File (Upload)	GalleryStringUploadFieldWidget
		Image (UploadImg)	GalleryStringUploadImgFieldWidget
		File Download (Download)	?
Boolean (BOOLEAN)	No	Dropdown Single-select (Select)	?
		Radio Button (Radio)	?
		Checkbox (Checkbox)	?
Many-to-One (M2O)	No	Radio Button (Radio)	?
		Drag-and-Drop Upload (UploadDraggable)	FormM2OUploadDraggableFieldWidget
		File (Upload)	FormM2OUploadFieldWidget
		Image (UploadImg)	?
One-to-Many (O2M)	Yes	Checkbox (Checkbox)	?
		Drag-and-Drop Upload (UploadDraggable)	FormO2MUploadDraggableFieldWidget
		File (Upload)	FormO2MUploadFieldWidget
		Image (UploadImg)	?
Many-to-Many (M2M)	Yes	Drag-and-Drop Upload (UploadDraggable)	FormM2MUploadDraggableFieldWidget
		File (Upload)	FormM2MUploadFieldWidget
		Image (UploadImg)	?

V. DSL Property Configuration

(I) Gallery Property Configuration

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

• cols: Number of cards per row (number)
• gutter: Spacing between cards (gutter)

(II) Card Property Configuration

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

• width: Width (number | string)
• minWidth: Minimum width (number | string)
• maxWidth: Maximum width (number | string)
• height: Height (number | string)
• minHeight: Minimum height (number | string)
• maxHeight: Maximum height (number | string)
• allowClick: Whether the card allows clicking (requires configuring the action in the click slot) (boolean)
• inlineActiveCount: Number of actions displayed in the bottom action area (number)

(III) Common Field Configuration

• justifyContent: Horizontal alignment (FlexRowJustify)
• emptyStyle: Empty value style (string | 'hyphen' | 'empty' | 'null')

Note

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

(IV) Field Component Property Configuration

1. String (STRING)

GalleryStringFieldWidget

<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)
• crypto: Encrypted storage (boolean)

GalleryStringColorPickerFieldWidget

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

GalleryStringUploadFieldWidget

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

• cdnKey: Specify the upload CDN key (used with backend OSS configuration) (string)
• privateLink: Use backend for file upload/download (used when OSS direct upload from the client is unavailable) (boolean)

GalleryStringUploadImgFieldWidget

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

GalleryStringIframeFieldWidget

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

• crypto: Encrypted storage (boolean)

GalleryStringHyperlinksFieldWidget

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

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

GalleryStringMediaPlayerWidget

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

GalleryStringTagFieldWidget

<field data="stringMultiField" />

2. Multi-line Text (TEXT)

GalleryCommonFieldWidget

<field data="textField" />

3. Rich Text (HTML)

GalleryHtmlFieldWidget

<field data="htmlField" />

• showHeight: Display height (number | string)

4. Integer (INTEGER)

GalleryNumberWidget

<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 thousandths (boolean | expression)

5. Boolean (BOOLEAN)

GalleryBooleanFieldWidget

<field data="booleanField" />

6. Enum (ENUM)

GalleryEnumFieldWidget

<field data="enumField" />

GalleryEnumMultiFieldWidget

<field data="enumMultiField" />

7. Date-Time (DATETIME)

GalleryDateTimeFieldWidget

<field data="datetimeField" />

• format: Date-time formatting text (string)

8. Date (DATE)

GalleryDateFieldWidget

<field data="dateField" />

• format: Date formatting text (string)

9. Time (TIME)

GalleryTimeFieldWidget

<field data="timeField" />

• format: Time formatting text (string)

10. Year (YEAR)

GalleryYearFieldWidget

<field data="yearField" />

• format: Year formatting text (string)

11. Key-Value Pair (MAP)

GalleryMapFieldWidget

<field data="mapField" />

12. Many-to-One (M2O)

GalleryM2OSelectFieldWidget

<field data="m2oField" />

• optionLabel: Option title (expression)

13. One-to-Many (O2M)

GalleryO2MSelectFieldWidget

<field data="o2mField" />

• optionLabel: Option title (expression)

14. Many-to-Many (M2M)

GalleryM2MSelectFieldWidget

<field data="m2mField" />

• optionLabel: Option title (expression)