Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
intranet as a service

How to check user permission on a list or library in SharePoint Framework

If you are familiar with SharePoint Framework you must be aware that SPFx apps functions based on current user’s permission. But how do we know whether user have specific permission on a list or library to implement the functionalities like hide and show the buttons.  

For Ex: Display the add button in a web part only if current user has add permission in that list, how do we achieve this? At the end of this article you will get an answer for this. 

Before proceeding, please go through the below articles to get to know about building SharePoint Framework applications. 

How to build SharePoint Framework Applications? 

The following blog posts will help you for sure in detail about building SPFx applications, 

Build SPFx webparts with Angular 4 

Deep Dive into SPFx webparts configuration 

Build SPFx extensions 

Integrating SPFx apps with visual Studio 

As we are going with JSOM approach we need to load the required scripts for it in your SPFx solutions. To do so let’s load its dependency node modules and configuration setup. 

The below implementation will fit for all type of JS frameworks supported by SharePoint Framework web parts. 

Step 1: 

Go to your tsconfig.json file in the SPFx webpart project and make sure to add themicrosoft-ajaxand sharepoint types like below, 

"types": [ 

      "es6-promise", 

      "webpack-env", 

      "microsoft-ajax", 

      "sharepoint" 

    ], 

Step 2: 

Next step is to add the required node module packages to your project through package.json file, open the file and add the dependencies for Microsoft-ajax and sharepoint like below, 

"@types/microsoft-ajax": "0.0.33", 

"@types/sharepoint": "^2013.1.6" 

Now go to your npm command prompt and make sure that the terminal is pointing to your project directory and restore the newly added package dependencies by using the command npm install 

Example: E:\your project directory >npm install 

Now we have set all the dependencies the final step is right below. 

Here we are going to read the user’s EffectiveBasePermissions on a list or library using the JSOM objects and check the permission kind of user on that list. 

To load the scripts, we will be using SPComponentLoader.loadScript and load the JS references listed here in the same order,

• init.js, 
 MicrosoftAjas.js,  
• SP.Runtime.js, 
• SP.js,

Import the SPComponentLoader from @microsoft/sp-loader package. 

Permission Kinds 

There are lot of permission kinds available to check against the user, before proceeding next step you need to know all of them. Below is the list of Permission Kinds, 

• emptyMask 
• viewListItems 
• addListItems 
• editListItems 
• deleteListItems 
• approveItems 
• openItems 
• viewVersions 
• deleteVersions 
• cancelCheckout 
• managePersonalViews 
• manageLists 
• viewFormPages 
• anonymousSearchAccessList 
• open 
• viewPages 
• addAndCustomizePages 
• applyThemeAndBorder 
• applyStyleSheets 
• viewUsageData 
• createSSCSite 
• manageSubwebs 
• createGroups 
• managePermissions 
• browseDirectories 
• browseUserInfo 
• addDelPrivateWebParts 
• updatePersonalWebParts 
• manageWeb 
• anonymousSearchAccessWebLists 
• useClientIntegration 
• useRemoteAPIs 
• manageAlerts 
• createAlerts 
• editMyUserInfo 
• enumeratePermissions 
• fullMask

Below is the code snippet to achieve our end goal, here I have added a sample to check whether current user have add permission in a list. 

let siteColUrl = this.context.pageContext.web.absoluteUrl; 

    SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', { 

      globalExportsName: '$_global_init' 

    }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', { 

          globalExportsName: 'Sys' 

        }); 

      }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', { 

          globalExportsName: 'SP' 

        }); 

      }) 

      .then((): Promise<{}> => { 

        return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', { 

          globalExportsName: 'SP' 

        }); 

      }) 

      .then(() => { 

        var web, clientContext, currentUser, oList; 

        var thisPage = this; 

        clientContext = new SP.ClientContext(this.props.context.pageContext.web.absoluteUrl); 

        web = clientContext.get_web(); 

        currentUser = web.get_currentUser(); 

        oList = web.get_lists().getByTitle('ListTitle'); 

        clientContext.load(oList, 'EffectiveBasePermissions'); 

        clientContext.load(currentUser); 

        clientContext.load(web); 

        clientContext.executeQueryAsync(function () { 

          if (oList.get_effectiveBasePermissions().has(SP.PermissionKind.addListItems)) { 

            //If user have specific permission, your code execution will reach here where you can frame your business logics 

          } 

        }, 

          function (sender, args) { 

            console.log('Request failed ' + args.get_message() + '\n' + args.get_stackTrace()); 

          }); 

      })  

Finally, we were able to check the user permissions on a list/library in SharePoint Framework applications, now it’s your turn to frame the business logics for your application. 

If you have any questions/issues about this article, please let me know in comments.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.