How to Create a Class Catalog & Enrollments App

In this guide, we will outline the step-by-step process of creating a class catalog and enrollment app in Knack.

The aim of this article is to demonstrate the process of creating a quick, straightforward, yet practical app using Knack. Our Class Catalog and Enrollments sample app is utilized in this article to outline the necessary steps for this specific use case.

Feel free to follow along with the steps below by building an app from scratch, or install the Class Catalog and Enrollments app to view & learn how this app can be built. 

Steps:

• Create Your Tables

• Enable Users

• Add Connections Between Tables

• Add Additional Fields

• Import Data into Your Tables

• Build Your Live App Pages

• Test Out Your Workflow in the Live App

• Optional: Live App Design

---

 

1.  Create Your Tables

First, we will want to create our tables to store our data in. The three tables we will start off with are: Classes, Enrollments, and Semesters:

 

2.  Enable Users

Next, we will need to enable users for our instructors and students to allow them to login to the Live App:

 

 

3.  Add Connections Between Tables

We will now want to establish connections between the tables by heading to the Fields tab. We'll create the following connections:

In the Classes table, connect to:

• Semesters

• Instructors

In the Enrollments table, connect to:

• Semesters

• Classes

• Students

ℹ️ For the above connection fields, we will want them all to be one-to-many connection types, which is the default connection type that will automatically be selected. This setup ensures that multiple classes can be linked to a single semester and instructor, while numerous enrollments can be connected to one semester, class, or student.

 

4.  Add Additional Fields 

To complete the setup of our tables, we must include additional fields in the Classes, Enrollments, and Semesters tables to store all the necessary data for this specific workflow.

We'll include the following fields in the respective tables:

• Classes table:

  • Paragraph Text field named "Course Description"

  • Number field named "Capacity"

  • Count field named "Number of Enrolled Students"

    • Connection to count: Enrollments (Class)

  • Equation field named "Remaining Spaces" 

    • Equation Type: Numeric 

    • Equation Editor: {Capacity} - {Number of Enrolled Students} 

    • Leave the default settings for the remaining options.

  • Date/Time field named "Class Start Date"

    • Leave the default settings for the remaining options.

• Enrollments table:

  • Text Formula field named "Student - Class"

    • Equation Editor: {Enrollment Student.Name} - {Enrollment Class.Class Name}

• Semesters table:

  • Short Text (default field added upon table creation) 

    • Rename field to "Academic Year" 

  • Multiple Choice field named "Semester"

    • Options: Fall and Spring 

    • Leave the default settings for the remaining options.

  • Text Formula field named "Semester - Date"

    • Equation Editor: {Semester} - {Academic Year}

 

5.  Import Data into Your Tables

You can always build your apps by importing your own data to create your tables right from the start, but for the purpose of this app walk-through, feel free to import your own data, export the data from the sample app, or simply use the data that is already available to use when installing the Class Catalog and Enrollments app.

 

6.  Build Your Live App Pages

When heading to the Pages section of the Builder, you will find that there is already a default "Home" page and a default "Account Settings" user page. When enabling users with any app creation, these two default pages will exist. 

The Pages section of the Builder is where Live App pages are created for your users to navigate through when they visit your app. To create a logical Live App workflow for this particular use case, we'll follow the steps outlined below:

• For the first step, we will rename the default "Home" page to "Class Directory".

  • On this page, we will add a search view that allows users to search through the available classes offered. To allow users to view the details of each class offered, we'll also add an action link in the search view's settings to enable users to view the records' details:

• On the "Class Details" child page, a menu view will be added for students to easily register for the class. This will direct them to a login page exclusively for student access. Once logged in, students can select the "Enroll me" button from a form view to confirm their enrollment to the class.

  See the full walkthrough of these steps in the video below:

   

• Next, we'll add a login page for the students to see their classes that they are actively enrolled in and also, we'll rename the child page that is automatically created after adding a login page:

• In the "My Classes" child page created in the above step, we will now create a grid view to showcase the logged-in student's enrolled classes and allow them to view their enrollment details with an action link:

• Finally, it is essential to set up a login page for our instructors. A menu view will be added with a link to a child page where they can add class records. Additionally, a grid view of the logged-in instructor's classes will be included, along with action links in the grid view to guide users to child pages for viewing and editing class details.

 

7.  Test Out Your Workflow in the Live App

It is best practice to test the Live App after building our your pages to ensure that the workflow aligns with the intended user interaction with the data.

You can select the button for "Go to Live App" and login to test out and confirm what each user role type (Students & Instructors) have access to. In the example below, a student logs in to view their currently enrolled classes and to enroll in additional classes:

Optional: Live App Design

Many Knack builders opt for customizing their Live App to tailor the appearance, thus enriching the overall user experience. To do this, you can take advantage of our Live App Design options which can be found in the Builder by selecting App Settings > Live App Design.

You also have the option to customize your views individually instead of customizing a view type globally. You can learn more about customizing views here and learn about other app customization options here.

 

---