Tuesday, August 9, 2011

Change look and feel of SharePoint Page using JQuery or Apply business logic to SharePoint List Forms using JQuery


As SharePoint 2010 gets popular, more and more scenarios are coming which most of required customization.
As we know SharePoint 2010 provides many options to customize the SharePoint Website, some of listed below…
 
1.    Visual Studio Development
2.    SilverLight Devlopment
3.    ECMA Script Development
4.    JQuery


In this post I am exploring the JQuery Development possibilities in SharePoint 2010.
As jQuery is a fast and concise JavaScript Library. We can easily give dynamic look to SharePoint Website and can also add custom business logic.
Let start the demonstration….

Take a scenario that we have to create Employee Registration Form with Tabular look and also enable disable tabs according to check box or radio button selection.

1.    First of all Download JQuery from jqueryui.com

2.    Extract downloaded zip file and Copy all files into SharePoint Site (You can copy all files to Document Library or Can do Drag and drop using SharePoint Designer)




3.    Add following JQuery References to master page before </head> tag.

 <!--JQuery References --> 
<link type="text/css" href="jquery-ui-1.8.15.Redmond/css/redmond/jquery-ui-1.8.15.custom.css" rel="stylesheet" />     
<script type="text/javascript" src="jquery-ui-1.8.15.Redmond/js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.15.Redmond/js/jquery-ui-1.8.15.custom.min.js"></script>



4.   Create SharePoint List.
      For demo purpose I have created Employees List and added 5-8 columns.

5.    Create a new list Form of type New Item.(You can set it as default)


6.   Edit List form in Advanced Mode.







7.    As we want to display form in tabular, so we have to add JQuery Tab schema as follows ..


<!-- Tabs -->
<h2 class="demoHeaders"> Employee Registration Form</h2>
<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>
        <li><a href="#tabs-5">Contractor</a></li>
        <li><a href="#tabs-6">Desktop</a></li>
        <li><a href="#tabs-7">Laptop</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>

8.    Modify JQuery Schema, Add columns to respective tab DIV;


 9.    Open newly create list form in browser; Select edit page from Page Tab.
        Add "HTML Form Web Part", go to WebPart properties; add following code using "Source Editor".


<script type="text/javascript">
            $(function(){
                // Tabs
                $('#tabs').tabs();                           
            });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        //debugger;
        $('#tabs').tabs("option", "disabled", [3, 4, 5, 6]);
        $('input:radio').each(
                  function () {
                      this.onclick = function () { RadioBtnEvent(this) };
                  }
              );
        $('input:checkbox').each(
                  function () {
                      this.onclick = function () { CheckBoxEvent(this) };
                  }
              );
    });

    function RadioBtnEvent(RedioBtn) {
        if (RedioBtn.parentElement.title == "New Hire") {
             if (RedioBtn.checked) { EnableTab(3); DisbleTab(4); }
            else { DisbleTab(3); }
          
        }
        else if (RedioBtn.parentElement.title == "Contractor") {
             if (RedioBtn.checked) { EnableTab(4); DisbleTab(3); }
            else DisbleTab(4);
          
        }else {
            DisbleTab(5);
            DisbleTab(6);
        }
    }

    function CheckBoxEvent(CheckBoxCtrl) {
        if (CheckBoxCtrl.parentElement.title == "Desktop") {
           if (CheckBoxCtrl.checked) EnableTab(5);
            else DisbleTab(5);
        }
        else if (CheckBoxCtrl.parentElement.title == "Laptop") {
           if (CheckBoxCtrl.checked) EnableTab(6);
            else DisbleTab(6);
        }
      
    }

    function EnableTab(TabIndex) {
        $('#tabs').tabs('enable', TabIndex);
    }

    function DisbleTab(TabIndex) {
        $('#tabs').tabs('disable', TabIndex);
    }
</script>

10.    Output

Conclusion: We can use JQuery in SharePoint 2010; And it takes less time to use JQuery in SharePoint but more time to post a blog on it.

2 comments:

  1. Great its working fine for me..........
    and I was expecting the same..!!!

    Thanks & regards
    Vishal Wattamwar

    ReplyDelete
  2. This is a good,common sense article.Very helpful to one who is just finding the resouces about this part.It will certainly help educate me.
    ----------------------------------------------------------
    New Style Wedding Dresses
    Column Wedding Dresses
    Wedding Dresses with Sleeves
    New Style Flower Girl Dresses

    ReplyDelete