Slots

There have been many times when a client wanted to use SharePoint in order to allow employees to register for classes or other events. Typically the requirement is to have a certain number of spots before registration is automatically closed. This is how I created a registration system for a client.

Administrators can create new classes/events just by adding them to the calendar and specifying the number of spots available.

  1. There are 3 appointments every 10 minutes for 4 hours. Employees sign up for a time slot currently using pen and paper on a spreadsheet.Apr 19, 2016 Appointment slots allows users to set aside blocks of time on their calendars where their colleagues, clients or students can reserve specific portions.
  2. Appointment slots allows users to set aside blocks of time on their calendars where their colleagues, clients or students can reserve specific portions. Each calendar also comes with a unique URL for the appointments page, so it can be easily shared or embedded.
  3. Doodle is a free online appointment scheduler that can be used to book meetings and other events with friends, colleagues and anyone else. Email threads trying to book a large number of appointments can quickly become confusing and trying to mark off available and booked time slots on a piece of paper is not conducive for amendments and changes of plans.

I need to arrange approx. 50 meetings with 50 users. Rather than contacting them all individually, I had an idea to send a blanket email to all of them with a list/calendar of available slots, and then allow them to pick their preferred slot electronically.

The user goes to a page with a list of available classes:

Upon clicking the class name, the user will see an event from a calendar like this:

When they click on Register, the form will look like this:

Confirm Registration will automatically set the Seats Remaining to 1 less (24 in the example above).

NOTE: I am still working on a workflow that will allow a user to cancel their registration and add one back to the Seats Remaining as well as remove them from the Attendees list.

Once all seats have been taken, the Register link will be removed with the text Class is Full. If the class is closed for registration, it will state Closed for registration.

Create the Lists

  • Calendar – Just use the out of the box Calendar app and add the following columns
    • Required columns
      • Seats – Number
      • FilledSeats – Number – hidden column
      • RemainingSeats – Calculated Column with Formula[code]=Seats-FilledSeats[/code]and data type returned Number
      • SeatsIncrement – Calculated Column with Formula[code]=FilledSeats+1[/code]and data type returned Number
      • Closed – Yes/No with default value of No
      • StaticID – Number – Hidden column NOTE: This is a hack that allows the ID to be used in calculated columns. A workflow will set this field.
      • Register – Calculated Column with Formula =IF(Closed=TRUE,”Closed for registration”,IF(RemainingSeats>0,”Register”,”Class is Full”)) and data type returned Single Line of Text
    • Optional columns used for stylizing the display form as shown above:
      • SeatsRemaining – Calculated Column with Formula
        =CONCATENATE([Remaining Seats],” Seats Remaining”) and data type returned Single Line of Text NOTE: This will show how many seats remaining. If you choose not to hide the labels on the display form, then you can leave this column out.
      • CourseDescription – Multiple Lines of Text with Enhanced rich text. NOTE: In order to stylize the form I had to create a new Multiple lines of text column. The default Description column would not work with the JavaScript used to style the form. I hid the Description column.
  • Attendees List – Custom SharePoint list with the following column added
    • Meeting – Lookup. Get information from the calendar list created earlier using the Title field

Create the workflows

  • SetStaticClassID Workflow
    • Open the site in SharePoint Designer
    • Select the Calendar list created earlier and create a list workflow
    • Add an action – “Set Field in Current Item”
    • Click the “field” link and choose StaticID
    • Click the Value link and the the fx button. Data source is current item and field from source is ID
    • Go to the Settings page for the workflow. Set the Start Options for “Start Workflow automatically when an item is created”
    • Save and Publish
Sign Up For Time Slots Outlook

The workflow will look like this:

  • Registration Workflow – NOTE: This workflow does not add the user to the attendees list of the event. I will update this post later with the info on how to do this.
    • Open the site in SharePoint Designer
    • Select the Attendees List created earlier and create a list workflow
    • Add an Action – “Update List Item”
    • Click the “this list” link in the action
    • Change the list to the Calendar created earlier
    • Click the “Add” button
      • Choose “Filled Seats”
      • Click the fx button
        • Data Source: Calendar
        • Field from source: SeatIncrement
        • Field: ID
          • Value – click the fx button
          • Data source: Current Item
          • Filed from source: Meeting
      • In the Find the list item section
        • Field: ID
        • Value – click the fx button
          • Data Source: Current item
          • Field from source: Meeting
    • Go to the Settings page for the workflow. Set the Start Options for “Start Workflow automatically when an item is created”
    • Save and Publish

Your workflow should look like this:

Nintex Form

  • Go to the Attendees list
  • In the List ribbon, click Nintex Forms > Customize the Item Form
  • Click on Form Variables
  • Click Add
    • Name: CurrentUser
    • Type: Generic
    • Connected to: Not connected
    • Recalculate formula on view mode: Yes
    • Recalculate formula on new mode: Yes
    • Recalculate formula on new mode: Yes
    • Formula:[code]userProfileLookup({Common:CurrentUser}, “Display name”)[/code]
    • Save
  • Click on Settings
  • Expand Custom JavaScript and enter:
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
<style><span id='ms-rterangecursor-start'></span><span></span>
.ms-formbody {
BACKGROUND:nonetransparentscrollrepeat0%0%;
}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script type='text/javascript'>
functionOpenLandLRegistration(MeetingID)
varoptions={
url:'/Lists/ClassAttendees/NewForm.aspx?MeetingID='+MeetingID,
height:600,
dialogReturnValueCallback:RefreshOnDialogClose
{}
// Reformat the url in the calculated column to hyperlink
// Format link font size and weight
$('td.ms-formlabel:contains('Register')').siblings('.ms-formbody').css('font-size','18px');
$('td.ms-formlabel:contains('Register')').siblings('.ms-formbody').css('font-weight','bold');
$('td.ms-formlabel:contains('Title')').siblings('.ms-formbody').css('font-size','18px');
$('td.ms-formlabel:contains('Title')').siblings('.ms-formbody').css('font-weight','bold');
$('td.ms-formlabel:contains('Location')').siblings('.ms-formbody').css('font-size','16px');
$('td.ms-formlabel:contains('Start')').siblings('.ms-formbody').css('font-size','16px');
$('td.ms-formlabel:contains('End')').siblings('.ms-formbody').css('font-size','16px');
$('td.ms-formlabel:contains('Seats')').siblings('.ms-formbody').css('font-size','16px');
$('td.ms-formlabel:contains('Description')').siblings('.ms-formbody').css('font-size','16px');
$('td.ms-formlabel:contains('Attendees')').siblings('.ms-formbody').css('font-size','16px');
functionreformatCalculatedColumnUrl(){
$('td.ms-formlabel:contains('Register')').siblings('.ms-formbody').each(function(){
});
});
$(function(){
$('a[name$='SeatsIncrement']').closest('tr').hide();
$('a[name$='WorkspaceLink']').closest('tr').hide();
$('a[name$='Closed']').closest('tr').hide();
$('a[name$='RemainingSeats']').closest('tr').hide();
$('a[name$='Title']').closest('td').hide();
$('a[name$='EventDate']').closest('td').hide();
$('a[name$='CourseDescription']').closest('td').hide();
$('a[name$='Register']').closest('td').hide();
$('a[name$='ParticipantsPicker']').closest('td').hide();
$('a[name$='SeatsRemaining']').closest('td').hide();

Now just create a page with links to the calendar items.

Sign up for time slots outlook mail

Here’s how to send someone a list of your available time slots from Outlook 2007.

Create a new email item as per below example, then click the Calendar button:

The following form will appear:

Sign

Choose the Calendar (if you have multiple) and Date (or range) you want. I usually tick the box to limit it to just work hours.

Click OK and it inserts the list of available times into your email (note it requires the email to be in HTML format).

Sign Up For Time Slots Outlook Account

Click Send.

Already know this tip? Yep, you’re probably not alone. That’s why this post is covered under the ‘well duh’ item in my Disclaimer.