Category List Screen

The Category List screen begins the Browse, Purchase, and Manage Classes feature template with a list of categories for easy navigation and browsing.

The Category List Screen is a page that is dedicated to displaying the high level categories that your offering is divided into. This screen is made up of several components including a side navigation component, image component, text components, list component, and a button component.

The Components

The side navigation should appear on each screen you intend for the user to navigate. This is important to help users find the information they are looking for. In this feature template, on this screen, you will notice the “Clinics” Menu Item is highlighted. This is to denote where, in the app, the user is.

The Navigation is plan text that can be updated in the side panel within the Adalo Builder. In this case, the ‘Clinics’ Menu Item is Menu Item 2 and the settings look as follows:

None of the Menu Items utilize Magic Text and therefore are not referencing the database, however, the “Profile Section” does reference the database.

If you change something on one screen in the side navigation component, you must change all instances of the side navigation on the other screens. You can do this using CMD + C (copy) and CMD + V (paste) on a Mac.

Image Component — Main Image

This image component is not connected to the database and can be changed within the Adalo builder.

Changing any of the settings for this component will not alter the functionality of your app.

Text Component(s) — 2 Components

These text component is not connected to the database and can be edited and styles can be changed without directly impacting the functionality of the app.

List — Categories List

This component is controlled by the database. In other words, this list displays information that is found within Collections — specifically, the Categories Collection.

This list displays the following properties from the Category Collection:

• Name

• Short Description

It also displays a ‘Count’ of the number of classes associated with the Category through the property “Classes”.

⚡ List Actions

The list contains a Link Action to the ‘Classes List’ Screen.

Button Component — Admin Portal Button

This button component is only displayed to those users who have the value TRUE in the property “Is Admin?” in the Users Collection. This is done through visibility settings.

In the setup tab, anything can be changed without changing the functionality of the button.

⚡ Button Actions

The button contains a Link Action to the ‘Admin Manage Clinics’ Screen.