How to display specific sections of SharePoint form conditionally based on user’s SharePoint groups

From this article, you will know how to manipulate fields dynamically depending on groups the current user belongs to. This approach is an alternative to the form sets and can be helpful in cases when forms for different groups are almost identical. For instance, when you need to hide a few fields from all users except the users of a certain group.

Assume you need to design an expense approval form. The approval process requires feedback from users who belong to Administrators and Managers groups. An administrator should not see a comment left by a manager. And a manager should not be able to edit a comment posted by an administrator.

Note

Achieve the same functionality with O365 groups instead of SharePoint groups with Personalize form based on user group in Azure Ad or Office365 article.

Edit Form

We set all fields available to employees on Edit Form to the read-only state since their values should not be changed after the item creation.

Read only

Since the fields available to managers and administrators only should be hidden from regular users, we put them into Grid containers. Thus, instead of hiding each field separately, we’ll hide the Grid containers. To be able to hide the grid containers via code, we assign them unique CSS-classes, e.g. ‘manager-section’.

CSS Class

JavaScript

To check if the current user belongs to a certain group, we use PnPjs library that is built into Plumsail Forms. Depending on the user’s membership, we hide or disable specific sections.

function showHideFields() {

    // get all groups the current user belongs to
    var userId = _spPageContextInfo.userId;
    var userGroups = [];
    pnp.sp.web.siteUsers.getById(userId).groups.get()
    .then(function(groupsData){
        for (var i = 0; i < groupsData.length; i++) {
            userGroups.push(groupsData[i].Title);
        }

        //check if the user is a member of Administrators user group
        if (userGroups.indexOf('Administrators') >= 0) {
            //Enable fields
            fd.field('AdministratorFeedback').disabled = false;
            fd.field('AdministratorComment').disabled = false;
        }

        //check if the user is a member of Managers user group
        if (userGroups.indexOf('Managers') >= 0) {
            //Show grid container
            $('.manager-section').show();
        }
    });
}

fd.spRendered(function() {

    //Turning fields available to administrators only into read-only state
    fd.field('AdministratorFeedback').disabled = true;
    fd.field('AdministratorComment').disabled = true;

    //Hiding the grid containig fields available to managers only
    $('.manager-section').hide();

    //call function on form load
    showHideFields();
});

Here is the demonstration of the Expense Approval Form.

Dynamic Form