Thursday 25 October 2012

Jquery for Tabbed Navigation in Sharepoint Custom List forms

Jquery Tabs for sharepoint custom list form:

This post is to divide custom list form in to jquery tabs.

Using this tab navigation we can also reduce veritcal scrol and also achieve our business functionality.

It is a OOB approach without Infopath and object model

Below are the steps:

1.       Download Jquery from Jquery.com

















2.       Add this to Sharepoint All files Folder or Site Assets.
3.       Create you list
4.       Open this list in sharepoint Designer and Create new Custom Form (Newform.aspx)

5.       Add the Following Tab code in your Custom form

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Personal</a></li>
        <li><a href="#tabs-2">Contact</a></li>
        <li><a href="#tabs-3">Office</a></li>
        <li><a href="#tabs-4">New Hire</a></li>
       
              </ul>
    <div id="tabs-1">
                   <table border="0" cellspacing="0" width="100%">

                   </table>
              </div>
    <div id="tabs-2">
                   <table border="0" cellspacing="0" width="100%">

                   </table>
              </div>
    <div id="tabs-3">
                   <table border="0" cellspacing="0" width="100%">

                   </table>
              </div>
</div>

6.       Cut the Column <Tr> from you list and paste under tabs table.

7.       Save this form and preview in browser
8.       Edit this page after clicking page tab
9.       And add two HTML form web parts on that page
10.       Edit first html web part properties and click source editor button, it will open a window copy and paste the jquery and CSS reference in this window.

In my case I have added this jquery folder to Site Assets.

<link type="text/css" href="SiteUrl/SiteAssets/jquery-ui-1.8.18.custom/css/redmond/jquery-ui-1.8.18.custom.css" rel="stylesheet" />    
<script type="text/javascript" src=" SiteUrl /SiteAssets/jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src=" SiteUrl /SiteAssets/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
            $(function(){
                // Tabs
                $('#tabs').tabs();   
            });
</script>
Note- You can also add this script below your Head tad in Master page if you can access Master page
11.       Save the page and Stop editing your Tabs are ready nowJ
12. Final view would be like this:

Columns are divided in to Jquey tabs you can also change the look and feel of list form

The above approach is full OOB and Client side no server hit on clicking tabs(As in case of infopath on every clik there is a post bak occurs )


Thanks!


2 comments:

  1. Hi, does this work for SharePoint 2013

    ReplyDelete
  2. nice post ankur, i have one issue- when i put tr/td inside tab div under table, in form its coming outside..and tabs are not working, any idea?

    ReplyDelete