Interact with list fields based on SharePoint Group

A very common question that is asked around the SharePoint community is about the ability to interact with item forms. These forms are how users view and edit items in a list. Changes to these forms can accomplished in a few different ways.

1. Use SharePoint Designer to create an editable New, Edit, or Display form
2. Edit the default New, Edit, or Display form pages using web parts.  (The edit page link for these forms can be found in the site settings via the gear menu.)
3. Using a customized Infopath form (for now…)

Using any of these options it is possible to edit the forms in both a basic and advanced way. If you are creating new forms with SP Designer you can edit the HTML of the form directly and have control over nearly everything that is displayed.  You can do some easy customizations that can be very helpful for the end user experience. One example involves the hiding of a column (such as status) on the default edit form. These are the steps to do this in SP designer:

1.  Create a new Edit Form using SP Designer on the corresponding list

2.  Locate the row that contains the column you want to hide and use HTML comment tags (<!– & –>) to comment out the row.

One big disadvantage of this approach is that as columns are added, removed, or renamed the form will not reflect these changes. You will need to manually go update the field changes on each custom form that you created. Also this scenario hides the field for everyone that goes to the list. 

What if we wanted to only hide the status column for users of a certain SharePoint group?

This can be accomplished using jQuery and one of the best libraries available, the jQuery SPServices library. The files that you need and the instructions to get started using this library can be found on codeplex. Some great examples of using these services can be found on the blog of the creator of this wonderful tool, Marc Anderson.

Continuing on the example above of hiding a status column, let’s work towards the requirement of hiding that column unless you are in the SharePoint group “Approvers”. 

Here is the script that you can put into a Script Editor web part on the default Edit Form:

<script language="javascript" src="https://sitecollection/SiteAssets/jquery-1.11.1.min.js">
    </script>

});
</script>

Script Breakdown

The first 3 javascript calls load the appropriate libraries on the page. These calls can also be placed at a higher level (such as the master page) so they do not need be called on every page. The download files for jQuery can be found here and the SPservices can be found in the link earlier in this post.

The next script section starts with the document.ready() which detects the state of readiness of the page for you. Code included inside of this will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

if(checkrole('Approvers')){
$("[id^=Status]").closest('tr').show();
}
else {
$("[id^=Status]").closest('tr').hide();
}

The if statements calls the checkrole function and passes along the group name that you want to check to see if a user is a part of. If the statement returns true it shows the status column and if it returns false it hides the status column. The lookup checks the page for ID’s that contain the word Status. You can use a browser development tool to inspect elements on a page to get their generated IDs. You should not take the section of the ID that is the GUID.

The last section of the script is the checkrole function. This uses the SPServices library and the SPGetCurrentUser function to return the users data. It then scans through the responseXML to find the group name and sets the variable to true.

function checkrole(groupname) {
    var IsvalidRet = false;
    $().SPServices({
        operation: "GetGroupCollectionFromUser",
        userLoginName: $().SPServices.SPGetCurrentUser(),
        async: false,
        completefunc: function (xData, Status) {

            if ($(xData.responseXML).find("Group[Name='"+groupname+"']").length == 1) {
                IsvalidRet = true;
            }
        }
    });
    return IsvalidRet;
}

The big disadvantage of this option is that hiding a column does not actually secure the column from the user, it just hides it on the form. If this user has access to this column in quick edit or datasheet view directly in the list they would be able to change it.

These are some options to get started with interacting with list forms after the announcement of the death of InfoPath and a great tool in SPServices that can take the SharePoint user experience to a new level.