> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/feature-templates/browse-purchase-and-manage-classes/class-details-screen.md).

# Class Details Screen

The Class Details Screen in the Browse, Purchase, and Manage Classes feature template displays all the necessary information for a user to make a purchase.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FiPR1opxLHHf2V86UzL0U%2Fclassdetails.png?alt=media&amp;token=3296a8fc-c999-4888-91a6-7f878e9fd9cd" alt="" width="371"><figcaption></figcaption></figure>

The Class Details Screen displays all the information about a selected class within a category. This page has several components that pull information from the database through Magic Text. Any properties within the Class Collection that do not contain information will not display correctly on this screen.

Several components work in the same way as components discussed on the ‘Category List’ and ‘Classes List’ Screen documents, so we’ll talk about new components below.

## The Components

### **Button Component — Rectangle 38**

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FRgf2TyNb4U4n7jcd9pWV%2Fpurchasebutton.png?alt=media&amp;token=4b81ca5c-590f-4b8a-9c30-69a7072f9baa" alt="" width="302"><figcaption></figcaption></figure>

The rectangle component acts like a button on this screen. It contains visibility rules that control whether or not the rectangle appears. In this case, the button is visible when the Current Class > Available Spots Remaining is greater than 0. In other words, if there are spots available in the class, the button will show.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FFlK0h9UIsiWP4TViIlD9%2Fvisibility.png?alt=media&amp;token=f30de30c-326f-424f-9f1e-44b35dbc9d42" alt="" width="357"><figcaption></figcaption></figure>

⚡ **Button Actions**

The button contains a Link Action to go to the ‘Purchase’ Screen.

### Map Component

The Map Component is found in the Component Marketplace or it will appear in the “Installed in Team” section of the Components Left Panel.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FReKATdoQXWgLlAtDsHt5%2Flocation.png?alt=media&amp;token=b47d9485-27b2-434e-997f-3c8f76a5da28" alt="" width="563"><figcaption></figcaption></figure>

This component requires a [Google Maps API Key](https://help.adalo.com/component-basics/marketplace-components/maps?_gl=1*x54t8i*_ga*MTExMTM3MTY4NC4xNTg1NTk0NDU1*_ga_SWT45DV35L*MTY5MzQyNDMwNS44Ni4wLjE2OTM0MjQzMDUuNjAuMC4w#1-setup-your-google-api-key) and displays the location of the class. There are several customizations that can be made to your Google Map Component.

The location shown on the map will be based on the Location property in the Classes Collection.

{% hint style="info" %}
You will need a Google Maps API Key to utilize the Map Component
{% endhint %}

### Conditional Visibility Elements

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FUGYmqafgva1qUiUG5nR4%2Fconditional.png?alt=media&amp;token=7b14ee35-6293-4450-b476-fdfd3765b0a1" alt="" width="375"><figcaption></figcaption></figure>

For your user, only one of the elements will show — not both. Which element is displayed is tied to visibility rules on whether or not there are spots available from the property ‘Available Spots Remaining.’

{% hint style="info" %}
While it may look like one of the groups will appear in the wrong spot — when visibility rules are used, the component that disappears will move to fill in the area the formally visible group occupies.
{% endhint %}

For the grayed out element, the visibility rules look as follows:

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F5gmOMwb0jmhFtj7SEasd%2Fmorevisibility.png?alt=media&amp;token=cc3233f2-2a70-47b5-bf75-ec36e7af031d" alt="" width="354"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.adalo.com/feature-templates/browse-purchase-and-manage-classes/class-details-screen.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
