Forms › Documentation › Personalize SharePoint forms for user groups

Personalize form based on user group in SharePoint or Azure AD (Office 365)

This article will show you how to create custom forms for users of different groups with Graph API. Some ways are easier than others, but we want you to see all available options.

Note

Also, check out routing based on Azure AD groups and users available out of the box and without any code!

Routing based on SharePoint security groups

This is the easiest option to customize forms for a user group. All you need to do is to create a new Form Set, and select which groups will be redirected to it:

Forms for groups

Then the users of this group will automatically redirect to it, all the others will still see only the default form.

For a practical example of how to customize forms for a specific SharePoint group, check out add personal form for creating and tracking tickets to any SP page.

Routing based on Azure AD (Office 365) groups

You can use custom routing and Microsoft Graph client to retrieve Office365 groups and check current user’s membership.

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’ll need 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"

First of all, create a new Form set:

New form set

Copy its Form Set ID:

Copy Form Set ID

Finally, add custom routing and specify rules for redirection to this new form set:

Custom routing

We check the user’s groups and only redirect user to the Form if they belong to the HelpDesk Agents group, using the following code, just replacing Form Set ID with the one that we’ve copied on the form:

return graph.me.memberOf().then(function(groups) {
   if (groups && groups.length) {
      for (var i = 0; i < groups.length; i++) {
            if (groups[i].displayName === 'HelpDesk Agents')
               return '--- Form Set ID ---'
      }
   }
});

Show/hide forms sections based on Azure AD (Office 365) groups

Another option that you have is not to design a separate Form Set, but instead hide and show elements based on user’s group membership. You still need to configure Microsoft Graph client as described in the previous section.

Then, you can use the following code to first hide some fields, and then show them if user belongs to a specific group:

function showHideFields() {
   var userGroups = [];
   graph.me.memberOf().then(function(groups) {
      for (var 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(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();
});

For an example of how to use PnPjs library and SharePoint groups to achieve the same result, please, check out - display specific sections of SharePoint form conditionally based on user’s membership.