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
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
Once you connect a Data Source with a Collection, the list will display all the collection items in the collection as empty blocks.
Grid of Blank Cells: Once the data source is chosen, you'll see a grid with 12 blank cells, each representing a container for an item from the selected data source.
Design Model: Understand that the Collection control will display these 12 cells in the design model as a fixed representation. This helps you visualize how your design will look.
Preview the Real Data: To see the actual data in the Collection, switch to the preview model by clicking the "Preview" button located at the bottom of the left controls panel. This allows you to see how your data will look live.
Add Controls to Cells: To customize each cell, open the controls panel and drag controls into any cell. When a control is added to one cell, it will automatically be replicated across all cells in the Collection. This ensures consistency in design across all items.
When one control (such as Text, Container, Picture, etc.) is added to one of the collection blocks, it will automatically replicate in every other collection block. You can insert static content in each collection blocks simultaneously.
When one control in the collection block is connected with the data source, the default content of the control in collection blocks will be replaced by the corresponding content of the data source. For example, you can configure the Text control in collection with the Expression Editor. Then the corresponding data (Company name) would be added into each collection blocks automatically.
Note：
Multiple advanced controls, such as News and Galleries, can be added in Collection. However, these controls at the same hierarchy level are not allowed to be nested within each other or within itself 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.