Post
Ask Question

PnP WebPartTitle Control for SPFx

Overview

The classic SharePoint web part by default had few basic properties. Web part title is one of it, which can be configured to show short text at the top of web part describing the purpose. The SPFx web parts by default does not provide any similar functionality. PnP (Patterns and Practices) offers WebPartTitle control to show the title at top of web part, which can be changed in edit mode.
During this article, we will explore the WebPartTitle control from PnP on how to use, configure it in SPFx web part. We will develop a practical scenario to integrate WebPartTitle control in SPFx web part.
 
 

Develop SharePoint Framework Web Part

1. Open a command prompt. Create a directory for SPFx solution.
  1. md spfx-pnp-webparttitle  
2. Navigate to the above created directory.
  1. cd spfx-pnp-webparttitle  
3. Run the Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
4. Yeoman generator will present you with the wizard by asking questions about the solution to be created.
 
 
Solution Name: Hit enter to have default name (spfx-pnp-webparttitle in this case) or type in any other name for your solution.
Selected choice: Hit enter
 
Target for the component: Here we can select the target environment where we are planning to deploy the client web part i.e. SharePoint Online or SharePoint On-Premises (SharePoint 2016 onwards).
Selected choice: SharePoint Online only (latest)
 
Place of files: We may choose to use the same folder or create a sub-folder for our solution.
Selected choice: Same folder
 
Deployment option: Selecting Y will allow the app to deployed instantly to all sites and will be accessible everywhere.
Selected choice: N (install on each site explicitly)
 
Permissions to access web APIs: Choose if the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant.
Selected choice: N (solution contains unique permissions)
 
Type of client-side component to create: We can choose to create client side web part or an extension. Choose web part option.
Selected choice: WebPart
 
Web part name: Hit enter to select the default name or type in any other name.
Selected choice: PnPWebPartTitle
 
Web part description: Hit enter to select the default description or type in any other value.
Selected choice: Use PnP WebPartTitle control in SPFx solution
 
Framework to use: Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)
Selected choice: React
 
5. Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

6. Once the scaffolding process is completed, lock down the version of project dependencies by running below command.
  1. npm shrinkwrap  
7. In the command prompt type below command to open the solution in the code editor of your choice.
  1. code .  
 

NPM Packages Dependency

SharePoint framework React controls is an open source library which offers reusable set of React controls to be used in SPFx solution.
On the command prompt, run below command to include the npm package.
  1. npm install @pnp/spfx-controls-react --save  
 

Pass the context from web part to React Component

We will have to pass the SharePoint context from our web part to the React component to be used in WebPartTitle control.
1. Open React component properties at “src\webparts\pnPWebPartTitle\components\IPnPWebPartTitleProps.ts”
2. Add below properties.
  1. import { WebPartContext } from '@microsoft/sp-webpart-base';  
  2. import { DisplayMode } from '@microsoft/sp-core-library';  
  3.   
  4. export interface IPnP WebPartTitleProps {  
  5.   description: string;  
  6.   displayMode: DisplayMode;  
  7.   context: WebPartContext;  
  8.   updateProperty: (value: string) => void;  
  9. }  
3. From our main web part class (src\webparts\pnPWebPartTitle\PnPWebPartTitleWebPart.ts) pass the context to React component.
  1. export default class PnPWebPartTitleWebPart extends BaseClientSideWebPart<IPnPWebPartTitleWebPartProps> {  
  2.   
  3.   public render(): void {  
  4.     const element: React.ReactElement<IPnPWebPartTitleProps> = React.createElement(  
  5.       PnPWebPartTitle,  
  6.       {  
  7.         description: this.properties.description,  
  8.         displayMode: this.displayMode,  
  9.         updateProperty: (value: string) => {  
  10.           this.properties.description = value;  
  11.         }  
  12.       }  
  13.     );  
  14.   
  15.     ReactDom.render(element, this.domElement);  
  16.   }  
  17.      .  
  18.      .  
  19.      .  
  20. }  
 
 

Use WebPartTitle Control in the SPFx Web Part

During the implementation, we will use WebPartTitle control to display the description as changeable web part title, when in edit mode.
1. Open the React component file at “src\webparts\pnPWebPartTitle\components\PnPWebPartTitle.tsx”
2. Add below imports.
  1. import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";  
  2. import { DisplayMode } from '@microsoft/sp-core-library';  
  3. import { Link } from 'office-ui-fabric-react/lib/Link';  
3. Use the WebPartTitle control in the render method as follows.
  1. export default class PnPWebPartTitle extends React.Component<IPnPWebPartTitleProps, {}> {  
  2.   public render(): React.ReactElement<IPnPWebPartTitleProps> {  
  3.     return (  
  4.       <div className={styles.pnPWebPartTitle}>  
  5.         <div className={styles.container}>  
  6.           <div className={styles.row}>  
  7.             <div className={styles.column}>  
  8.               <WebPartTitle displayMode={this.props.displayMode}  
  9.                 title={this.props.description}  
  10.                 updateProperty={this.props.updateProperty}  
  11.                 moreLink={  
  12.                   <Link href="https://sharepoint.github.io/sp-dev-fx-controls-react/">See all</Link>  
  13.                 } />  
  14.               <span className={styles.title}>Welcome to SharePoint!</span>  
  15.               <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>  
  16.               <p className={styles.description}>{escape(this.props.description)}</p>  
  17.               <a href="https://aka.ms/spfx" className={styles.button}>  
  18.                 <span className={styles.label}>Learn more</span>  
  19.               </a>  
  20.             </div>  
  21.           </div>  
  22.         </div>  
  23.       </div>  
  24.     );  
  25.   }  
  26. }  
 

Test the PnP WebPartTitle Control

  1. On the command prompt, type “gulp serve”.
  2. Open SharePoint site.
  3. Navigate to /_layouts/15/workbench.aspx
  4. Locate and add the webpart (named PnPWebPartTitle) to page.
The web part title can be set, when the page is in edit mode.
 
 

Summary

In this article, we explored the practical use of WebPartTitle control in SPFx web part. The WebPartTitle control helps to show title at top of web part, which can be changed in edit mode.
 


Similar Articles