Updated on 2025-08-26 GMT+08:00

Adding Widgets to Standard Pages

Standard Page Widget Classification

Standard page widgets include Basic and Custom widgets. For details about Basic widgets, see Table 1. You can hover the cursor over a basic widget. is displayed in the upper right corner of the basic widget. Click this icon to view its usage description.

Table 1 Basic widgets

Widget Category

Name

Description

Layout

Form

Collects, verifies, and submits data. Contains elements such as check boxes, radio buttons, text boxes, and dropdowns.

You need to bind this widget to a data model. When the data type is object, you can select objects from the backend to auto-generate a form, or bind a custom data model to create a form.

Table

Displays a large amount of structured data. Supports complex functions such as sorting, filtering, pagination, and custom operations.

You need to bind this widget to a data model so that you can perform secondary orchestration.

Container

A layout container. Supports flow and flexible layouts.

Row

An advanced container widget, equivalent to a row, can be divided into multiple columns. This allows you to split a page into two or more columns and drag other widgets into each column.

Collapsible Panel

Collapses or expands the content area.

Tab

Switches tabs and displays large blocks of content at the same level.

List View

Combines list items and dynamically displays them based on the instantiated data.

You need to bind a data model to this widget. The data type is array. If pagination is required, the pagination widget must be placed in the list view container.

Modal

Displayed in the floating layer while the current page status is retained.

Table (new)

A data table widget. Displays a large amount of structured data. Allows you to select, sort, filter, and paginate data, as well as customize operations.

You need to bind a data model to this widget.

Form

Input

A single-line text box. Used for entering brief information, such as names and phone numbers.

Text Area

Used for entering multiple lines of text, it is ideal for long text, paragraphs, or complex information.

Date Picker

Used for selecting or entering a date, supporting year, month, and day. You can also specify a date range.

Numeric Input

Collects data.

Checkbox

Allows selecting multiple options at a time, such as hobbies.

Radio

Allows selecting only one option at a time, such as gender.

Select

Uses a drop-down list box to display and select options.

Cascader

Allows selection of options from related data sets, such as provinces, cities, districts, company levels, and transaction categories.

Switch

Allows switching between on and off statuses.

Upload

Allows users to upload files by selecting or dragging them. It can be bound to a data model, and the uploaded file list will be saved in the bound model.

Autocomplete

Allows entering text with a prompt.

Reference Selector

A search selection box, which is associated with Lookup or Master-Detail objects. You can search for data, and matching options will appear in the dropdown list.

Pop-up Dialog Box

Allows selection of options from a dialog box. The selected options are displayed in the text box.

Multilingual Selector

Allows users to switch between languages. The options shown are based on the multilingual settings in the system.

Rating

Allows users to collect ratings and comments.

User

Selects portal users.

Department

Select organization departments.

Common

Button

Triggers the corresponding service logic based on different click events.

Button Card

A button card is a group of buttons arranged vertically. On the page, you can configure the click events for each button to trigger different service logic.

Label

Displays static text on the page.

Icon

Displays the related text. It can function as a button and is used together with other widgets.

Title

Sets a page title.

Link

Adds a link on a page that redirects to another page. The link must start with http// or https//.

Image

Displays images in JPG, JPEG, PNG, or GIF format. Each image must be no larger than 50 MB.

Breadcrumb

Displays the website hierarchy, notifies users of their current location, and enables users to navigate upwards.

Slider

Allows users to choose a value within a range, either continuous or discrete. Use this widget to set volume, adjust brightness, or select date ranges.

Pagination

Shows data on a page in sections. You can set how many records appear on each page. It helps you quickly switch through large amounts of data.

QR Code

Generates a QR code. The size of a QR code can be adjusted. Text or link addresses can be entered.

Advanced

Option Tree

Allows users to set tree structure content on the GUI. It is ideal for scenarios like setting directory hierarchies, displaying product classification structures, or showing organizational hierarchies. It clearly visualizes the hierarchical relationships within tree structure data and offers interactive features such as expanding, collapsing, and selecting items.

Step Bar

Guides users through tasks step-by-step, such as form wizards and registration processes. Steps can be customized.

Time Axis

Displays information in chronological order, suitable for project management and personal resumes.

Carousel

Displays a group of images or cards in rotation mode.

On mobile devices, hovering over an image or card does not stop playback, as hover effects are not supported.

Collapsible Panel

Collapses or expands the content area to hide or display the content, saving page space. This widget is available only on PCs.

Scroll

Loads more data when users scroll to the bottom. Typically used for displaying long lists or articles.

Selection Card

Displays a set of options in two columns. Users can move options between columns. Suitable for selecting multiple items from a list, such as products, users, or departments. This widget is available only on PCs.

Grid Container

Divides pages or widgets into multiple grids. It is used for web page layout to display multiple items like product lists and image walls, making the layout visually appealing and organized.

Code Block

Renders an independent HTML code block, accepting only HTML code.

Rich Text

Enables rich text editing on pages, such as blogs and forums. This widget is available only on PCs.

Video

Plays videos.

  • The autoplay feature requires the mute property to be enabled. For instance, to set a video to autoplay, the mute property must be set to true.
  • Currently, this widget supports only MP4, OGV, and WebM formats.

BPM

BPM-Action

Displays executable actions such as submission, delegation, transfer, and completion based on the current BPM information. This widget is only compatible with BPMs.

BPM-History

Displays historical execution records based on the current BPM. This widget is only compatible with BPMs.

BPM-Attachment

Displays the current attachment list based on the current BPM information and allows users to upload attachments. This widget is only compatible with BPMs.

BPM Flowchart

Displays the flowchart based on the current BPM information. This widget is only compatible with BPMs.

Smart

AI Assistant

Quickly generates an AI dialog box. Customers need to provide the foundation model API and configure it in the connector.

Markdown Card

Renders Markdown content, displaying text and symbols in a specific format, such as bulletins and news.

Chat List

Displays user interactions with foundation models and constructs the frontend dialog page for users.

Chat History

Displays records of user chats with the foundation model.

Input Card

This widget is used for dialog input and to create frontend dialog pages for foundation models.

Adding Widgets to a Standard Page

A standard page enables quick frontend service development through a low-code or no-code approach. You can easily design your page by dragging widgets onto a canvas. When designing a standard page, you can drag these widgets from the widget area on the left to the design view in the middle.

Figure 1 Adding widgets to a standard page