Break And Change List Item Permission Using PnP JS In SPFx

Published Mar 17 2021 07:38 AM 2,953 Views
Senior Member

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,
 
  1. 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. 
  2. Then get list by title and break list permission. 
  3. Get list item by id. 
  4. 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:

        

Single user.png

 

 

Setting list item permission to multiple users:

 

Multiple users.png

 

 
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. 
 
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,
 
FirstOP.png
Click on manage access and then click on Advanced as below,
 
SecondCropped.png

 

 

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

Third.png 

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!
%3CLINGO-SUB%20id%3D%22lingo-sub-2207458%22%20slang%3D%22en-US%22%3EBreak%20And%20Change%20List%20Item%20Permission%20Using%20PnP%20JS%20In%20SPFx%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2207458%22%20slang%3D%22en-US%22%3E%3CH2%20id%3D%22toc-hId--499199293%22%20id%3D%22toc-hId--499199293%22%3EIntroduction%26nbsp%3B%3C%2FH2%3E%0A%3CDIV%3E%26nbsp%3B%3CDIV%3EIn%20SPFx%20many%20times%20we%20have%20a%20requirement%20like%20break%20permissions%20for%20the%20list%2C%20list%20items%20and%20etc%20for%20the%20particular%20users.%20for%20eg.%2C%20we%20want%20to%20break%20permission%20of%20the%20list%20item%20for%20XYZ%20user.%3CDIV%3E%26nbsp%3B%3CDIV%3Eso%20in%20this%20article%2C%20we%20will%20see%20how%20to%20implement%20break%20permission%20of%20the%20list%20items%20using%20PnP%20js%20so%20we%20can%20use%20this%20in%20SPFx.%26nbsp%3B%3CDIV%3E%26nbsp%3B%3CH2%20id%3D%22toc-hId-1988313540%22%20id%3D%22toc-hId-1988313540%22%3EImplementation%3C%2FH2%3E%0A%3CDIV%3E%26nbsp%3B%3CDIV%3E%3CSPAN%3EFor%20the%20testing%20purpose%20of%20our%20PnP%20js%20query%2C%20we%20can%20use%20the%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Fsp-editor%2Fecblfcmjnbbgaojblcpmjoamegpbodhd%3Fhl%3Den%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3ESP%20Editor%20extension%20for%20chrome%3C%2FA%3E%3CSPAN%3E.%20After%20installation%2C%20you%20can%20check%20it%20in%20the%20developer%20tool.%26nbsp%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CDIV%3E%26nbsp%3B%3CDIV%3ESo%20open%20developer%20tool(F12)%20%26gt%3B%20SharePoint%20Tab%20%26gt%3B%20PnP%20Js%20Console%20%26gt%3B%20At%20here%20you%20can%20write%20pnp%20queries%20and%20using%20ctrl%20%2B%20D%20we%20can%20test%20it.%3CDIV%3E%26nbsp%3B%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22SP%20Editor.png%22%3E%3CIMG%20%2F%3E%3C%2FSPAN%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3ENow%20we%20will%20implement%20the%20logic%20for%20break%20permission%20as%20below%2C%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CDIV%3E%0A%3COL%3E%0A%3CLI%3EFor%20eg.%20I%20want%20to%20set%20%22Contribute%22%20permission%20so%20we%20have%20to%20get%20a%20Role%20definition%20Id.%20you%20can%20set%20it%20as%20per%20your%20requirement.%20for%20more%20details%20to%20refer%20to%3CSPAN%3E%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fsecurity%2F%23role-definitions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ethis%3CSPAN%3E%26nbsp%3Barticle.%26nbsp%3B%3C%2FSPAN%3E%3C%2FA%3E%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%3EThen%20get%20list%20by%20title%20and%20break%20list%20permission.%26nbsp%3B%3C%2FLI%3E%0A%3CLI%3EGet%20list%20item%20by%20id.%26nbsp%3B%3C%2FLI%3E%0A%3CLI%3EBreak%20list%20item%20permission%20and%20then%20set%20permission.%20To%20add%20permission%20we%20require%20two%20parameters%20UserId%20and%20Role%20definition%20ID.%20The%20meaning%26nbsp%3Bof%20this%20method%20is%20to%20give%20permission%20to%20a%20specific%20user.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3ESetting%20list%20item%20permission%20to%20one%20user%3A%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Single%20user.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F264762iD3B462C2ACF88BC5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Single%20user.png%22%20alt%3D%22Single%20user.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3ESetting%20list%20item%20permission%20to%20multiple%20users%3A%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Multiple%20users.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F264763i84749D19C5917FD1%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Multiple%20users.png%22%20alt%3D%22Multiple%20users.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3EHere%20logic%20will%20be%20the%20same%20as%20above.%20just%20have%20to%20add%20one%20array%20with%20required%20user%20IDs%20and%20then%20will%20iterate%20this%20array%20and%20set%20the%20permissions.%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CDIV%3E%3CSTRONG%3EOutput%3C%2FSTRONG%3E%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3EAfter%20successfully%20running%20the%20query%20now%20we%20will%20check%20the%20permission.%20so%20first%20select%20the%20list%20item%20and%20click%20on%20the%20details%20panel%20from%20the%20right%20corner%20second%20last%20icon%20(above%20the%20list%20title).%20you%20can%20see%20the%20panel%20as%20below%2C%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22FirstOP.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F263656i16D2CDB6FF1AFD3A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22FirstOP.png%22%20alt%3D%22FirstOP.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CDIV%3EClick%20on%20%3CSTRONG%3Emanage%20access%3C%2FSTRONG%3E%20and%20then%20click%20on%20Advanced%20as%20below%2C%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22SecondCropped.png%22%20style%3D%22width%3A%20451px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F263657iE3F4BF55B33C7997%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22SecondCropped.png%22%20alt%3D%22SecondCropped.png%22%20%2F%3E%3C%2FSPAN%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CDIV%3EIt%20will%20open%20another%20tab%20and%20in%20this%2C%20you%20can%20see%20all%20the%20list%20item%20level%20permission%20as%20below%2C%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Third.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F263660i32B68AE4E730DCD9%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Third.png%22%20alt%3D%22Third.png%22%20%2F%3E%3C%2FSPAN%3E%26nbsp%3B%3C%2FP%3E%0A%3C%2FDIV%3E%0A%3CDIV%3E%0A%3CH2%20id%3D%22toc-hId-180859077%22%20id%3D%22toc-hId-180859077%22%3ESummary%3C%2FH2%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3EIn%20this%20article%2C%20we%20have%20seen%20how%20to%20break%20and%20add%20permission%20to%20list%20items%20using%20PNP%20js.%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3EHope%20this%20helps!%26nbsp%3BIf%20it%20is%20helpful%20to%20you%20then%20share%20it%20with%20others.%20Give%20your%20valuable%20feedback%20and%20suggestions%20in%20the%20comments%20section%20below.%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3ESharing%20is%20caring!%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2207458%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%2C%20we%20will%20see%20how%20to%20break%20and%20change%20list%20item%20permission%20using%20PnP%20Js%20so%20we%20can%20use%20it%20in%20SPFx%20development.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Single%20user.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F264762iD3B462C2ACF88BC5%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Single%20user.png%22%20alt%3D%22Single%20user.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E
Co-Authors
Version history
Last update:
‎Mar 17 2021 07:40 AM
Updated by: