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 query: Select the method for searching data.
From data source: Performs precise searches.
In the Data Filters section, click the condition button to filter the data from the selected data list.
From search engine: Conducts full-text searches.
In the Data query section, enables the configuration of full-text search fields associated with another precise search.
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.
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.