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
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
EasyTabs by Christophe Humbert.
There are some other inconveniences, but anyway the approach is worth
How to do it?
Quite easy, really. Only 5 steps.
- Open your list in SharePoint Designer and create custom list form.
- Copy-paste DataFormWebPart several times
- Select fields for first and second DFWP
- Remove unnecessary markup
- 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: