SharePoint Class Registration Form

Introduction

This walkthrough shows how to build an automated registration form that closes down registration if the seats in the class fill up.

Here’s an example of what the result will look like:

Create Lists

This solution requires two lists, one containing the classes and another one containing the registrations.

Class Calendar

The class calendar list holds the classes and informations such as the remaining seats.

Type: Calendar

Fields:

Seats

Type: Number

FilledSeats

Type: Number

ReaminingSeats

Type: Calculated

Formula: =Seats-FilledSeats

Data type returned: Number

SeatsIncrement

Type: Calculated

Formula: =FilledSeats+1

Data type returned: Number

Closed

Type: Yes/No

Default value: No

StaticID

Type: Number

Note: This is a Hack we have to put in because we can’t use the real ID field in a calculated column. We will use a workflow to fill it in correctly later. I am open to suggestions on a better way to do this.

Note: You might have to replace the semicolons with commas as this seperater depends on the SharePoint localized installation.

Class Calendar view

In order to register for an class we need a custom view.

Type: Default view

Option: Make this the default view

Columns:

Title

Location

Description

Start Time

End Time

Seats

RemainingSeats

Register

Class Attendees

This list contains the registration every entry shows the attendee and the chosen class ID.

Type: Custom List

Fields:

Username

Type: Single line of text

Option: Required

Meeting

Type: Lookup

List: Class Calendar

Field: Title

MeetingID

Type: Single line of text

Create Workflows

SetStaticClassID Workflow

The SetStaticClassID Workflow is really a hack because SharePoint won’t let you use the ID field in the calculated columns. All we are doing is setting a number field with the ID field every time the calendar item is created or modified.

Open the Class Calendar in SharePoint Designer

Add a list workflow

Name it: SetStaticClassID

Update Start Options: Start Workflow automatically when an item is created and Start workflow automatically when an item is changed

Add an action: Set Field in Current Item

For field link choose: StaticID

For value link click on the fx button

Data source: Current Item

Field from source: ID

Save and publish

Registration Workflow

The Registration Workflow is one of the main parts of this solution. This is the Workflow that will update the remaining seats in the calendar list when an Attendee register for the course.

Open the Class Attendees list in SharePoint Designer

Add a list workflow

Name it: Registration

Update Start Options: Start Workflow automatically when an item is created

Add an action: Update List Item

Click the “this list” link in the action

Change the list ot the Class Calendar list created earlier

Click the “Add” button

Choose “FilledSeats”

Click the fx button

Data source: Class Calendar

Field from source: SeatIncrement

Field: ID

Click the fx button

Data source: Current Item

Field from source: MeetingID

Close all dialogs until you get back to the “Update list Item” dialog by clicking on ok

In the same dialog in the Find the list item section choose for Field: ID

Click on the fx button

Data source: Current Item

Field from source: MeetingID

Click ok

Save and publish

Create InfoPath Form

The end user will eventually register through the InfoPath form on the Class Attendees list.

Open the Class Attendees list InfoPath form

Right-click on the Title entry field and select Text Box Properites

Click the fx button on the default value filed

Add this for the formula concat(Username, " registration for event number ", Meeting)

Add a fomratting rule to the Title and MeetingID field

Check “Hide this control” foreach formatting rule

Move the filed Title and MeetingID to the bottom of the form as the will be invisible.

Add a formatting rule to the Username and Meeting field

Check “Disable this control” foreach formatting rule

Right-click on the Username entry field and select Text Box Properites

Click on the fx button for the default value

Add this formula username()

Select the Meeting entry field

In the Properties tab click the “Default Value” button

Click the fx button on the default value field

Insert the MeetingID field

Delte the Attachments field

Publish the form

Querystring

In order to automatically set the the meeting in the InfoPath form, we will use a query string to the MeetingID field.

Open the Class Attendees list

Select the List tab > Form Web Parts > (Item) New Form

Add a Query String (URL) Filter webpart

Updat the “Query String Parameter Name” with meeting_id in the webpart properties

In the webpart options select Connection > Send Filter Values To > InfoPath Form Web Part

Select the MeetingID field as Consumer Field Name

Save the changes

Add JavaScript

The javascript creates the dialog box javascript to open our new form. The call to this javascript method is in the calculated field on the attendees list to register.

Open the SharePoint site were you are going to display the Class Calendar list webpart

Edit the page and select Embed Code on the Insert tab

Paste the following javascript and save the page

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.0/jquery.min.js">
// visit http://www.jsdelivr.com/#!jquery to update the cdn url
</script>
<script type="text/javascript">
function OpenRegistrationForm(meeting_id){
var options = {
// to geht following make a right click on the new item link in the Class Attendees list and select open in new tab.
// Now copy the url in the browser from the beginning to the of the &RootFolder= part
// Inser the link below and replace [RootFolder] with meeting_id
url:"http://sharepoint.vbl.ch/Personal/Lists/Class%20Attendees/Item/newifs.aspx?List=21803ee2-66ab-4df2-9116-b02853ca7e1a&meeting_id=" + meeting_id,
width: 750,
height: 600,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}
function DialogCallback(dialogResult, returnValue){}
</script>

Finally

Now we got everything required to set up our Class Registration Form.

Open the SharePoint site were you are going to display the Class Calendar list webpart

Add the Class Calendar list webpart

Edit the webpart and select the Registration view

Add a class example

Now you should be able to register for classes by click on the registration link.

I think now all is perfect except some bug in my code, and I cannot somehow move forward. It is interesting that the code work when Im in edit more of that particular page. But when I publish it it stop working.

Press F12 on the key board and you will see the developer tool window. Find the scripts tab on the window from where you can see the script files loaded. Select the required file and place a break point, To debug refresh the page or perform the required actions
My suggestion would be, that before doing that all, please make sure all the relavent files are published.

The function call SP.UI.ModalDialog.showModalDialog(options); shows the register window. According to your error message, the Javascript Object SP.UI.ModalDialog does not exit. This is very odd. However I’m not sure why I haven’t experienced this problem. I just want to make sure now that you have the same SharePoint features enabled as I have. I believe that the the Javascript Object is part of the publishing feature. Please check wether you have this site/farm feature enabled.

PERFECT now 100% work. I changed my original code to SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);

Seems all is working good. Just the REMAINING SEATS does not count down, but I must have missed something somewhere so will go through the process again step by step. THANK YOU many times!!!!!!!!!!!!!!!!!!!!!

Janik, thank you. Your instructions were excellent! And this example is brilliant and useful to me. I went through the Registration Workflow again step by step as it does not reduce me the number of registrants when I register users it always remains the same number. In Atendee list I can see all the ones that are registered, but somehow does not reduce the REMAINING SEATS. 🙁

Janik, also one question. I saw this solution somewhere. What should I do to have the page refresh automaticaly when user register. Now I need to press F5 to refres the page so the number shows -1. Is there any code I need to add to the page please? Thank you for your time in helping me!

I’m not aware of way to accomplish that. Maybe it’s possible with a bunch javascript. However the workflow needs several seconds to update the remaining seats, it’s very difficult to tell the browser when he has to refresh the page. This is a very basic issue. In my experience this isn’t even a real problem, the chance of user registering for the same event at the same time is almost 0.

Hello Sir…I’ve been following your instructions and it seems pretty straight forward. I’m not an expert by far in Sharepoint…but I believe I have a problem with the Registration workflow. Not sure how to isolate the problem so I can fix it…Any suggestions would be helpful..

This is the exact same instructions that Greg Galipeau posted 2 years ago. I am using it for my registration site. Someone mentioned the refresh issue and I’m not sure if they fixed it. To get around this I added a workflow that kicks off an email to the person that registered. In the same workflow I added a second email that gets sent if 0 seats are remaining apologizing that the class is now full. I also created a waitlist that opens once the class is full.

This is an excellent tutorial to get started. Now if I could only figure out how to add a cancel registration function. 🙂

Hello Rachel,
How did you get the Register open the InfoPath Form. Is there any specific name that should be used to save it ?
Clicking the Register somehow does not bring up the InfoPath. Need help pl

I’m stuck at the InfoPath part.
How do you get the Title field to show up in the form? I only see username, attachment, meeting, and meetingid.
Also when I try to paste the code from above into the textbox preferences for the fields I can see I get:
‘username’ is not a valid XSLT or XPath function.

The Create InfoPath Form part. When I created the class list.. it only said to create 3 columns so thats all i created Ill go back and create another column for title as test then.

The next part that is messing up is when i try and copy and paste the code from the site here into the FX fields. I get the error from above. Should I be doing it different instead of coping and pasting the code in?

Well, can’t really help you with that. I’m studying right now, so no more access to SharePoint 🙂 Sorry for that. Not shure about an approach to solve this. For shure we would need a nother row containg the dekrement of the seats, if a user is deregister from a course, it should run a workflow that sets the seat count from that dekrement value.

I see thank you. I tried using delete but delete do not trigger any workflow. I will think about the way a little bit more. I struggle now with IE11 and the InfoPath form itself not showing SAVE button 🙁

I followed everything just fine but when I use your formula in the Register field =IF(Closed=TRUE,”Closed for registration”,IF(RemainingSeats>0,CONCATENATE(“Register“),”Class is Full”)) get an error that the formula contains a syntax error or is not supported. I’ve tried it with semi-colons and with commas. Can you help? I can really use this solution.

I also had some issues when inserting formulas. I suggest to insert the fields with the formula editor instead of copy and paste them, It seems that SP assoicate the fields in a different way with the formula when using the editor. Not shure about this…

Everything working, except I am not showing clickable
link.
I am showing “Register” and not the
actually register clickable link.
I have checked my syntaxon the Register field itself in the Calendar List and in the jQuery
script. The script is added to a content editor web part on the Calendarlist page and the site showing the Calendar list.

Everything is working, except I am not showing clickable link.
I am showing “Register” and not the
actual clickable link.
I have checked my syntaxon the Register field itself in the Calendar List and in the jQuery
script. The script is added to a content editor web part on the Calendarlist page and the site showing the Calendar list.

I found the issue with the link not being clickable. This was due to Register not being set to return a number. I have fixed this and now have a clickable like. When I click nothing occurs, no error, not anything. MY java code looks good. I think my issue is where or how I am adding to the page. I am somewhat unclear on the step “adding javascript” right before “putting it together”. I have added the script to a text file that has been placed in the sites assets and al calling that file in a content editor web part placed below the webpart showing the class list. I am using the content link to link to the text file containing the java script. Is this right??

I’m having a problem with not being able to publish the workflows. Error is ‘transition section cannot be empty. Insert a go-to action.
Now my image looks different when I create the action. Instead of Step 1, it’s Stage 1.

Running SharePoint 2010 as of right now, currently having the issue where the Meeting field will not populate. I’ve adjusted the workflow from the original MeetingId to Meeting in hopes of correcting the issue as a previous user experienced however that hadn’t worked. I believe either that or it may be improperly using the Query Filter as the JavaScript populates the New Item form as expected.