Gallery

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 TypeMulti-valueDefault ComponentTypeScript Class
Text (STRING)NoText (Input)GalleryStringFieldWidget
YesTag (Tag)GalleryStringTagFieldWidget
Multi-line Text (TEXT)NoMulti-line Text (TextArea)GalleryCommonFieldWidget
Rich Text (HTML)NoRich Text (RichText)GalleryHtmlFieldWidget
Phone (PHONE)NoPhone (Phone)GalleryStringFieldWidget
Email (EMAIL)NoEmail (Email)GalleryStringFieldWidget
Integer (INTEGER)NoInteger (Integer)GalleryNumberWidget
YesTag (Tag)GalleryStringTagFieldWidget
Float (FLOAT)NoNumber (Float)GalleryNumberWidget
Money (MONEY)NoCurrency (Currency)GalleryNumberWidget
Boolean (BOOLEAN)NoText (Yes/No)GalleryBooleanFieldWidget
Enumeration (ENUM)NoTag (Tag)GalleryEnumFieldWidget
YesTag (Tag)GalleryEnumMultiFieldWidget
Date Time (DATETIME)NoDate Time (DateTimePicker)GalleryDateTimeFieldWidget
Date (DATE)NoDate (DatePicker)GalleryDateFieldWidget
Time (TIME)NoTime (TimePicker)GalleryTimeFieldWidget
Year (YEAR)NoYear (YearPicker)GalleryYearFieldWidget
Key-Value Pair (MAP)NoKey-Value Pair (Map)GalleryMapFieldWidget
Many-to-One (M2O)NoDropdown Single-select (Select)GalleryM2OSelectFieldWidget
One-to-Many (O2M)YesDropdown Multi-select (Select)GalleryO2MSelectFieldWidget
Many-to-Many (M2M)YesDropdown 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 TypeMulti-valueDefault ComponentTypeScript Class
Text (STRING)NoColor (ColorPicker)GalleryStringColorPickerFieldWidget
File (Upload)GalleryStringUploadFieldWidget
Image (UploadImg)GalleryStringUploadImgFieldWidget
Embedded Webpage (Iframe)GalleryStringIframeFieldWidget
Hyperlink (Hyperlinks)GalleryStringHyperlinksFieldWidget
File Download (Download)?
Media Player (MediaPlayer)GalleryStringMediaPlayerWidget
YesFile (Upload)GalleryStringUploadFieldWidget
Image (UploadImg)GalleryStringUploadImgFieldWidget
Multi-line Text (TEXT)NoHandwritten Signature (Signature)?
Drag-and-Drop Upload (UploadDraggable)?
File (Upload)GalleryStringUploadFieldWidget
Image (UploadImg)GalleryStringUploadImgFieldWidget
File Download (Download)?
Boolean (BOOLEAN)NoDropdown Single-select (Select)?
Radio Button (Radio)?
Checkbox (Checkbox)?
Many-to-One (M2O)NoRadio Button (Radio)?
Drag-and-Drop Upload (UploadDraggable)FormM2OUploadDraggableFieldWidget
File (Upload)FormM2OUploadFieldWidget
Image (UploadImg)?
One-to-Many (O2M)YesCheckbox (Checkbox)?
Drag-and-Drop Upload (UploadDraggable)FormO2MUploadDraggableFieldWidget
File (Upload)FormO2MUploadFieldWidget
Image (UploadImg)?
Many-to-Many (M2M)YesDrag-and-Drop Upload (UploadDraggable)FormM2MUploadDraggableFieldWidget
File (Upload)FormM2MUploadFieldWidget
Image (UploadImg)?

V. DSL 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)
默认页脚
Copyright © 2026 Mr.Hope