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
Click to enlarge