Post
Ask Question

PnP Security Trimmed Control In SharePoint Framework

PnP React Controls

 
Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as webparts and extensions using SharePoint Framework.
 
Refer to this link to get the list of React controls for SPFx.
 
You will see how to use PnP Security Trimmed control in SPFx webpart.
 

PnP Security Trimmed Control

 
This control is intended to be used when you want to show or hide components based on the user permissions.
 
The control can be used to check the user’s permissions on the current site / list were the solution is loaded, or on a remote site / list. Refer to this link for more details.
 
Security Trimmed Control can be used check the following permissions,
  • Check permissions on the current site: level={PermissionLevel.currentWeb}
  • Check permissions on the current list: level={PermissionLevel.currentList}
  • Check permissions on remote site: level={PermissionLevel.remoteWeb}
  • Check permissions on remote list/library: level={PermissionLevel.remoteListOrLib}
SPPermission – Refer to this link to get the complete list of built-in permissions.
 
Example
 
User with manage web permission will see 2 components.
 
PnP Security Trimmed Control In SharePoint Framework 
 
Users with view pages permission will see one component.
 
PnP Security Trimmed Control In SharePoint Framework 
 
In this article, you will see how to perform the following tasks,
  • Prerequisites
  • Create SPFx solution
  • Implement Security Trimmed Control solution
  • Deploy the solution
  • Test the webpart
Prerequisites

Create SPFx solution

 
Open Node.js command prompt.
 
Create a new folder.
 
>md spfx-pnpreact-SecurityTrimmedControl
 
Navigate to the folder.
 
> cd spfx-pnpreact-SecurityTrimmedControl
 
Execute the following command to create SPFx webpart.
 
>yo @microsoft/sharepoint
 
Enter all the required details to create a new solution as shown below.
 
PnP Security Trimmed Control In SharePoint Framework 
 
Yeoman generator will perform the scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.
 
>npm shrinkwrap
 
Execute the following command to open the solution in the code editor.
 
>code .
 

Implement Security Trimmed Control solution

 
Execute the following command to install the PnP React Controls NPM package.
 
>npm install @pnp/spfx-controls-react --save
 
Open “src\webparts\pnPSecurityTrimmedControl\components\IPnPSecurityTrimmedControlProps.ts” file and update the code as shown below.
  1. import {WebPartContext} from '@microsoft/sp-webpart-base';  
  2.   
  3. export interface IPnPSecurityTrimmedControlProps {  
  4.   description: string;  
  5.   context: WebPartContext;  
  6. }  
Open webpart file “src\webparts\pnPSecurityTrimmedControl\PnPSecurityTrimmedControlWebPart.ts” and update the following.
  • Update the render method
Update the render method,
  1. public render(): void {  
  2.     const element: React.ReactElement<IPnPSecurityTrimmedControlProps> = React.createElement(  
  3.       PnPSecurityTrimmedControl,  
  4.       {  
  5.         description: this.properties.description,  
  6.         context: this.context  
  7.       }  
  8.     );  
  9.   
  10.     ReactDom.render(element, this.domElement);  
  11.   }  
Open “src\webparts\pnPSecurityTrimmedControl\components\PnPSecurityTrimmedControl.tsx” file and import the control.
  1. import { SecurityTrimmedControl, PermissionLevel } from "@pnp/spfx-controls-react/lib/SecurityTrimmedControl";  
  2. import { SPPermission } from '@microsoft/sp-page-context';  
Update the render method as shown below.
  1.  public render(): React.ReactElement<IPnPSecurityTrimmedControlProps> {  
  2.     return (  
  3.       <div className={styles.pnPSecurityTrimmedControl}>  
  4.         <SecurityTrimmedControl context={this.props.context}  
  5.           level={PermissionLevel.currentWeb}  
  6.           permissions={[SPPermission.manageWeb]}>  
  7.           {  
  8.             <div className={styles.container}>  
  9.               <div className={styles.row}>  
  10.                 <div className={styles.column}>  
  11.                   <span className={styles.title}>Welcome to SharePoint!</span>  
  12.                   <p className={styles.subTitle}>This webpart is for Administrators.</p>  
  13.                 </div>  
  14.               </div>  
  15.             </div>  
  16.           }  
  17.         </SecurityTrimmedControl>  
  18.         <SecurityTrimmedControl context={this.props.context}  
  19.           level={PermissionLevel.currentWeb}  
  20.           permissions={[SPPermission.viewPages]}>  
  21.           {  
  22.             <div className={styles.container}>  
  23.               <div className={styles.row}>  
  24.                 <div className={styles.column}>  
  25.                   <span className={styles.title}>Welcome to SharePoint!</span>  
  26.                   <p className={styles.subTitle}>This webpart is for Users.</p>  
  27.                 </div>  
  28.               </div>  
  29.             </div>  
  30.           }  
  31.         </SecurityTrimmedControl>  
  32.       </div>  
  33.     );  
  34.   }  
  35. }  
Updated React component (src\webparts\pnPSecurityTrimmedControl\components\PnPSecurityTrimmedControl.tsx),
  1. import * as React from 'react';  
  2. import styles from './PnPSecurityTrimmedControl.module.scss';  
  3. import { IPnPSecurityTrimmedControlProps } from './IPnPSecurityTrimmedControlProps';  
  4. import { escape } from '@microsoft/sp-lodash-subset';  
  5. import { SecurityTrimmedControl, PermissionLevel } from "@pnp/spfx-controls-react/lib/SecurityTrimmedControl";  
  6. import { SPPermission } from '@microsoft/sp-page-context';  
  7.   
  8. export default class PnPSecurityTrimmedControl extends React.Component<IPnPSecurityTrimmedControlProps, {}> {  
  9.   public render(): React.ReactElement<IPnPSecurityTrimmedControlProps> {  
  10.     return (  
  11.       <div className={styles.pnPSecurityTrimmedControl}>  
  12.         <SecurityTrimmedControl context={this.props.context}  
  13.           level={PermissionLevel.currentWeb}  
  14.           permissions={[SPPermission.manageWeb]}>  
  15.           {  
  16.             <div className={styles.container}>  
  17.               <div className={styles.row}>  
  18.                 <div className={styles.column}>  
  19.                   <span className={styles.title}>Welcome to SharePoint!</span>  
  20.                   <p className={styles.subTitle}>This webpart is for Administrators.</p>  
  21.                 </div>  
  22.               </div>  
  23.             </div>  
  24.           }  
  25.         </SecurityTrimmedControl>  
  26.         <SecurityTrimmedControl context={this.props.context}  
  27.           level={PermissionLevel.currentWeb}  
  28.           permissions={[SPPermission.viewPages]}>  
  29.           {  
  30.             <div className={styles.container}>  
  31.               <div className={styles.row}>  
  32.                 <div className={styles.column}>  
  33.                   <span className={styles.title}>Welcome to SharePoint!</span>  
  34.                   <p className={styles.subTitle}>This webpart is for Users.</p>  
  35.                 </div>  
  36.               </div>  
  37.             </div>  
  38.           }  
  39.         </SecurityTrimmedControl>  
  40.       </div>  
  41.     );  
  42.   }  
  43. }  

Deploy the solution

 
Execute the following commands to bundle and package the solution.
 
>gulp bundle --ship
>gulp package-solution --ship
 
Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx
 
Upload the package file (sharepoint\solution\spfx-pnpreact-security-trimmed-control.sppkg). Click Deploy.
 
PnP Security Trimmed Control In SharePoint Framework 
 

Test the webpart

 
Navigate to the SharePoint site and add the app.
 
PnP Security Trimmed Control In SharePoint Framework 
 
Navigate to the page and add the webpart as shown below.
PnP Security Trimmed Control In SharePoint Framework 
 
Result
 
User who has manage web permission will be able to see both the components in the webpart.
 
PnP Security Trimmed Control In SharePoint Framework
 
PnP Security Trimmed Control In SharePoint Framework 
 
User who has view pages permission will be able to see only one component in the webpart.
 
PnP Security Trimmed Control In SharePoint Framework
 
PnP Security Trimmed Control In SharePoint Framework 
 

Summary

 
Thus, in this article, you saw how to how to use PnP Security Trimmed Control in SharePoint Framework.


Similar Articles