Overview — Screens, Database, Layout Settings, Use Cases
The perfect template to manage and sell one-time services or experiences. Featuring an admin interface for class addition, user-friendly checkout, and comprehensive browsing of purchasing choices.
The Browse, Purchase, and Manage Classes Feature Template is the perfect addition to your app if you’re looking for a way to sell a product, service, or experience. Each screen is designed for an optimal user experience to not only make the purchase of your product or service easy, but also the management and creation of those purchases.
Screens Overview
📚 Instructions Screen
Quickly get an overview of the template with tips, a help doc, and associated templates that may interest you. This screen may be deleted at any time.
User Screens
These screens will be interacted with by the customers or clients of your app.
Each screen in the “User Screen” section comprises a variation of text and image components, which are controlled in the Builder, while other components are dynamic and displayed by the information found in the database.
Here is an overview of the user screens available in the Browse, Purchase, and Manage Class Template:
📝 Category List Screen
This screen contains an image, title, description, and list of categories that your goods or services may be divided into.
📔 Classes List Screen
Dive into classes offered within a category. This screen has a customizable breadcrumb navigation for your users & a custom list.
🔎 Class Details Screen
View all information related to your class on the Class Details Screen. From location, time, and availability to price, images, and more — this screen holds it all!
💰Purchase Screen
Set up your Stripe account to seamlessly manage the purchase process for your end users.
✅ Congrats Screen
Inform your users when they have successfully made a purchase.
Admin Screens
Admin Screens are accessible to users who can view and interact with those screens.
Each screen in the “Admin Screen” section is made up of a variation of text and image components which are controlled in the Builder, while other components are controlled by the information found in the database.
Here is an overview of the admin screens available in the Browse, Purchase, and Manage Class Template:
👩🏾💻 Admin Manage Clinics Screen
Review available clinics or classes offered from this screen with options to add, edit, or delete each offering.
🏦 Admin Transactions Screen
Review and monitor all transactions in a dashboard view with the associated data table.
⚒️ Admin Create Clinic Screen
Add a clinic to the roster or class offerings. This is where an Admin will create new classes to offer in the app.
🔄 Admin Edit Clinic Screen
Update an existing clinic or class through the Admin Edit Clinic Screen.
Database
The Browse, Purchase, and Manage Classes Feature Template comes with a database that contains sample data. Each Adalo database contains Collections, each with the associated Properties. Any necessary relationship between the collections is set up, as well.
Important Note About the Database:
If you delete a Collection or Property from the Feature Template, this could impact the functionality of your app.
If you add a Collection or Property to your Feature Template, this will not impact the functionality of your app.
Below is an outline of the included Collections and their Properties. The Collection name is bolded and includes a description. The Properties include their name, property type (in brackets), and a description.
Basic Collections & Properties:
👥 Users
The Users Collection automatically comes with every Adalo app. This collection will hold all the information related to anyone who uses the app. This information is initially collected from users when they sign up to use your app.
Email [Text] — The user’s email address. Created upon sign-up.
Password [Encrypted Text] — The user’s password. Created upon sign-up.
Username [Text] — The user’s username. Created upon sign-up.
Full Name [Text] — The user’s name. Created upon sign-up.
Transactions [Many-to-One Relationship] — A relational field between users & their transactions. Each user can have many transactions; however, a unique transaction can only belong to one user.
Profile Photo [Image] — An image of the user. Created upon sign-up.
Admin? [True / False] — A property to recognize the user's permissions. If the user is meant to be an Admin, this property should be set to true and is denoted with a checkmark in the interface.
🧑🏾🏫 Classes
The Classes Collection holds information related to the classes you offer. This information can be added through the Adalo interface (manually or via .csv upload) or from the “Admin Create Clinic” or “Admin Edit Clinic” screens.
Name [Text] — The title of the class. This is how you externally refer to the class.
Primary Image [Image] — An image you want to display for the class.
Category [Many-to-One Relationship] — The category/categories a class belongs to. This is a relational property where many classes can belong to one category; however, each class can only have one category.
Short Description [Text] — A brief description of the class. Typically, one sentence.
Long Description [Text] — A longer, more in-depth class description. Include all pertinent details.
Starting Time [Date & Time] — The day and time the class begins.
Ending Time [Date & Time] — The day and time the class ends.
Total Time [Number] — The number of hours each individual class lasts.
Location [Text] — Where the class will take place.
Price [Number] — The cost of the class.
Total Possible Spots [Number] — The number of people who can register for the class.
Available Spots Remaining [Number] — The total spots remaining for registering for the class. To begin, this number should match the ‘Total Possible Spots’ value.
Transactions [Many-to-One Relationship] — These are the transactions tied to the class. This is a relational field where many transactions belong to one class, and each transaction is unique that class.
Publicly Available? [True / False] — A property to recognize if the class should be visible to customers. If the class should be visible, then this property should be set to TRUE; if it should not be available, the property should be set to FALSE.
💰 Transactions
The Transactions Collection holds information regarding any purchases made. This information is created once a user completes the process on the “Purchase” Screen.
Name [Text] — The name given to the transaction. Upon first download of the template, the name is populated in the following format: Full Name of the User — Name of the Class
Status [Text] — The outcome of the transaction.
Purchased Class [One-to-Many Relationship] — A relational field to display which class was purchased where one transaction purchases one class; however, one class can have many transactions.
Purchased by User [One-to-Many Relationship] — A relational field to display which user purchased a class where one user purchases one class; however, one class has several users.
Cost [Number] — The price of the class.
📚 Categories
The Categories Collection holds information about each category that classes belong to. This information can be added in the Adalo interface (manually or via .csv upload).
Name [Text] — The name of the category.
Short Description [Text] — A brief description of the category. Typically, one sentence in length.
Long Description [Text] — A longer description of the category, which includes all relevant details to the users.
Classes [One-to-Many Relationship] — A relational field where one category can belong to several classes; however, a single class can only have one category.
Layout Settings
Each screen in the Browse, Purchase, and Manage Feature Template is created using a responsive design. The screens will look good on any device or tablet.
Most screens have been designed with Custom Layouts. If you add a new component to a screen, you might notice that the other screen sizes are impacted.
Layout Overview:
To view or edit the layout for different screen sizes — click the Screen title to reveal the dropdown.
The default view for this template is Desktop. When you change the screen size for one screen in the Builder, it does not change the screen size of the rest of the screens on the canvas.
Hidden Components
In each view, there may be components that do not appear on Desktop, but are visible on Mobile. These are grayed out in the lefthand panel & denoted with an icon.
Another way to view which device components are visible is the Layout Tab here:
Custom Layout
Some components come with custom layouts based on screen size. To view those settings, check the Layout Tab & scroll to the Custom Layout Settings.
Example Use Cases
With minor adjustments to the collection names, property names, and the graphics used — this template can be used in many other ways, including but not limited to:
A fitness instructor who sells individual classes or personal training sessions.
A pickleball club that sells clinics to a wide range of skill-levels.
A life coach who sells digital trainings across various categories.
An art instructor who offers several in-person bootcamps.
Last updated
