Collection page

A collection page is a screen in an app that displays a selection of items or content. You can find these pages in apps like online stores, news apps, and social media networks. The goal of a collection page is to give users a neat and visually pleasing way to see and use a specific group 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 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, informing them of important events or updates.

Designing the page

Collection Layout

When designing a collection page for a mobile app, it's important to arrange the elements in an organized and visually appealing manner. To achieve this, you should consider choosing between a grid or list view, designing the card items with well-organized information, and working on buttons and actions related to each item. This will help ensure a well-practiced layout that displays a list of items or content in an easy-to-understand way.

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:

pageCollection 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. It allows users to specify their search criteria, ensuring the results are tailored to their needs.

Integrating a search bar into your app following this 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

On the Collection page, there are two ways to search for items: by using the "Matching column" search and by scanning the "Barcode column."

To use the "Matching column" search, first select a column to use as the search criteria. You can choose one or several columns. Then, when a user enters a search term, the app will search for matches in the selected columns. Any item that contains the search term in any of the selected columns will be displayed on the Collection page.

Modifying the matching matching criteria for the search engine

Regarding the search function using the "Barcode column," you need to select a specific column for this setting. When a user scans an item's barcode using the app, the system cross-references the matching data from the selected column. If it finds a match, it will quickly direct the user to the item's detail page for more information. This process ensures that the user can easily retrieve the information they need regarding the scanned item.

Enabling the scanning barcode to search by choosing a column as the matching criteria

Filtering

Filtering allows users to access relevant information swiftly and efficiently by selectively displaying items based on specific criteria. Starion offers two primary types of filtering: pre-filtering and user filtering.

As an app developer, pre-filtering empowers you to curate which items will be visible on the collection page. This step allows you to set the stage for a tailored user experience by ensuring users can easily view and interact with relevant content.

To execute pre-filtering, follow these steps:

• Navigate to the "Filtering" section on the left sidebar.

• Set 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

By implementing user filtering, a filtering button is added to the top right corner of the Collection page, making it easily accessible to users. This feature enables your app's users to customize their experience by applying their preferred settings to browse through different items. It gives them the power to filter out content based on their interests and needs, thus making it easier for them to find what they are looking for.

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 interacting 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, a button to filter for the user sorting is also 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 preferences. This empowers them to tailor their interaction with the collection page, enhancing their ability to navigate the content.

Item action

When you define item actions, you set specific responses for users interacting with particular items. This customization can greatly enhance user engagement, providing them 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 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 various 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:

pageItem action