SharePoint custom list form with Tab-style UI

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 :

  1. AllItems.aspx
  2. NewForm.aspx
  3. EditForm.aspx
  4. DispForm.aspx

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.

  1. Click Data View -> Insert Data view
  2. Select the Contacts list (I’ve created a list called my contacts with
    Contacts list type)
  3. In the Data Source Details window, select columns to include into the form.
  4. 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

Now lets modify this XSLT with some DHTML and JavaScript to make a tabbed UI.

For this task let’s use a very popular JavaScript library jQuery
to for our custom ui. There is a jQuery widget Tabs that we can use.

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:

  1. Include jQuery libraries in the custom list form HTML
  2. 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”

Here the “tab” interface we created can also be done using plain DHTML, without using jQuery. The idea is simple; by enhancing the SPD generated XSLT with additional javascripts and css we can create highly interactive data views and list forms.

Hope this helps!

About these ads

36 thoughts on “SharePoint custom list form with Tab-style UI

  1. Hello Arun,

    this is exactly what I was looking for. You did a great job. Thank you.

    I was wondering if it is possible to have multiple columns with fields in the form (I got a lot of items and I don’t like to have them one below the other)? What do you think? Can this be done? And if so, could you point me into the right direction?

    Kind regards,
    Waldo Schobben

    • Hi Waldo,
      Thanks for the comment.
      Yes, it is possible to have multiple columns as the way you are looking for. All you have to do is customize the XLST template dvt_1.rowedit or dvt_1.rowinsert ) with your HTML design, just like what I did here. Just paste your HTML design (a multi column table design, easy way) here and then insert SharePoint:FormField where you want the field control in that design.
      Let me know if you need any more help.
      Hope this helps!
      -Arun

  2. Hi Arun,
    First of all, thanks for your answer, but …
    I finally found some time to try out your example. I got into trouble creating the tab test page. I can not copy/paste your code and it is not very readable. Would it be possible to send me a complete working example, included with my previous question of multiple columns?

    I hope you can help me out with this.

    Thanks in advance.

    Kind regards,
    Waldo

    • Hi Waldo,
      Just uploaded some samples here. Please take a look.
      Samples are created for a list of template “Contact”. If you want to use these pages directly, you have to create a list of same template and and change the ListId of the DFWP in these pages to your list’s ID.
      Please try.

      • I’m sorry…u said you had uploaded sample code for this…where is that exactly…links?

        And, is this strickly SP 2010 solution or will it work MOSS 2007 (WSS 3.0)?

        Thanks!

      • Please ignore the link request…found the link “here”. Still curiosu about 2010 vs 2007 solution compatibility. Bill

  3. Hello Arun

    I didn’t get the “… 2.Modify the custom list form’s XSLT to include the Tag generating HTML.”
    What exactly do I need to do here?

    • Hi Bidy,
      When you add a “Custom List Form” using SPD into your page, what happens is SPD adds a Data Form Webpart (also known as Data View within SPD) with some default customizations. For a DFWP, this customizations are basically in the form of XSLT and we can customize the look and feel by modifying these XSLT using SPD itself. In my example what I did is, I blended the customization xslt with some additional HTML tags so that the resultant HTML can be handles by the jQuery tab widget.
      In simple english, I just wrapped my XSLT elements within some named DIV tags so that these DIVs can be shown as TABs by the jQuery widget.
      Hope this helps.
      -Arun

      • Hi Arun,
        is there anyway you could show the code so we can see how you modify the xslt elements, I´m having a hard time figuring out how to wrap the xslt elements within the div tags.
        Thanks,
        Elin

    • Custom HTML Tags in SharePoint
      To add custom HTML tags such as meta description, keywords, and titles, you will want to edit the page in SharePoint Designer. We first need to start be verifying the existing page and template are in good form and readable by SharePoint. Skipping this step can lead to erroneous error.
      1) Open SharePoint Designer
      2) Edit in Advanced Mode
      3) Goto Design View — This will test the pages and all problems denoted need corrected.
      4) Go to code view and add the custom Title in “asp:Content “ named “PlaceHolderPageTitle”. This should be the TITLE Content /TITLE, omit the title tags.
      5) META Description goes in the “asp:Content” named “PlaceHolderAdditionalPageHead”. This will be the actual HTML code.
      When I followed the directions provided by others, I had a small problem in the ASP which provided an accurate error by following steps 1-3.

      Shawn Zernik
      Internetwork Consulting

  4. Hi Arun,

    I have problem when my SharePoint:FormField is a datetime.
    I have many display bugs with only this kind of control.

    If you have a solution.

    Thanking you

    Adrien

  5. Hi,

    I could not get this to work. It keeps giving me a master page invalid error when i try to use your code on my page. Can you please help

  6. Arun,

    Thanks for the nice explanation, all is working perfectly, except for the datefields. I have a couple of date fields, the format is ok when nothing is filled in, when I select e date from the datepicker, the format of the field becomes very small (unreadable), any idea how to fix this issue?

    Thanks in advance

  7. First of all thank you very much for blogging this. in SP 2010 I’m now able to create beautiful forms with tabs and multiple columns etc.

    I’m now trying to do this in MOSS 2007 – Unfortunately its not calling the jquery, has anyone managed this ? It seems to be ignoring the placeholderadditionalpagehead.

  8. Hi Arun,

    I am not able to see tabs on the page even though I followed your example. Please send sample code to me. So that I will try and get back to you.

    Thanks,
    Vamsi

  9. Thanks for the post, I really need tabs on my custom field / type based (custom type = page) form. I have problems connect the custom type to the form, you did it with a list. Can u please let me know how I manage this?
    Thanks in advance!

  10. Hi,
    Lovely post. this is what I wanted in my project. thnks for the post.

    Please tell whether we can put same list in all 3 tabs thru DFWP.

    I want to show the same UI but single list form should be thr on all 3 tabs, and this would save in 3 diffrent rows as I would keep I feild unique.

    • Yes. In fact there is only only list from which the DFWP is sourcing data and we are adjusting HTML within the DFWP in such a way that it displays the list fields in tabs.

  11. But my all 4 tabs wud have same list feilds and I’ll keep 1 feild unique for each tab. And would save all 4 tabs data in 4 different rows in the same list.
    Also,I want to use a single SAVE/CANCEL button for each tab.

  12. Hey Arun,

    Great post! I was wondering, is it possible to have a single page with tabs where each tab can manipulate/save-to a different List?

    Thanks,

    Josh

  13. This is a great post! Unfortunately, I’m also having the same bad luck with the datepicker field. It is incredibly small and unreadable. I even tried creating a custom master page with almost no content. Still no luck. Any help would be greatly appreciated!

  14. I was able to do as you have instructed. Here is what I am trying to achieve. I have a master list and I have a child list. There is one to many relationship from master to child list. I want users to be able to input both master and child list information in separate tabs and I was able to do so using your technique. However, I want something similar for both view and edit forms as well. Any ideas??

  15. Hi – I read your tutorial above. It’s very helpful except for one thing – when I tried to place the various data fields, it adds more submit buttons. If I remove them, then the form does not work.

    Can you tell me how to make one button that will submit all of the data? Here is the same question on MSDN with photos:

    http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomization/thread/6276e6b1-4162-4600-a838-72946a48e41a

    I hope you can help me. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s