PnP Web Part Title 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 Web Part Title control in SPFx webpart.

 

PnP Web Part Title Control

 

This control renders a web part title that is changeable when the page is in edit mode. See that all links also can be added as shown below. Refer to  this link for more details.

 

 

 

In this article, you will see how to perform the following tasks,

• Prerequisites
• Create SPFx solution
• Implement Web Part Title Control solution
• Deploy the solution
• Test the webpart

Prerequisites

• Set up your Office 365 Tenant
• Set up development environment

Create SPFx solution

 

Open Node.js command prompt.

 

Create a new folder.

 

>md spfx-pnpreact-webparttitle

 

Navigate to the folder.

 

> cd spfx-pnpreact-webparttitle

 

Execute the following command to create SPFx webpart.

 

>yo @microsoft/sharepoint

 

Enter all the required details to create a new solution as shown below.

 

 

 

Yeoman generator will perform 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 Web Part Title Control solution

 

Execute the following command to install the PnP React Controls NPM package.

 

>npm install @pnp/spfx-controls-react --save

 

Open “src\webparts\pnPWebPartTitle\components\IPnPWebPartTitleProps.ts” file and update the code as shown below.

import { DisplayMode } from '@microsoft/sp-core-library';

export interface IPnPWebPartTitleProps {
  description: string;
  title: string;
  displayMode: DisplayMode;
  updateProperty: (value: string) => void;
}

Open webpart file “src\webparts\pnPWebPartTitle\PnPWebPartTitleWebPart.ts” and update the following.

• Update the webpart props interface
• Update the render method

Update the webpart props interface:

export interface IPnPWebPartTitleWebPartProps {
  description: string;
  title: string;
  displayMode: DisplayMode;
  updateProperty: (value: string) => void;
}

Update the webpart props interface,

public render(): void {
  const element: React.ReactElement<IPnPWebPartTitleProps> = React.createElement(
    PnPWebPartTitle,
    {
      description: this.properties.description,
      title: this.properties.title,
      displayMode: this.displayMode,
      updateProperty: (value: string) => {
        this.properties.title = value;
      }
    }
  );

  ReactDom.render(element, this.domElement);
}

Open the component file “src\webparts\pnPWebPartTitle\components\PnPWebPartTitle.tsx” and import the control.

import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Link } from 'office-ui-fabric-react';

Update the render method as shown below.

public render(): React.ReactElement<IPnPWebPartTitleProps> {
   return (
     <div className={styles.pnPWebPartTitle}>
       <WebPartTitle displayMode={this.props.displayMode}
         title={this.props.title}
         updateProperty={this.props.updateProperty}
         moreLink={
           <Link href="https://sharepoint.github.io/sp-dev-fx-controls-react/" >See all</Link>
         } />
       <div className={styles.container}>
         <div className={styles.row}>
           <div className={styles.column}>
             <span className={styles.title}>Welcome to SharePoint!</span>
             <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
             <p className={styles.description}>{escape(this.props.description)}</p>
             <a href="https://aka.ms/spfx" className={styles.button}>
               <span className={styles.label}>Learn more</span>
             </a>
           </div>
         </div>
       </div>
     </div>
   );
 }

Updated React component (src\webparts\pnPWebPartTitle\components\PnPWebPartTitle.tsx),

import * as React from 'react';
import styles from './PnPWebPartTitle.module.scss';
import { IPnPWebPartTitleProps } from './IPnPWebPartTitleProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Link } from 'office-ui-fabric-react';

export default class PnPWebPartTitle extends React.Component<IPnPWebPartTitleProps, {}> {
  public render(): React.ReactElement<IPnPWebPartTitleProps> {
    return (
      <div className={styles.pnPWebPartTitle}>
        <WebPartTitle displayMode={this.props.displayMode}
          title={this.props.title}
          updateProperty={this.props.updateProperty}
          moreLink={
            <Link href="https://sharepoint.github.io/sp-dev-fx-controls-react/" >See all</Link>
          } />
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={styles.button}>
                <span className={styles.label}>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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

 

Go to the Apps for SharePoint library and upload the package file (sharepoint\solution\spfx-pnpreact-webparttitle.sppkg). Click Deploy.

 

Test the webpart

 

Navigate to the SharePoint site and add the app.

 

 

 

Navigate to the page and add the webpart as shown below.

 

 

 

Result

 

Webpart added successfully.

 

 

 

Update the webpart title and publish the page. You can also see see all links in the webpart in the top right corner.

 

 

 

Edit the webpart to update the webpart title.

 

Summary

 

Thus, in this article, you saw how to use PnP Web Part Title Control in SharePoint Framework.