(3) Add a Title to your Web Part just like Out of the Box (SPFx) | SharePoint Framework

The creation of this web part should be completed after the a clear understanding of the introduction by Microsoft “Hello World”.

1. (Microsoft) Build your first SharePoint client-side web part (Hello World part 1)
2. (My Blog) Build your second client-side web part (SPFx) Adding PropertyPanes | SharePoint Framework

Out of the box SharePoint Web Parts have a title which is easily editable when rendered. To keep the same functionality an editable Web part title can be added to any custom Web part. (SPFx)

Below are the steps that I used to reproduce the WebPartTitle control with SharePoint Framework v1.8.0.

These instructions are based off of: https://sharepoint.github.io/sp-dev-fx-controls-react/controls/WebPartTitle/

1. Create a folder for your Web Part.

md addtitle

2. Navigate to your folder.

cd addtitle

3. Create a blank web part.

yo @microsoft/sharepoint

1. Addtitle
2. SharePoint Online
3. Use current folder
4. No
5. No
6. WebPart
7. Add Title
8. Adds an editable title to a web part.
9. React

4. Install the SPFx React Controls

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

5. Add the Properties to AddTitleWebPart.ts

In your AddTitleWebPart.ts under the BaseClientSideWebPart class, delete the description property. We will not be using it.

Replace with title, displayMode, and updateProperty properties.

{
title:this.properties.title,
displayMode:this.displayMode,
updateProperty: (value:string) => {
this.properties.title=value;
}

6. Under your Component Add the Properties

Under your components src > webparts > addTitle > components > select IAddTitleProps.ts

Remove description once again. Replace with title, displayMode, and updateProperty.

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

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

7. Import the WebPartTitle from pnp

Under your components navigate to src > webparts > addTitle > components > AddTitle.tsx

Import WebPartTitle.

import {WebPartTitle} from "@pnp/spfx-controls-react/lib/WebPartTitle";

8. Add the WebPartTitle Control to Your Interface of the Component

Put the WebPartTitle control right under your styles.container that way it is attached to the div container class.

<WebPartTitle displayMode={this.props.displayMode}
              title={this.props.title}
              updateProperty={this.props.updateProperty} />

9. Clean up code

For me I had to do a couple extra steps to clean up the code.

1. Remove the description line from the interface (AddTitle.tsx)
2. In AddTitleWebPart.ts rename the extension of the BaseClientSideWebPart to IAddTitleProps.

10. Save All

11. Gulp Serve

**Tip for perfection** Edit the .scss file so that style.container removes the shadow from the container that the Title is attached to. I ended up having 2 different container styles, one with a shadow and one without.

If these instructions helped you, let me know! If you are still struggling or any steps are different for you, feel free to share. Thanks!

 

 

Tools used in this blog: SharePoint Online Management Shell: https://www.microsoft.com/en-us/download/details.aspx?id=35588 Visual Studio Code: https://code.visualstudio.com/