Limit the Number of Maximum Submissions

This article shows an example of how to limit submissions based to a maximum number.  In this example we are going to setup a “Course sign-up” system where there are a limited number of available seats in each Course, but this system could be used in any number of situations where inventory is limited.

This process includes a customizable message to display when all available submissions have been filled.

This process requires a total of 3 DataPages and uses some basic JavaScript.

Steps to limiting submissions to a maximum number

Table setup

This technique involves two separate tables.  One table keeps track of submissions and the other holds information about the main records.  In this example we will have one table for Courses (main records), and a second table for Attendees (submissions).

Courses Table (contains the main records)

For this system to work,  you must include at least the following three fields:

• An ID field such as an AutoNumber (Course_ID)
• The maximum submissions as a Number DataType (Maximum_Attendees)
• The current number of received submissions as a Number DataType(Attendees)

Attendees Table (records the submission)

In this table, you only need the following field to make the system work:

• The foreign ID field from the main records table (Course_ID), which must be a Number datatype

You can, of course, add whatever additional fields you wish to this functional skeleton.

Create a Report for your primary records table (Courses)

Now that the tables have been designed we are going to create a Report for our main records table (Courses). The same basic technique could be used for List or Gallery Reports or even on Details Pages.

In the Caspio Bridge Explorer window, click the New button to open the DataPage wizard.  Select your Courses table as your data source.  Be sure to enable advanced options and parameters.  You can configure the Search page anyway you’d like.  It does not affect this technique.

On the results page we are going to include some JavaScript to display a link to a Submission Form (Course signup form) if there are places available.

Add an HTML block using the insert button at the lower right-hand corner of the DataPage Elements panel.

In the HTML block add the following JavaScript:

Replace Attendees, Maximum_Attendees, and Course_ID with the appropriate fieldnames from your table.  In our example this would look like:

The submission URL will be replaced in a later step.  You can also replace Signup and Signup Closed with more appropriate messages for your app.

At this point you can also add a calculated field to show the remaining submissions available.

Continue with the wizard until you can select “No Details Page”.  Press Finish to save your DataPage.

Create the New Record Submission Form

Now we are going to create the Submission Form.  In this example, the Submission Form will allow students to sign-up for a Course.

Click on the New button to create another DataPage.  This time select the Submission Form DataPage type.  Click Next.  Choose the submissions table (Attendees) as the data source and be sure to enable advanced options and parameters.  Click Next.

This Submission Form can include any field you would like to record about each submission, but it must include the foreign key value (Course_ID).  The one crucial thing this form must do is receive the query string parameter from the course listing report, and pass it on to the final Single Record Update Form we will create in the last step.

In the Configure Fields Screen select the foreign key value (Course_ID) and click on the Advanced Tab.  Under On load, select Receive parameter, and make sure the parameter name that is generated matches exactly with the query string in the hyperlink we created in the previous step (Course_ID).

Also Click on the pass field value to next page checkbox.

In the Standard tab hide this element from the user by selecting Hidden from the form element dropdown:

Click Finish.  We will customize the destination of this page after we create the next Single Record Update Form.

Increment the number of attendees

The last DataPage we need to create will be a Single Record Update Form that will automatically increment the number of attendees in the main record (Courses).

In the Explorer window click the new button to create a new DataPage.  Select Single Record Update Form from the Forms DataPage Type.  Click Next.  Select your Courses table as the data source and be sure to turn on advanced options and parameters.  Click Next.

On the following page, we are going to locate the record using a Unique ID (Course_ID).  Select Course_ID from the Unique ID field dropdown and add the parameter as shown below.

Click Next.  We are going to include only the current number of submissions (Attendees) field.  Move Attendees to the right-hand panel using the arrow button and click Next.

Using the Insert Button at the lower right-hand corner of the DataPage Elements panel add Header and Footer sections.  We are now going to add a div tag to hide this DataPage, so your end users cannot access the number of attendees.  We are also going to add some JavaScript to increment the Attendees by one and submit this Single Record Update Form automatically.

In the header add the following HTML:

Now in the footer add the following:

Replace "Attendees" with the actual fieldname from your table as it is listed in the DataPage Elements panel.

Click Next.  On the last page you can choose what the final destination will be after a user completes their registration / submission.  In this example we decided to direct the user to a page indicating that their submission has been sent, and to watch their email for a message containing their confirmation number.

Deployment and tying it all together

Now that all of the DataPages have been created, we can work backwards to connect them into a single process.  Select the Single Record Update Form created in the last step and click the Deploy button.  Enable external access to this DataPage and select Direct from Caspio from the Method dropdown.

Click the Deploy button.

Now select the New Record Submission Form and click Edit.  Navigate to the Destinations and Triggers screen (the last screen in the wizard).  When the user presses submit on this form they should be directed immediately to the (Increment Attendees) Single Record Update Form.

Select the Open this DataPage radio button.  Using the Browse button locate the Single Record Update Form.  Click Select.

At this point you can also set up an Acknowledgement Email to notify the user that their submission has been received.

Click Finish to save your DataPage.

Now we can Deploy the Submission Form.  Click the Deploy button and Enable External Access as before.  This submission form can be embedded into a webpage or deployed using the Direct from Caspio method.  Deploy the DataPage and copy the URL where this DataPage is hosted for use in the last step.

Finally we want to tie the original Report DataPage to the Submission Form.  Select your original Report DataPage and click the Edit Button.  Navigate to the Configure Results Page Fields screen and select the HTML block.

Within the JavaScript we added in a previous step, locate the "SubmissionURL" text.  This SubmissionURL can now be replaced with the URL of the Submission Form.  Click Finish to save your DataPage.  You will notice that when the number of submissions surpasses the maximum number of allowed submissions, the link to the signup / submission form becomes unavailable.

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.