Create Custom Class Listing Tables in 4 Steps

Share

If  scripting is available in your website editor, you can use the following "JS (Javascript) Method" to work with your Class Listings Tables.

Step 1: Enrollment forms are ready to use:

Ensure your Registration Form is completely set up and ready to use, so that new customers can register and enroll into classes via the tables.  See the Online Registration Form sections.  Ensure your Parent Portal is completely set up and ready to use, so that existing customers can enroll via the tables. See the Parent Portal section. (you may skip this step only if you are prohibiting all online enrollments).

Step 2: Classes are ready:

Ensure the following:

• Classes that you want shown in the table have 'Display on Website' set to YES (near the bottom of their Class Summary tab)
• If you also want them available for online enrollment, they should also have 'Allow Web Registration' and/or 'Allow Portal Enrollment' set to YES (near the bottom of their Class Summary tab).
• If you want to allow enrollment from the tables, set 'Show "Register" Links' to YES (Gear icon > Settings > Online Registration > Settings > Class Listings Tables on your Website section)
• If you want Full classes shown, set 'Show Full Classes' to YES (Gear icon > Settings > Online Registration > Settings > Class Listings Tables on your Website section). Note: They will not contain a Register link when they are full.
• If you want Waitlists links for full classes, also set 'Allow Waitlist When Class Full' to YES (Gear icon > Settings > Online Registration > Settings > Class Search Settings section).
• If you plan to show the Category columns in the tables, consider relabeling them to more descriptive, meaningful terms. (Gear icon > Settings > Online Registration > Settings > Class Search/Filter Settings). 

Step 3: Start with your "default" table (not yet customized):

Always start with the standard table code which is given below. This code will display all of your active classes in one table, with these headers (later steps will show you how to customize the columns):

If you can copy/paste the code in this gold box into your website editor (in the HTML or Source mode), you can do this! 

The gold box below contains the full script needed to embed a table onto a webpage. The most important part of the code is the src (source). The url there determines what is shown in the table. 

Refer to Not Sure How to Get to Your Editor's HTML Mode? for more detailed information about working in HTML mode.

Replace the XXXXXX with your specific Organization ID! (Gear icon > Settings > Online Registration - it is shown in blue).

Step 4: Create customized, grouped tables:

After you have successfully completed Step 3 above, you may want to customize this table with the following options: 

• Split the one big table into several smaller tables by "filtering".  See Filter (Group) Your Class Listings Tables.
  Examples include:
  By Program: Suppose you run a Dance school. Perhaps you'd like to show all your Ballet classes on your Ballet webpage, and all your Jazz classes on your Jazz webpage, and your Tap classes on your Tap webpage. Using your Cat1, Cat2, or Cat3 codes, you can easily divide out your classes by Program or Level.
  By Session: You may need or want to show your Fall Classes in a separate table than your Winter classes. You can easily filter by session to do this.
  By Location: If you have multiple Locations (Loc codes) in your database, you can separate your classes by Location easily.
  You can even do all three of these at the same time: Display only your Ballet classes for Fall session at location Smithville, for example.
• Choose from 19 available columns of information to display. See Hide Columns in Your Class Listings Tables and Add Columns to Your Class Listings Tables to learn more.
• Specify the sort order of the classes going down the page. See Sort Rows in Your Class Listings Tables.
• Add scroll bars and select custom colors for your tables. See Customize Scroll Bars and Colors in Your Class Listings Tables.