The Collection control is a versatile tool designed to present items from a data source, such as a Data List, Document Library, Form Report, or Data Report. Unlike other data source-related controls (like News, Gallery, or Data Table) that come with a pre-defined content layout, the Collection control offers the unique ability to design custom layouts and styles for each element within each item.
Scenarios for Using Collection Control
The Collection control can be used in a variety of scenarios to enhance data presentation and user interaction. Here are a few examples:
Projects Display: Present a collection of projects with detailed information, status updates, and custom actions.
Business Opportunities: Showcase a list of potential business opportunities with tailored layouts reflecting the importance, status, or category.
Ticketing Systems: Create a custom ticket display system, allowing for easy understanding and interaction with various support or service requests.
Content Libraries: Display articles, documents, or other content in a uniquely styled and organized manner, enhancing readability and engagement.
Add a Collection control
To create a collection, select the collection control from the controls panel.
Connect Collection to Data Source
With the Collection control selected, go to the settings panel and navigate to Content > Data block.
Select the Application: In the Application section, choose the application you are working with (usually the current application by default).
Choose Data Source: Proceed to the Data Source section and pick a data source from the selected application.
Data Filters
The data filters feature is composed of Query Conditions, Full Text Search, and the Sorting Filter. Below is a detailed explanation:
Query Conditions
Query conditions are used to set the rules for filtering data. These are configured through the following three parts:
First Dropdown (Field Selection)
Used to select the field to be filtered, such as "Child" or other available fields.Second Dropdown (Condition Selection)
Defines the filtering condition for the field, such as "Equals," "Not Equals," "Contains," etc.Third Input Field (Value Setting)
Used to input the specific filter value or set dynamic variables or formulas through the expression editor on the right.
Click the "Add Condition" button to create a new filter condition.
To set multiple condition groups, click "Add Condition Group" to combine conditions logically (e.g., AND or OR).
Full Text Search
The full text search feature allows precise keyword searches within specified fields. The detailed steps are as follows:
Select Field (Left Dropdown)
Click the dropdown on the left to choose the target field for the search (e.g., "Title" or "Description").
The system will perform keyword searches within the selected field.Set Match Value (Right Expression Editor)
The input field on the right allows you to directly input keywords or open the expression editor using the button on the right.
The expression editor supports dynamic variables, formulas, and other configurations to meet complex search requirements.Match Condition (Contains)
The default matching logic is "Contains," meaning the field content must include the specified keyword.
Users can adjust the matching logic (e.g., "Does Not Contain" or "Equals") based on their needs, if supported by the system.Add More Conditions (Add Condition Button)
Click the "Add Condition" button to add new search conditions.
Multi-field combined searches are supported, and each condition can be configured with individual fields and match values.
Sorting Filter
The Sorting Filter is used to sort and display data. By selecting the variable associated with the Sorting Filter in the input field, you can set sorting rules. Detailed sorting configurations can be made by clicking on the Sorting Filter control. For further details, refer to the Sorting Filter control settings.
Set Data Order: Determine the Primary and Secondary order to properly sort your data, ensuring it's displayed in the desired sequence.
Note:
There are 4 types of Component that can be used as a Data Source to connect to a Collection, including Data List, Document Library, Form Report and Data Report.
Appearance of Collection
Layout
Select the layout used to display collection items.
Card View
Card view displays each collection item as a card. It is used on mobile devices when the Responsive layout is selected.
Use Card content settings to customize the layout and style of each record card. You can add controls to a card and connect them to fields from the selected data source.
Table View
Table view displays collection records in rows and columns. Use it when users need to compare multiple records or quickly scan structured information.
Table Columns
Use Table columns to define the fields and content displayed in the table.
Select Add column to add a column. You can remove columns or drag them to change their order.
For each column, configure the following settings:
Title: Set the heading displayed at the top of the column.
Column width: Set the width of the column.
Icon: Choose whether an icon is displayed in the column heading.
Enable sorting: Allow users to sort records by this column.
Content: Configure the content displayed in the cells of the column.
Style: Configure the appearance of the column and its content.
Use the design area to add controls to a table cell. Controls added to a column are used to display the corresponding content for records in that column. Connect controls to data fields by using the Expression Editor.
Table Header
Use the Table Header settings to customize the appearance of the table heading row. You can configure available style settings such as text, background, borders, spacing, and alignment.
Table Content
Use the Table Content settings to customize the appearance of table rows and cells. You can configure available style settings such as text, background, borders, spacing, and hover effects.
Responsive
Displays the Table view on computers and the Card view on mobile devices by default.
This layout helps users review detailed information in a table on larger screens while keeping records easy to read and use on smaller screens.
Card View
Card view displays each collection item as a card. It is used on mobile devices when the Responsive layout is selected.
Use Card content settings to customize the layout and style of each record card. You can add controls to a card and connect them to fields from the selected data source.
Columns: Set the number of columns of the Collection. By default, the columns number is set to 3.
Link: select the detail page of each block in this collection. Detail pages are the forms created in the data list. Select Default Layout will show the default view page you set in the data list. If you've created other custom list forms, those forms will show after the default layout (Like, the new form, view form, and edit form are customize list forms in the following example). Select Custom URL will allow you to create a dynamic URL.
Different Data source would have different options of detailed page:
Data list: Default layout, Custome list forms, Custome URL and None
Form report and Document library: Default layout, Custome URL and None
Data report: Custome URL and None
Note:
Buttons in Collection also have different options of Execute types:
Data listand Document library: can link to the View page, Edit page of the Collction Item or Delete the Collection Item derectly.
Form report Can only link to the View page of the Collection Item.
Data report: cannot link to the Collection Item.
Hide if value is empty: If there are no records in this News control, this control will not show on the page.
Fallback: Use the Fallback field to set default content to be used in case the control has no content or does not exist.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
How to use Collection
After connecting a data source, configure the Collection in the designer.
Configure Table View
On computers, the Collection is displayed as a table.
Add columns in Appearance > Table view > Table columns.
Configure the title, width, icon, sorting, content, and style for each column.
Add controls to table cells to define the content shown for each record.
Use the Expression Editor to connect controls to fields in the selected data source.
Open Preview to review real record data, table columns, and sorting behavior.
Configure Card View
On mobile devices, the Collection is displayed as cards.
Select a card in the design area.
Drag controls into the card to create its content layout.
Connect controls to data fields through the Expression Editor.
Customize card content and styles in the settings panel.
Open Preview and check the mobile layout to confirm that the content is easy to read.
When a control is added to one table cell or card, the same layout is applied to the corresponding collection items. When the control is connected to a data field, each record displays its own field value.
Note：
Advanced controls, such as News and Gallery, can be added to a Collection. However, controls at the same hierarchy level cannot be nested inside each other or inside themselves in a Collection.
Pagination Settings
Start at: Start displaying from which data record.
Limit Records: Turn this ON if you just want to display certain items in this control. By default, this option is OFF, which means all records of the selected data source will be displayed in this News control. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.
If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section. Turn View more records ON will display a hyperlink at the bottom of this News control. You can change the text in the text box of Customize text. Assign any link or variables to the View more records text with the setting of Link. Set the Alignment that this view more link with the settings of Align.
Collection actions
Collection Actions provide users with a range of tools to manage and interact with items within a collection efficiently. These actions allow users to view, modify, delete, or trigger automated processes for individual items or groups of items, simplifying data management and streamlining workflows.
You can click to '+New action' to add collection actions. Below are descriptions of the key actions available:
View Item: This action allows users to open and inspect the details of a specific item in the collection. It provides a read-only view, enabling users to check the item's information without making changes.
Edit Item: This action enables users to modify the data of a specific item in the collection. It provides an editing interface where users can update the fields of the item and save the changes.
Delete Item: This action allows users to permanently remove a specific item from the collection. Once deleted, the item will no longer appear in the collection or be accessible.
Update Fields: This action enables users to modify specific fields for one or more items in the collection. It allows for bulk updates, making it easy to apply changes to multiple records at once without manually editing each item.
Trigger List Workflow: This action initiates a pre-configured workflow for a selected item or group of items. The workflow can automate tasks such as notifications, approvals, or other custom processes based on the collection's settings.
If you need to repeat the above action, just click the 'Paste action' button.
The Collection Actions enhance the functionality and usability of collections by enabling effective item management.
Layout Settings
Columns Gap: Control the amount of space between each column.
Rows Gap: Control the amount of space between each row.
Align Items: Control how the contained items will align on their center axis, depending on the direction chosen in the Direction field.
Justify Content: Control how the contained items will align on their center axis, depending on the direction chosen in the Direction field. It also helps distribute the space leftover in the collection between the items.
Align content: Aligns content horizontally within collection.
Justify content: Distributes content evenly along the main axis within collection.
Content padding: Set the Padding of the Collection content.
Normal / Hover: Set different styles for normal state and hover state of the Collection content. Styles below are supported to be set separately for Normal and Hover state.
Color: Choose the color of the file name.
Background Color: Set background color of the file container. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Add a shadow and blur to each Collection item.
Advanced Settings
Set the Advanced options that are applicable to this control.