SharePoint 2010 Apps for n00bs – Forms

By this point in you should’ve seen the default form engine that SharePoint provides already and most likely you would’ve thought “not bad, but I bet it doesn’t do exactly what I want it to do”. You’d probably be right; the normal engine just tries to best-guess the presentation of the fields and other screen elements based on the meta-data of your list – the field sizes, descriptions, types etc. We saw some forms already; here’s one:

Anyway, the good news is that you can build your own forms if you want - InfoPath forms in this example, and then use those instead of the out-of-the-box default forms. A nice thing about InfoPath forms in general is that they’re cross-platform; in that they can work on the web or in a rich-client if you so wish, and also you can auto-generate forms from SharePoint lists so it doesn’t take much work to get something up & running. Multiple forms can be associated with a single list but we’re just going for the one for now, because we’re n00bs.

Editing Thy Forms

If you want to edit just the normal SharePoint provisioned forms, you can do so. Open SharePoint Designer again & navigate to the list you’re interested in:

These forms are provisioned with your list automatically, meaning when you create a list, these files are created too for this list-type. Other form templates get previsioned with other list-templates but that’s waaaaaay too advanced for today. The point is that if you’re feeling brave you can just directly edit these files that exist already for your list; doing so won’t affect anything other list.

Click on one of the forms, and the SharePoint Designer editor will load it in design mode – from here you can edit it in the GUI or the underlying code…

…although if you really want to hack the page, you’ll have to do so in “advanced mode” which is basically a button that says “I’m not a n00b – let me break my site if I so wish”, but as you’re reading this guide, you probably are a n00b for now so I’d not recommend it normally. There’s a code-view for editing the raw ASPX and everything, just like in Visual Studio.

Our First InfoPath Form

Anyway all of that’s too complicated - we don’t want to modify the existing forms, we want to create new forms with InfoPath to override the old completely. We’ll start with the “New Sale” form because, let’s be honest; it’s a bit bland. Plus we want to through on some extra validation in there (i.e. don’t sell what you don’t have).

So in the list setting in SPD, click the “Design Forms in InfoPath”, then click on “item”. The reason it says “Item” is obviously significant (we’re talking about the “content-type” for this list) but that, like many other areas isn’t for today. Edit the “item” content-type.

By the way, in case you hadn’t figured it out yet you obviously need InfoPath Designer installed (and the enterprise edition of SharePoint 2010). Clicking this button will open a new form in InfoPath Designer and pre-populate all the list-fields for you, which is awful friendly I thought.

On the right we see a list of fields available to us, and the main bit is the auto-generated, best-shot version InfoPath Designer has of it just to get started with. We however want to improve this.

First, we want to get rid of “sale confirmed” from this form – it’s something the workflow fills in, not the user so select the bottom row like so:

…and hit the delete key. Goodbye field we don’t want to edit.

Next, we want some validation on “customer email” to actually check we’re entering a real email address. Click the field, then add a rule like so:

This will add the following rules:

…and that’ll do; in just a few clicks we’ve significantly improved on the default SharePoint form for our own InfoPath-generated one.

The only thing left to do now is publish it to our SharePoint list (specified in the bottom-right corner of InfoPath). This is a fairly unemotional affair – click on the “file” tab, then “Quick Publish”.

Doing so will show this:

Done! If you look at the “forms” view of your list now in SPD, you’ll notice a few more files in addition to the forms you had before. These are basically ASPX wrappers to InfoPath form you’ve created here, and these will be set to be the default for your list – all by magic.

So now when we go to our sales list and click “New”, we get our much-nicer form…

Everything works as expected – all the hard work is actually done by the InfoPath form wrapped into an ASPX form. For the record InfoPath forms can be integrated into and interacted from all sorts of things; emails, apps (and app-panels), pages, and mobile phones, and more – it’s a very powerful form technology.

Wrap-Up

We’ve looked at 2 ways of customising forms here; the first one by editing the out-of-the-box SharePoint built forms in SharePoint Designer but also very briefly at the InfoPath route of replacing the list forms for our own InfoPath built ones. InfoPath is a powerful form engine once you get to know it, and easier too – play around with it; we just skipped over the very basics for today to get used to the idea of being able to customise forms, but it is a fully-featured form engine with all sorts of exotic goodness you can build into your forms for validation, display, etc.

Happy SharePointing!