Branding The Employee Training Fab 40 on SharePoint 2010 –Part One

At Rackspace we have a gym in our office buildings and we also run free classes that Rackers can sign up to.  The original gym site is based on one of the Fab 40 templates (Employee training and scheduling) which ‘kind of’ migrated fine over to our new SharePoint 2010 farm.  However, it is very flaky and even the smallest change to the Workflows broke it.  The gym manager has asked me to create a new site and make it look nicer than the SharePoint defaults.

The originally migrated site had all sorts of problems following the migration, which is not too surprising as these never migrate nicely to SharePoint 2010.  I took the decision to create a brand new site and at the same time make it more appealing rather than attempt to fix all the problems with the current one.

The goal:

To turn this…

 

1_BlankEmpTrainSite

Into this…

Image coming soon ….

The new gym site also had to meet the following requirements from a functional perspective:

  • People should not be able to sign up for courses more than 7 days in advance
  • A discussion board should be implemented to suggests improvements to the gym
  • A waiting list should be adopted so that if a course is full people could receive notification when a space is free.
  • The sign up and unregister should be smooth and working (unlike the current one)
  • Workflows customised/created to achieve the following:
    • Send an email confirmation on class sign up
    • Send an email reminder 24 hours before the class
    • Send an email following the class asking to complete the survey
    • Send an email confirmation following unregistration

This post will be written as a step by step guide so if you want to follow along you will need the following resources:

  • A fully installed and working SharePoint 2010 server Enterprise edition with the publishing feature enabled.  Whilst it is possible to do this on SharePoint 2010 foundation it is much easier to take advantage of the publishing features.  In this example I am making use of Master Pages and Page layouts for the branding.
  • SharePoint Designer 2010
  • I used a free CSS template from templatemo.com, specifically this one which is free to download and use:
  • A web development tool such as Dreamweaver or Expression Web to make editing the template a bit easier.
  • A copy of the Employee Training Scheduling and Materials template which has been updated to work with SharePoint 2010.  I used the one available for free from TechSol which can be found here:

So once we have all of these in place we can start putting the solution together.

Step 1 – Create the new site in SharePoint.

As we are basing this on one of the updated Fab 40 templates we first need to get this into our new SharePoint site.

I am creating a new site collection for this, which will be the Root site collection (for testing purposes).  It’s URL will be http://mydomain.com/sites/gym

From Central Admin create a new site collection, and in the section for ‘Select a template’ choose the custom tab, and then the option to < select template later >

Extract the EmployeeTraining wsp from the zip file obtained from TechSol

Browse to your new Site Collection at http://mydomain.com/sites/gym

As there is no template associated with this site yet you have an opportunity to choose one now, but more importantly it gives you access to the solution gallery so that you can upload your newly downloaded EmployeeTraining.wsp.

Select the link for the solution gallery and select Upload Solution from the Ribbon.

Upload the solution and Activate it.

Go back to the Site Collection URL http://mydomain.com/sites/gym and this time select the Custom tab.  You should now see EmployeeTrainingv3 available.  Select this and click OK.

You will then be presented with the option to Set groups for this site.  I am happy with the groups that SharePoint will create automatically which are

Gym Visitors

Gym Members

Gym Owners

Click OK to be taken to your new Employee Training Site.

Step 2 – Testing the new site and identifying problems

So if we take a look at the new site we can see we have some work to do.  Try adding a couple of courses to test the existing functionality.

All I did here was go to the Upcoming Courses link, select the All Courses View, then select the Datasheet view from the List Settings ribbon.  Here is what mine looks like:

2_UpcomingCourses

There are 3 workflows that come with this template:

  • Attendee registration
  • Attendee unregistration
  • Instructor reminder

I received an email confirmation to confirm that the instructor reminder is working as per the following:

3_instructorConfirm

Following further testing we can see that there are several issues that need cleaning up with this template if we want to get this into production:

Registration works but leaves a the model dialog open with a small version of the calendar.

No registration confirmation so the workflow needs some attention

Unregistering needs some work.  Here is the default form that opens when clicking to remove myself from the course:

4_unregisterForm

So this also needs addressing.

However the basic functionality all seems to work so let’s move into the next phase of this solution.

Onto Part 2 – Branding the site

 
Comments

I am experiencing the same problem on the "unregistration" page where the title says "Form loaded…". How did you correct?

Sorry I made it halfway through this series then things got a bit crazy – this is addressed in a later part that is yet to be written. I hope to have this completed soon. Thanks.
NC

Were you able to build this site. I have tried all the fixes to this template and I am not able to make it work. Please can you share your working template or atleast share details of how you cleaned up all the workflows and especially course registration list.
Thanks in advance.