Tabify Your SharePoint Forms

Mark Rackley

by Mark Rackley on 12/3/2015

Share this:
Print

Article Details

Date Revised:
12/4/2015

Applies to:
Content Editor Web Part, jQuery, jQuery UI tabs, sharepoint forms


Sponsored by


Tabify… Tabify? Is that a word? Spellcheck says no, but there are plenty of Google search results that use the word, so we’ll go with “maybe”.

Anyway, I’ve got a couple of blog posts that have been quite popular; one for placing SharePoint Web Parts into jQuery UI tabs (http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/) and the other for modifying the out of the box SharePoint forms (http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/). It struck me, why not combine these two posts and create a simple script that would allow users to easily place their fields in a SharePoint form into jQuery UI tabs without the need to write any HTML templates or even specify which fields to move.

So that’s what I did.

Using the script in this blog post, you can take any of your SharePoint forms and break them up into tabs. This way you don’t have that one long, ugly, un-styled SharePoint form that drives users crazy. Now you’ll have a well-organized, stylized form that drives users crazy. :-)

Add tabs to a SharePoint form

So, let’s walk through this. The steps you’ll need to follow should be super easy if you’ve ever used one of my previous solutions:

  1. Take the sample script below and tweak as necessary (I promise, it’s easy).
  2. Upload the script to a document library in SharePoint.
  3. Put a Content Editor Web Part on the SharePoint Form in question.
  4. Link the Content Editor Web Part to the script you uploaded in step 2.
  5. Ta.. and… da…

The Script

Below is the script you’ll upload to your document library. The only thing you need to do is specify the titles of the tabs you want and the number of fields you want in each tab in the “tabInfo” array. You can have as many or as few tabs as you like. In addition, if there are any “leftover” fields they will just appear below the tabs. That’s all there is to it. If you want to change the order of your fields, you’ll need to do that from SharePoint itself.

For instance, if you wanted to have 5 tabs with 3 fields each, you would configure the “tabInfo” array as follows

var tabInfo = [
            {title: "Title 1",size:3},
            {title:"Title 2",size:3},
            {title:"Title 3",size:3},
            {title:"Title 4",size:3},
            {title:"Title 5",size:3}
        ];

<script  type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link  type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/ui-lightness/jquery-ui.css" /> 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 

<script type="text/javascript" src="//www.markrackley.net/scripts/jquery.HillbillyTabify.min.js?rev=1"></script> 

<div id="HillbillyTabifyDiv"><ul id="HillbillyTabify"></ul></div>

<script type="text/javascript">

    jQuery(document).ready(function($) {
        //the example below creates 3 tabs, you can create as many tabs as you'd like by adding additional objects.
        //"Title" is the title of the tab and "size" is the number of fields to show in that tab
        //If there are any remaining fields they will appear as normal below the tabs
        var tabInfo = [
            {title:"Title 1",size:3},
            {title:"Title 2",size:4},
            {title:"Title 3",size:5}
        ];
            
        HillbillyTabifyForms(tabInfo);
        
    });

</script>

The Video

Still confused? Just watch the video below, which walks you through the entire process.

You can view Mark’s original blog here: http://www.markrackley.net/2015/12/03/tabify-your-sharepoint-forms/


Topic: JavaScript and jQuery

Sign in with

Or register