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

From this article, you’ll learn how to dynamically manipulate fields depending on the current user’s membership.

This approach is an alternative to Form Sets and can be used when forms for different groups are almost identical. For example, it allows you to hide several fields from all users except a specific SharePoint group.

Follwing this guide will allow you to achieve behavior similar to this:

Dynamic Form

Design Form

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

fd.spRendered(() => {
    // disabling the fields to make them read-only
    fd.field('EmployeeName').disabled = true;
    fd.field('ExpenseAmount').disabled = true;
    fd.field('ExpenseDate').disabled = true;
    fd.field('ExpenseReason').disabled = true;
});

To make the certain fields only available to managers and administrators, put them into Grid containers. By assigning each Grid a unique CSS-class, e.g. ‘manager-section’, you can hide the containers instead of hiding each field individually.

CSS Class

Check user membership in SharePoint security groups

To check if the current user belongs to a certain SharePoint group, use the PnPjs library available in Plumsail Forms by default.

Add the following code to the form to show/hide and enable/disable specific form sections depending on the current user’s membership in the SharePoint security group:

function showHideFields() {
    // get all groups the current user belongs to
    let userId = _spPageContextInfo.userId;
    let userGroups = [];
    pnp.sp.web.siteUsers.getById(userId).groups.get().then(groupsData => {
        for (let 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(() => {
    // turning fields available to administrators only into read-only state
    fd.field('AdministratorFeedback').disabled = true;
    fd.field('AdministratorComment').disabled = true;

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

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

Check user membership in Azure AD (Office 365) groups

To check if the current user belongs to a certain Azure AD group we use Microsoft Graph client.

Important

In order to retrieve user profile properties with Graph API, you first need to make sure that the Microsoft Graph client has the permissions to check if the current user belongs to specific 365 groups of your tenant.

For this, make sure to install Microsoft 365 CLI (you have to install Node.js first in order to do that).

Connect it to your Office 365 tenant from the command line:

m365 login

And then use the following line to give Microsoft Graph the required permissions:

m365 spo serviceprincipal grant add --resource "Microsoft Graph" --scope "Directory.Read.All"

Use the following code to show/hide and enable/disable specific form sections depending on the current user’s membership in the Azure AD group:

function showHideFields() {
   let userGroups = [];
   graph.me.memberOf().then(groups => {
      for (let i = 0; i < groups.length; i++) {
            userGroups.push(groups[i].displayName);
      }

      // 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(() => {
   // turning fields available to administrators only into read-only state
   fd.field('AdministratorFeedback').disabled = true;
   fd.field('AdministratorComment').disabled = true;

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

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