Custom Class Listing Tables (the "CHEAT SHEET" for customizing your tables)


Customize your tables to show exactly the information that you want your customers to see on your webpages! Remember, the more information you include in the listing tables, the easier it is for your customers to find the class they need. Always begin with your standard code, then add various parameters into the code (query strings) to customize the data shown in the table. For quick reference, all the parameters are listed near the bottom of this page.
   Webmasters, Web Developers, and other "code-writing" clients:   Please scroll to very bottom of page for special webmaster notes in green box.

To make custom tables, you begin with your standard code listed on the previous page or in Example #1 below. Then you will use various "parameters" to force the code to display only what you tell it to. There are 11 various Examples below using live data, complete with the code that produced it. The available "parameters" are shown near the bottom of this page. View all the examples to get ideas as to how you'd like to display your data. Watch the video near the bottom of the page to see how to view a demo of your custom table before uploading it to your website.

Quick Links for common Examples below: Filtering   Hiding   Adding   Sorting   Multiple parameters   Full classes   View Parameters   View Tricks

Column headers going >>across>> the page are SET, you cannot change the order. The default table shows these columns, in this order:
(you may HIDE any of these, see Example #3)


Several additional columns can be shown (see Example #4). You may show (add) ANY of these, and this is the order across the page that they will display:
(you can re-name your Category codes)


The width of the columns is automatic - it stretches or shrinks to fill your content area. Modifying the width of the columns cannot be done with code parameters; it requires a webmaster to manipulate the table data.


The Org ID used below, 507172, is our Training Database, always replace it with YOUR Org ID #





Example #1: Class Listing standard layout - your "basic starting point"

Use this if you want all your active classes displayed together in one table and you do not need any special sorting or filtering.

   <script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172"></script>






Example #2: Using Filters for GROUPING certain types of classes together

Use this if you want a table that only shows a certain GROUP of classes (such as a Session, Location, or a particular Category)
So, you may "group" your classes and then make several tables, one for each grouping.

This example filters to show only Cottontail, which is one of the Cat1 names in this training database (you will use your own Category names that you set up in your database under Tools > Edit Drop Down Lists, and that you assigned to the classes). Here, we want to create a table that shows only classes that meet the criteria of Cat1=Cottontail, and also meet the criteria of a specified Session name, such as Fall 2012. Please note the Category, Location, or Session name right after the = sign must match the exact spelling of the ones in your database.

For a list of all the parameters that you may use for FILTERING, scroll to the bottom of the page.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Cottontail
&Session=2013Spring
"></script>

You can further break down your tables using your Cat 2 and Cat 3 names.





Example #3: HIDING Columns that you do NOT want shown

You may hide any of the columns with the "&hidecols=" parameter. This example filters for Cottontail as above, then HIDES the following columns: Description, Gender, Openings, Class Ends, and Session.

For a list of column names that can be HIDDEN using the parameter "&hidecols=", scroll to bottom of page.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172
&Cat1=Cottontail&hidecols=Description,Gender,Openings,EndDate,Session"></script>





Example #4: ADDING other Columns such as Instructors or Room

You may add in several additional columns that aren't included in the basic default table. This example filters for all BUNNY classes, hides the Description, and then adds the columns of Instructor and Room by using the "&showcols=" parameter.

For a list of additional column fields that can be ADDED (shown) using the parameter "&showcols=", scroll to bottom of page.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Bunny
&hidecols=Description&showcols=Instructors,Room"></script>





Example #5: SORTING - organizing the order of the rows going down the table

You may want your classes to sort by Day of Week, or Start Time, or Class name (ABC order). This example sorts all the classes FIRST by Day of week, then next by Start Time, by using the "&sort=" parameter.

For a list of column fields that can be used to SORT with the parameter "&sort=", scroll to bottom of page.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&sort=Days,StartTime"></script>





Example #6: Filtering by MULTIPLE categories and using MULTIPLE parameters

This can be used if you want to show all of your classes as defined by lesser designations such as Cat2 or Cat3. Suppose you want to show all "Advanced" classes in one table, regardless of the type of class. In this example, Cat1 is re-labeled as "Program" and Cat2 is re-labled as "Level" (under Tools>Website Registration>Settings). So in this example we are filtering to show only Cat2=Advanced classes, showing those additional Category columns, hiding some other columns, and sorting by Day. IT DOESN'T MATTER what order you place the parameters in.

For a list of all parameters that are available for use, scroll to bottom of page.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172
&Cat2=Advanced&showcols=Cat1,Cat2&hidecols=Description,Gender,Session&sort=Days,StartTime"></script>





Example #7: FULL Classes options - to show or not to show?

Your organization may or may not want full classes to be shown in the tables. The default setting shows full classes; they are displayed withOUT a Register link and the Openings is listed as 0. If you prefer NOT to show full classes in your tables, you can quickly disable this option by going to Tools>Website Registration>Settings and change "Show Full Classes on Openings" to NO.
You may want to show full classes but would prefer not to have "0" listed in the Openings column. In this example below, the Tuesday Hare HipHop class is full, and we have chosen to place the word "Full" in the Openings column for clarity.

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Hare&closed=Full"></script>




Example #8: Waitlist option for FULL Classes

If you DO choose to show your full classes, you now have the option to allow customers the opportunity to get on the waitlist. Go to Tools>Website Registration>Settings, and change "Allow Waitlist when Class Full" to YES. Then, if the class is full but the Waitlist is not full, the word "Waitlist" will be shown the Register column. The email notification to the customer and to your staff will indicate that the student was added to the Waitlist (not enrolled in the class).

<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Cottontail"></script>




Example #9: Getting FANCY - using special fonts, colors, and other effects

There are several extra html commands that you can use to enhance the appearance of your tables. In this example we are making the text color green and bolding the Class names, by adding parameters into the code. We are also making the background color pink by specifying the DIV style.

For a list of our special effects parameters, scroll to the bottom of this page to the "Tricks" section. Any special effects not listed in the "Tricks" section is not available via Jackrabbit and would require the skill of a webmaster to manipulate the table display.

<div style=background-color:pink;>
<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172
&Cat1=Hare&style=color:green&ClassStyle=font-weight:bold"></script>
</div>

Helpful hint for background colors: There are 147 color "names" you can use - click HERE to view a list. Of course, there are almost endless color possibilities if you use the hexadecimal color codes instead of names.



Example #10: Forcing any table into a styled, sized scrollable mini-table

You may want to display the data inside smaller "scrollable" tables. You will need to add DIV commands before and after the coding. This example filters to Cat1=Bunny, hides the Description, and places the table inside a defined-size scroll of 400x250 pixels.
<div style="width:400px; height:250px; overflow:scroll">
<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Bunny&hidecols=Description"></script>
</div>

Note to Webmasters: you may use CSS to specify styles for the table which is used for the html tags DIV, SPAN, TABLE, TR, TD, etc.


Example #11: Table Style 2 - for a totally different Layout

Table Style 2 layout is a SET value of columns in this order only and most parameters will not work with it. The columns are set as follows:
Register, Class name (underlined and bolded) with Description underneath, Gender with Ages underneath, Dates, Days with Times underneath, Cost.
This layout can NOT be edited, changed, or altered. The table below was produced by filtering to Cat1=Hare, then adding the parameter "&tblstyle=2" into the basic default code as:
<script type="text/javascript" src="http://app.jackrabbitclass.com/Openings.asp?id=507172&Cat1=Hare&tblstyle=2"></script>

******************************************************************************************************************************************************************************************* *******************************************************************************************************************************************************************************************

Parameters

Column names available for FILTERING classes are:

  Loc - uses the Location CODE to filter (group) classes in the same location.
  Cat1 - Your Class Category1 value such as "Swimming" or "Dance"
  Cat2 - Your Class Category2 value such as "Ballet" or "Beginner" or "Level 2".
  Cat3 - Your Class Category3 value such as "1Mon" or "Team".
  Session - Class Session such as "Fall 2012".
  Gender - Gender of the class such as "Female".
  Room - Room of the class.
Example URL parameters: &Cat1=Cheerleading (note: you can only specify one target for each parameter)



Columns displayed in the standard table that can be HIDDEN using "&hidecols=" are:

  Class - Name of the class.
  Description - Description of the class.
  Days - Days the class meets (ex. Mon,Wed,Fri).
  Times - Start time-End time of the class (ex. 4:30pm-5:30pm).
  Gender - Either Female, Male or Both.
  Ages - The min-max age range for the class (ex. 4-7).
  Openings - The number of remaining openings before class reaches it's max enrollment
  StartDate - Date the class starts (ex. 1/2/11).
  EndDate - Date the class ends (ex. 3/12/11).
  Session - Session of the class (ex. Fall 2010 or Summer Week One).
  Tuition - Tuition Fee for the class.

Example URL parameter: &hidecols=Gender,Ages,Tuition        (use commas to separate multiple column choices)



Columns not normally shown but can be ADDED using "&showcols=" are:

  Location - Class Loc CODE will display.
  Cat1 - Class Category1.
  Cat2 - Class Category2.
  Cat3 - Class Category3.
  Instructors - List of Class Instructor name (Displays as First Name, Last initial only).
  Duration - Class duration such as 1 hour, 30 min, etc.
  Room - Class room.

Example URL parameter: &showcols=Instructors,Room       (use commas to separate multiple column choices)

Remember, you can re-name your Cat labels on Tools>Website Registration>Settings.



Column names available for SORTING classes are:

All of the column names above can be used for sorting your classes, except you have to use the word "StartTime" instead of "Times" to sort by Class starting time:

Example URL parameter: &sort=Days,StartTime       (use commas to separate multiple column choices)  (use %20desc to reverse the order)




Other Tricks for query strings:

  &hidereg=1 - (will hide the register column).
  &hdrstyle=color:blue - (will change color of header text to specified color).
  &hdrstyle=display:none - (will hide the header row, in case you want to stack several tables).
  &style=color:red - (will change color of body text to specified color).
  &ClassStyle=font-weight:bold - (will change font of Class names to bold).
  &ShowClosed=1 - (to temporarily over-ride your system setting of not showing any full classes).
  &Closed=full - (will change all "0"s in openings column to display text such as "full").
  &registertext=Enroll - (will change the word Register to Enroll, or other text, throughout table).
  &tuitionlabel=Fee - (will change the Tuition header name to Fee, or other text).
  &classlabel=Program - (will change the Class header name to Program, or other text).
  &exact=1 - put this right after a cat parameter to force (limit) the return to the EXACT spelling.
  &Cat1=dog | fish | bear | tiger - use spaces and the | symbol to join/show multiple Category 1 names in the same table (not possible for Cat 2 or 3).
  %20 - use after a sort target to make a reverse sort (sort in descending order instead of ascending order)


See the above steps in action by viewing this short video which shows you how easy it is to apply custom parameters on this page: "Using the HTML parameters to create Custom tables".



HTML does not like special characters in text. If you have characters in your Session or Cat names, the code may break. Most browsers will automatically fix spaces, but other characters may cause problems. Fix by replacing your characters with their html approved "code".





REMEMBER - for a class to appear in the table with a live "register" link, they must have the following:

 1) Status = Active or Future (not inactive, completed, or terminated).
 2) "Show Register link on Listings" set to YES (on Tools>Website Registration>Settings).
 3) "Allow Web Registration" and "Display on Website" both set to YES (bottom of each Class summary page).
 4) Registration Start Date has passed (if you set a Registration Start date).


WEB DEVELOPERS: Jackrabbit does not currently offer an API or other web service allowing programmatic access to your data, nor do we allow access via Cross-Origin Resource Sharing (CORS). You may use CSS to specify styles for the table for use with html tags such as DIV, SPAN, TABLE, TR, TD. Webmasters often ask us to increase the availability of cosmetic (non-functional) offerings and plugins. We have found that what is currently available is sufficient for most of our customer base. Some creative webmasters have written scripts to "consume" the content, used CSS, or used "jQuery" to re-style the table data after it is downloaded. You are welcome to enhance the rendering of the tables with cosmetic or aesthetic tweaks. As the popularity of CMS sites (such as Wordpress/Drupal/Joomla) grow, we will continue to assess the viability of developing a plugin for such applications. If you have "functional" (content-specific) enhancement ideas, please have your client submit the request to Jackrabbit through their database's SEND IDEA button. To see how to use the table script codes and parameters in some typical CMS sites, click here.


 

  © 2013 Jackrabbit Technologies, Inc. Site Map  |  Contact Us