In my “Tabbed SharePoint page” experiment my aim is to build a tabbed data entry form for my Contact List.
In my development site, I have a contact list named My Contacts
Figure 1 : Contact List
This list has OOB list forms :
Form pages (NewForm, EditForm and DispForm pages) basically contain a webpart named ListFormWebPart. This is the control that renders the form views on the pages. But the problem with this webpart is, it is not customizable, even with SharePoint Designer.
For a more customized look and feel we have to go for another webpart called called DataFormWebpart (DFWP). Unlike ListFormWebpart, the DataFormWebpart is highly customizable using SPD. There are lots of articles published already on customizing DFWP.
Here in our case, I want to make a custom data entry form for my Contacts List with a Tabbed user interface. I want the page to have 3 tabs, Contact, Location and Notes.
So I am starting with a blank ASPX page created using SPD.
Figure 2: Plain ASPX page
This page has nothing in it except basic HTML tags, For getting the same look and feel of my development site, I can attach it with site’s default master page.
Setting up a Data Form webpart
Now lets add a new DFWP to the page. In SharePoint designer, you can add a DFWP to your page either by Insert-> SharePoint Controls ->Custom List Form or by Data View -> Insert Data view. First option lets you add a DFWP formatted exactly as OOB ListFormWebpart. In the second option lets you apply more customizations while adding DFWP.
There are differences between both approaches. We’ll discuss about them sometimes later. For this experiment, both approaches are fine since we are concerned about only the “look n feel” of the form.
- Click Data View -> Insert Data view
- Select the Contacts list (I’ve created a list called my contacts with
Contacts list type)
- In the Data Source Details window, select columns to include into the form.
- In the Insert Select fields as…select New Item Form.
Figure 3 : Selecting columns to include in the DFWP
This adds the DFWP as shown below. Take a look at the code behind the designer. We can see that DFWP has a property named Xsl which is responsible for building the UI using XSLT. Any customization on the form’s UI is in fact the customization of this XSLT. Within this XSLT, actual form elements are defined as a template named <xsl:template name=”dvt_1.rowedit”> (or <xsl:template name=”dvt_1.rowinsert”>, if you have added form by Data View -> Insert Data View).
This is the area where we have to add our own extra customization to make the generated UI look like a tabbed page.
Figure 4 : XSLT template for rendering Form view
Installing jQuery library.
Being in SharePoint world, easiest deployment of jQuery library in our site is uploading all the script files into a document library. Once this is done, any page can refer it using <Script> tag.
Figure 5 : jQuery scripts uploaded into Document library
Tab Test Page
Just to make sure you are getting the tabbed page within the SharePoint site, create a sample page just using the jQuery tabs, as shown below. For adding script reference, use content placeholder PlaceHolderAdditionalPagehead just to make sure the reference comes in head section of the rendered html.
Figure 6 : Test page
Figure 7 : Test page (view)
Click on each tabs and make sure it is working fine.
Combining Tabs with XSLT of DFWP
Now take a close look at the HTML. You can see each tab is in fact a DIV tag. Whatever content youn want to include in the page , you have to enclose them here in these DIV areas.
My aim is to combine this “tab-generating” html with the XSLT of my custom list form. I have 2 steps to achieve this:
- Include jQuery libraries in the custom list form HTML
- Modify the custom list form’s XSLT to include the Tag generating HTML. Enclose the SharePoint form fields inside corresponding DIV tags so that they are visible only on that tab when viewed on the browser.
Figure 8 : tab scripts mixed with DFWP’s XSLT
That’s it, we have a nice tabbed page ready for data entry!
Figure 9 : Contact list with Tabbed “New Form”
Hope this helps!