# Classes List Screen

The Class List Screen is used to display all the classes within a specific category. This screen is found when a user clicks on a Category Item on the Category List Screen. The Class List Screen is made up of several components including the side navigation component, a shape component, a breadcrumbs group, text components, a list component.

## The Components

### **Side Navigation**

The side navigation should appear on each screen you intend for the user to navigate. This is important to help the user find the information they are looking for. In this feature template, on this screen, you will notice that nothing is highlighted (in comparison to the side navigation component on the ‘Category List’ screen). When a user lands on this screen, they are no longer navigating through the side nav.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FGpBH7JHKRClcuKgWqxvX%2Fclasseslistsidenav.png?alt=media&#x26;token=679a8a84-473e-42ad-b058-d31b59ae3ddc" alt="" width="196"><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

### **Shape Component — Back Button**

This component acts as a button to help a user navigate back to the previous page that they came from.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FTaEilj2ZRoOHAOaseQuU%2Fclasseslistbackbutton.png?alt=media&#x26;token=4502cd5c-8d5a-4bf7-b1d3-6e7e33895705" alt="" width="126"><figcaption></figcaption></figure>

⚡ **Shape Actions**

This shape contains a Link Action to go ‘Back.’

### **Group — Breadcrumbs**

A group is made up of several components that operate as one unit. This group, in particular, contains a couple Icon components and Text Components. Nothing is connected to the database via Magic Text, so any changes made in the database will not impact this group.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FddVbhAc7CGtqwYfqzeNn%2Fclasseslistbreadcrumb.png?alt=media&#x26;token=6bcc7c28-1fcc-4cc4-9c01-02182b35c784" alt=""><figcaption></figcaption></figure>

The highlighted green area denotes the screen the user is on, while the light gray text shows the users that there are more actions they can do.

⚡ **Breadcrumb Actions**

The text “All Clinics” contains a Link Action to go to the ‘Category List’ Screen.

### Text Components — 2 Components

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FHvwlzTiWHx9h7LSkc74B%2Fclasseslisttextcomponents.png?alt=media&#x26;token=ddc95ed0-d598-4dc0-8d02-38eb03915bff" alt="" width="335"><figcaption></figcaption></figure>

Each component is connected to the database to display the ‘Name’ from the ‘Current Category’ and the ‘Long Description’ from the ‘Current Category.’ This is known as Magic Text.

When a user selects a Category from the ‘Category List’ Screen, Adalo defines this as the ‘Current Category,’ which then can be selected through Magic Text to display information related to that selected category.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F0lTpIduLvSQXv8Rwpgtz%2Fclasseslistmagictext.png?alt=media&#x26;token=14d8fee3-5ae4-4cc1-b9d8-dd962f075d45" alt="" width="353"><figcaption></figcaption></figure>

### List Component — Desktop & Tablet List and Mobile List

The list component is connected to the database and displays information from the Classes Collection.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FwxGZgmoaU0kV9urxUQ3n%2Fclasseslistlist.png?alt=media&#x26;token=0554e15d-0418-4976-80c4-5194a088a172" alt="" width="375"><figcaption></figcaption></figure>

This list is unique because it contains a filter. The filter ensures that only Classes from the selected Category are displayed and that each Class is available.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F9Scmi5mOBIYi3zNqhWyg%2Fclasseslistfilter.png?alt=media&#x26;token=3da81cb5-be60-4f93-b026-9ac10b132b49" alt="" width="354"><figcaption></figcaption></figure>

Without this filter, all classes in the collection would display regardless of their availability or category.

⚡ **List Actions**

On the “SEE DETAILS” button within the list card, there is a Link Action to the ‘Class Details’ screen.

{% hint style="warning" %}
When switching to the Mobile View, there is an additional list component named “Mobile List” where the layout changes from 2 columns to 1 column. All other functionality remains the same.

If you make changes to one version of the list & want those changes to be reflected in the other view, you must change both versions.
{% endhint %}