Comment on page
Collection page

A collection page is a user interface element within an application that serves as a dedicated screen designed to showcase a curated selection of items or content. These pages are commonly found in various types of applications, including e-commerce platforms, news apps, social media networks, and more. The primary purpose of a collection page is to provide users with an organized and visually appealing way to browse and interact with a specific set of items or information.
Adding a new page
To add a collection page to your app:
1.Click + button 
2.Choose Collection page
3.Choose a data table to link with your collection page
Fine-tuning your collection page's specifications ensures it aligns perfectly with your app's goals and branding. Here are the key settings to configure: 
1.Assign a name to the collection page for easy management in the App Editor
2.Title and Icon: Define the title and icon of the page when it appears on the app's bottom menu bar, offering users quick navigation and recognition collection
3.Show item from: Specify the data table for the collection page. You can edit the data table linked with your collection page by changing the option here.
4.These settings determine whether users can interact with the data source directly from the collection page. Enabling those will enable the corresponding buttons:
1.Allows create a new row -> a plus (+) button is added 
2.Allows update rows -> an "Edit" button is added as an item action
3.Allows delete rows -> a "Delete" button is added as an item action
5.Hidden: Specify whether to hide the page or not from the bottom menu bar.
6.Badge: Configure the badge number to provide users with instant updates or notifications within the app's menu bar, keeping them informed of important events or updates.
Designing the page
Collection Layout
Designing the layout of a collection page in a mobile native app involves arranging elements to display a list of items or content in an organized and visually appealing manner. There are things to consider for a well-practiced layout of a collection page such as choosing a grid or list view, designing the card items with information organized well, and working on buttons and actions related to each item. 
For your easy start, Starion offers four different layout options, and each of them is designed to be the ideal size and placeholder for every element within the layout. 
Wide range of layout for the collection page
After choosing one layout, you will go to the settings below and configure properties, organizing the item data within each item card. Explore the detailed instructions on each layout here:
Collection layout
Search bar
The search bar is a crucial component in any collection page that helps users find the items they are looking for quickly and efficiently. The search bar allows users to specify their search criteria, ensuring the results are tailored to their needs. 
Integrating a search bar into your Starion app is a straightforward process:
Access the "Search Bar" section on the left sidebar of the design interface
On the left sidebar, toggle the switch to enable the availability of the search bar on the collection page.
Enabling the search to adding the search button on the collection page
The search bar of the Collection page supports two ways of searching: by searching through the "Matching column" and by scanning the "Barcode column".
For the search with the "Matching column", you choose a column to add as the matching criteria for the search engine. You can add one or several columns. When a user inputs a search term, the app will look for matches in the chosen columns. The corresponding item will be displayed on the collection page if any data field contains the search term.
Modifying the matching matching criteria for the search engine
About the search with the "Barcode column", you choose one column for this setting. When a user scans the item's barcode, the app cross-references the matching column's data, finds the one exactly the same as the one it contains for the same data field, and instantly directs them to the item's detail page for further information.
Enabling the scanning barcode to search by choosing a column as the matching criteria
Filtering
Filtering enables the selective display of items based on specific criteria, allowing users to access relevant information swiftly and efficiently. In Starion, you have the capability to implement two primary types of filtering: pre-filtering and user filtering.
Pre-filtering empowers you, as the app developer, to curate which items will be visible on the collection page, ensuring that users can easily view and interact with them. This step allows you to set the stage for a tailored user experience.
To execute pre-filtering, follow these steps:
Navigate to the "Filtering" section on the left sidebar
Set up the specific criteria that dictate which items will be displayed based on your app's objectives and user preferences.
By incorporating pre-filtering, you take control of the initial presentation of items, ensuring that users encounter content that is most relevant and valuable to them.
Pre-filtering to prepare a clean data base for your users to interact with 
As a result of implementing user filtering, a filtering button becomes readily accessible to users, at the top right corner of the Collection page. 
User filtering allows your app's users to further personalize their experience by applying their preferred settings to navigate through various items. This empowers them to filter through content based on their specific interests and needs.
Sorting
Sorting is the ability to arrange items based on specific conditions for the preference. In Starion, incorporating a sorting feature involves two main types: pre-sorting and user sorting.
Pre-sorting allows you to establish the default view of your collection page, ensuring that it aligns perfectly with your app's intended purpose. This initial organization of items provides users with a starting point for their interaction with the content.
To implement pre-sorting, follow these steps:
Access the section "Sorting" on the left sidebar. 
Toggle the button and start your pre-sorting work
As a result, also, a button to filter for the user sorting is added on the top right corner of the collection page. 
User sorting takes the sorting experience a step further by enabling your app's users to modify their views based on their individual preferences. This empowers them to tailor their interaction with the collection page, enhancing their ability to navigate through the content.
Item action
When you define item actions, you're setting specific responses for when users interact with particular items. This customization can greatly enhance user engagement, providing them with a tailored and seamless experience.
To add an item action:
Access the left sidebar and find the section “Item Actions”
Click the plus (+) button on the section
Choose from the available action types based on your app's requirements and objectives. 
The defined item action will be applied to all items accessible on the collection page. The method through which users can access and engage with the item action is tailored to each type of layout. This can include swiping the items or tapping on a 3-dot menu button.
In Starion, we provide a diverse range of actions for various interactions, encompassing both in-app functions and external actions like opening a website or triggering a service request. To delve into the complete array of item actions along with detailed configuration settings, refer to our comprehensive guides here:
Item action
​