***Alert: If you don’t use Sharepoint, you will find this post irrelevant***

As part of my day job, I spend a fair amount of time working in Sharepoint.  It’s not a perfect application,  but it allows people without any programming skills to build usable applications that only a couple of years ago would have been the responsibility of IT departments.
Occasionally, I get requests to create RSVP forms for employee events.  It’s not a very difficult request, but it takes some time to complete.

1. Create a list that will hold all the RSVPs.
2. Create a list that will information about number of slots available for the event.
3. Spruce up the form to include banner.
4. Develop a workflow that will increment number of slots remaining.
5. Develop a workflow that sends out a confirmation email.
6. Develop a workflow that puts people on waiting list (status=waiting list) if the event is full.

All told, the process can take anywhere between two hours to four hours to develop, test, and get user acceptance.  Over time, these projects add up, so I wanted to create an application that would setup these RSVPs dynamically.   My goal was to make it easy enough so a non-techie could set up an RSVP in under 15 minutes.

High Level Overview

It takes a little bit everything to get this built (i.e. javascript, workflow, data view web parts filtered based on parameters, etc), but in several hours time, this RSVP engine will run itself.

In the form above, the title, image, and text below the image are all related to the specific event. The fields in the form will be used for all events.

High Level Components:

• Event Info List (easy)
• RSVP List (easy)
• Customized NewForm.aspx (moderately complex–you’ll need access to Sharepoint Designer)
• Workflow to generate a link to an event’s form. (easy)
• Workflow to increment number of slots left. (easy)
• Workflow to send confirmation emails. (easy)

Step 1: Create Event Info List

The Event Info List will contain all the information about the list.  I setup my list to include the following fields:

The calculated column “Number of Places Left” uses the following formula:

=[Number of Places]-[Number of Places Used]

An explanation for how to setup the other calculated column (Link to RSVP form) can be found in Part II.

Step 2: Create the RSVP list.

This list will be where all attendees for all events will be stored.  At the minimum, you’ll need a lookup to the Event Name field in the Event Info List, the name of the attendee and a status field.  Some other suggestions include Name of Manager, Phone Number, and email address.

Step 3: Customize the newform.aspx (actually create a new “newform”)

This is the most complicated step of the project.  There are several parts to this step.

1. Customize the RSVP form.
2. Create a Data View Web Part pulling data from the Event List. (Remember the RSVP form is static, but the information about the event is dependant on chosen event.)
3. Setup Parameters and Filter so the approriate event is selected on the Data View Web Part.
4. Update the form (with a Content Editor Web Part) so that the appropriate event is selected on the RSVP form.

Part I: Customize the newform from the RSVP created in Step 2.

Although I’m not going to explain the process of customizing/creating a newform.aspx, a simple google query came up with some of the following walkthroughs:

http://www.risetime.com/blog/archive/2009/06/03/create-a-custom-newform-aspx-for-a-sharepoint-list.aspx
http://office.microsoft.com/en-us/sharepoint-designer-help/create-a-custom-list-form-HA010119111.aspx

Once the form is created, you can delete or move fields as necessary.  DO NOT DELETE ”EVENT NAME” FROM THE FROM.  The event name is needed to make sure that the RSVP is connected to the corresponding event.  We’ll hide this field in a subsequent step.  (See Section 2 Below)

Part 2: Create a data view webpart using the Event List

To add the event information create a data view webpart that shows data from the Event List we created in Step 1. (See Section 1 Below)

Part 3: Setup Parameters and Filter String

Once the two sections are setup, we have to setup Section 1 to return the appropriate Event based on a query string.  To do this, setup a Parameter for the data view web part in Section 1:

Then setup the Filter Criteria using the Parameterwe setup above:

Part 4: Update the form

Ok, so now we have the lists created and the NewForm created.  We’re almost done, but now we have to make sure that the form defaults to the correct event.  To do this, save and close your work in Sharepoint Designer.  Then open the form you just created in Sharepoint and add a content editor webpart.  Then insert the script below which will do two things:

1. It will select the current event in the dropdown list.
2. It will hide the event on the form.  (Once the event is selected, we don’t want users changing it.)

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("fillDefaultValues");
_spBodyOnLoadFunctionNames.push("hideFields");
function fillDefaultValues() {
var qs = location.search.substring(1, location.search.length);
var args = qs.split("&");
var vals = new Object();
for (var i=0; i < args.length; i++) {
var nameVal = args[i].split("=");
var temp = unescape(nameVal[1]).split('+');
nameVal[1] = temp.join(' ');
vals[nameVal[0]] = nameVal[1];
}
setLookupFromFieldName("Name of Event", vals["SelectedID"]);
}
function setLookupFromFieldName(fieldName, value) {
if (value == undefined) return;
var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);
// if theSelect is null, it means that the target list has more than
// 20 items, and the Lookup is being rendered with an input element
if (theSelect == null) {
var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
ShowDropdown(theInput.id); //this function is provided by SharePoint
var opt=document.getElementById(theInput.opt);
setSelectedOption(opt, value);
OptLoseFocus(opt); //this function is provided by SharePoint
} else {
setSelectedOption(theSelect, value);
}
}
function setSelectedOption(select, value) {
var opts = select.options;
var l = opts.length;
if (select == null) return;
for (var i=0; i < l; i++) {
if (opts[i].value == value) {
select.selectedIndex = i;
return true;
}
}
return false;
}
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
function hideFields() {
var control = getTagFromIdentifierAndTitle ("select","Lookup","Name of Event");
control.parentNode.parentNode.parentNode.style.display="none";
}
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>

Now that the form is complete, some workflows must be created to tie all this together.  In the next couple of days, I will be posting information about how to setup the following functionality:

• Generate a dynamic link to an event’s form.
• Increment number of slots left.
• Send confirmation emails.

To see the rest of this tutorial please go to Part II.