Andrey Markeev on SharePoint

Tabs for fields in SharePoint

October 22, 2012

You can tabify fields in list forms using InfoPath, via CEWP and jQuery, or leveraging RenderingTemplate. All these approaches have their pros and cons, and probably you would prefer one of them, depending of your current skills and experience.

But before you do this, consider the following disadvantages:

  • InfoPath is not supported for SharePoint 2013 Workflow forms.

    And creating tabs with InfoPath is anyway far from being smooth: you have to duplicate whole views in order to create tabs, so once something changes in "common" area, you have to maintain it across all the duplicated views. Not mentioning notorious InfoPath deployment and rendering issues :)

  • jQuery solutions are slow and fragile.

    Usually you're able to see initial, non-tabbed version for a moment, before jQuery will push it into tabs.

    Also, fields are usually retrieved by their display name, so once display name changes - your solution is broken. Ok, there is a walkaround, you can retrieve display name by internal name through a webservice. But it is slow, especially when you have tens of fields...

  • RenderingTemplate + ListFieldIterator approach is very close to perfect (I've been using it successfully lately), but it will not work in Office365 and it requires C# skills.

Recently I realized, that there is at least one more decent way to do it.

The idea is to use SharePoint Designer customized list forms in conjunction with EasyTabs by Christophe Humbert.

Javascript is still involved, however no problems with field display names. There are some other inconveniences, but anyway the approach is worth considering, IMO.

How to do it?

Quite easy, really. Only 5 steps.

  1. Open your list in SharePoint Designer and create custom list form.
  2. Copy-paste DataFormWebPart several times
  3. Select fields for first and second DFWP
  4. Remove unnecessary markup
  5. Add EasyTabs on the page

Let's go through the steps.

To create custom list form, go to your list in SharePoint Designer and press "New.." button under Forms section. Select Display form and give it a name:

Once you created custom list form, go to its editor, find DataFormWebPart, select it, copy and paste it to the bottom of the page.

At this point, you just have two identical webparts on the page.

Now select and remove half of the fields from the first webpart, and another half - from the second webpart. As a result, you will see something like this:

So we have two different webparts. Each webpart will be displayed in one tab.

Now you need to perform a small trick in order to make it work with EasyTabs. The point is, EasyTabs only work with webparts which have chrome. To fix it, save current state of the form, then re-open it in Advanced Mode, switch to Code tab, find WebPartZone control and remove FrameType attribute:

Ok, now you can switch back to Design mode, and change ChromeType to "Default" for both DataFormWebParts:

In Tag Properties editor, you should also set Title for your webpart, i.e. "Tab 1". This will be the title of the tab.

Now, open the form in browser (just click "Preview in Browser" on Home ribbon tab), switch page to Edit mode (Site Actions -> Edit Page), and add EasyTabs code, as it described on the EasyTabs project page.

After followed Christophe's instructions, I've got the following result:

Like it?

About me

I'm SharePoint MVP, published author, frequent speaker, opensource projects creator and online expert.

I'm one of the top 10 experts on SharePoint StackExchange:

profile for omlin at SharePoint, Q&A for SharePoint enthusiasts

You can learn more about me on LinkedIn and Facebook.

Want to follow?

Subscribe to RSS!


Blog archive