Hide form fields using JQuery and SharePoint Web Services


There are many occasions when we need to hide certain form fields based on some permission / group settings. Well, there is an easy way of achieving this using a JQuery plugin called “SPServices” which is free to use.

Using this plugin, you can call any in built SharePoint web service, get the value retrieved by the web services and use it in your form easily.

In this example, I have three types of users for a specific list which are “Users”, “Moderators” & “Admin”. I would like to check the current user which group he belongs and based on that I am going to hide/show some fields.

First of all, Download the SPServices plugin from here and then open your form in Advanced Mode using SharePoint Designer 2010 and look for the following line:

<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">

Add the script for SPServices:

<script type="text/javascript" src="http://(YOUR SITE URL)/(SAVED FOLDER FOR SPSERVICES)/jquery.SPServices-0.6.2.min.js"></script>

and add the following code under that

<script type="text/javascript">
    $(document).ready( function ()
    {
                    var isUserOnly = false; //User group member only
            var isModerator= false;
            var isAdmin=false;
                    var MODERATORGROUP = "Moderators"; // SPGroup named “Moderators”
                    var ADMINGROUP = "Admin";  // SPGroup named “Admin”

                    $().SPServices
                    ({
                      operation: "GetGroupCollectionFromUser", //Calling GetGroupCollectionFromUser.asmx web service
                      userLoginName: $().SPServices.SPGetCurrentUser(), //Calling Current User
                      async: false,
                      completefunc: function(xData, Status)
                      {
                                        $(xData.responseXML).find("Groups").each(function() //Retrieving the values from Group method of Web Service
                                        {
                                             $(this).find("Group").each(function()  //Parsing through all the groups the current user belongs to
                                             {
                        //Checking whether Current User belongs to Admin Group

                                                  if(($(this).attr("Name").toLowerCase() === ADMINGROUP.toLowerCase()))
                                                    isAdmin = true;
                        //Checking whether Current User belongs to Moderators Group

                          else if(($(this).attr("Name").toLowerCase() === MODERATORGROUP.toLowerCase()))
                            isModerator=true; 

                        //If Current User does not belong to Moderators or Admin, then definitely a normal user

                          else
                            isUserOnly=true;
                                             });
                                        });
                         }
                   }); // Closing SPServices Method

                   if(isUserOnly)
                   {

                        //Hide fields as this user is Not a member of Modeartora or Admin Group

               jP.Form.readForm("http://teamradiant/sites/rfc/").Comments.hide();
               jP.Form.readForm("http://teamradiant/sites/rfc/").Approval.hide();
                    }
           if(isModerator)
            {
            //Hide Approval field if the current user belongs to Moderators Group

                jP.Form.readForm("http://teamradiant/sites/rfc/").Approval.hide();

            //Show Comments field if the current user belongs to Mdoerators Group

                jP.Form.readForm("http://teamradiant/sites/rfc/").Comments.hide();
            }
            if(isAdmin)
            {

            //Show both fields if the current user belongs to Admin group

                 jP.Form.readForm("http://teamradiant/sites/rfc/").Comments.show();
                 jP.Form.readForm("http://teamradiant/sites/rfc/").Approval.show();
            }

   });
</script>
After that save the Form, and check that it works!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s