From SharePoint with love

In my current organisation we're going to implement a new issue tracking system when our users needs help with IT-related issues. The idea is that the end users are going to fill out the SharePoint forms themselves instead of calling or e-mailing our support guys whom then have to enter it all into the system anyhow.

As with all organisations we have varying levels of computer knowledge among our users and this means that I need to make sure that even those that are more or less afraid of their computer can fill out the form properly.

Some of my previous attempts have included Flash-based tutorials, guides in PDF-form and hands-on sessions but none of these options are perfect for the job. The tutorial shows how it's done but it's cumbersome to follow it when you need to do it yourself. You can follow the PDF-guide at your own pace but it's still not perfect as you need to switch back and forth between it and the form. Hands-on is always great but it's easy to forget when you need to do it "for real".

This forced me to sit down and figure out a way to add the instructions on how to fill out the form to the actual form. It's not all that tricky and a fair share of people have most likely already done this (and perhaps even blogged about it, I haven't even checked as I wanted to figure it out on my own). Still – here's a short write-up for those of you that wants to give a try.

If you haven't created the list you want to work with you need to do that. The method is the same whatever the form you use (I think, I haven't tried every, single one ).

Next, open the list and the NewForm.aspx file (the actual form) in SharePoint Designer 2007:

Next up, select the form so that we can locate the table it's encapsulated in:

Select the first available TD tag from the left in the breadcrumbs of elements:

Insert two new columns to the right of the one we just selected (just repeat the following command twice):

Click inside the first of the new columns in order to select it. This can be a bit finicky but you should be able to do it:

Right-click the highlighted TD tag in the element breadcrumbs and select "Tag properties":

Specify it's width to 5 pixels and click OK. This is to separate the help text from the actual form. It can be done in other, more "proper" ways, but this gets the jobe done quite well:

Select the next column and open it's properties. Set the alignments to "Left" and "Top":

Keep the last column selected and insert a new web part zone:

If you did it right it will look like this:

Save your new design (click Yes at the warning):

Switch to your list in the browser and create a new entry. The page will look exactly the same.

In order to edit it we need to manually invoke the edit mode as described here by Cristophe over at Path to SharePoint. Remove all the crap after "NewForm.aspx" and add "?ToolPaneView=2". In my case that ends up as http://hermes.spirex.se/labb/xform/Lists/Issues/NewForm.aspx?ToolPaneView=2. You should now see the form and the new web part zone we added earlier:

Here you can add any kind of web part you like but I would recommend the content editor web part – at least that's what I'm using as it's quite flexible:

(In this case the actual help text isn't doing a lot of good though. )

Format the web part to your liking and you might want prevent your users from closing or removing the help as well just to prevent mistakes.

That should get you going but if you have any questions feel free to post them in the comments and I'll do my very best to help you out. Also, if you spot any errors or have ideas on how to do this another way, just hit the comments.

Thanks for reading.

 

– Martin Edelius

This entry was posted on Sunday, December 7th, 2008 at 2:16 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.