Break And Change List Item Permission Using PnP JS In SPFx

Introduction

In SPFx many times we have a requirement like break permissions for the list, list items and etc for the particular users. for eg., we want to break permission of the list item for XYZ user.

so in this article, we will see how to implement break permission of the list items using PnP js so we can use this in SPFx.

Implementation

For the testing purpose of our PnP js query, we can use the SP Editor extension for chrome. After installation, you can check it in the developer tool.

So open developer tool(F12) > SharePoint Tab > PnP Js Console > At here you can write pnp queries and using ctrl + D we can test it.

Now we will implement the logic for break permission as below,

For eg. I want to set "Contribute" permission so we have to get a Role definition Id. you can set it as per your requirement. for more details to refer to this article.
Then get list by title and break list permission.
Get list item by id.
Break list item permission and then set permission. To add permission we require two parameters UserId and Role definition ID. The meaning of this method is to give permission to a specific user.

Setting list item permission to one user

import { sp } from "@pnp/sp/presets/all";
(async () => {
const { Id: ContributeDefId } = await sp.web.roleDefinitions.getByName('Contribute').get();
const list = sp.web.lists.getByTitle("Travel requests");
await list.breakRoleInheritance(false);
let permission = list.items.getById(1);
await permission.breakRoleInheritance(false);
await permission.roleAssignments.add(19, ContributeDefId);
console.log("Permission Changed")
})().catch(console.log)

Setting list item permission to multiple users

Here logic will be the same as above. just have to add one array with required user IDs and then will iterate this array and set the permissions.

import { sp } from "@pnp/sp/presets/all";
(async () => {
const { Id: ContributeDefId } = await sp.web.roleDefinitions.getByName('Contribute').get();
let usersForPermission = [9,17,19];
const list = sp.web.lists.getByTitle("Travel requests");
await list.breakRoleInheritance(false);
for (var i = 0; i < usersForPermission.length; i++) {
let permission = list.items.getById(9);
await permission.breakRoleInheritance(false);
await permission.roleAssignments.add(usersForPermission[i], ContributeDefId);
}
console.log("Permission Changed")
})().catch(console.log)

Output

After successfully running the query now we will check the permission. so first select the list item and click on the details panel from the right corner second last icon (above the list title). you can see the panel as below,

Click on manage access and then click on Advanced as below,

It will open another tab and in this, you can see all the list item level permission as below,

Summary

In this article, we have seen how to break and add permission to list items using PNP js.

Hope this helps! If it is helpful to you then share it with others. Give your valuable feedback and suggestions in the comments section below.

Sharing is caring!