SPFx React Controls – WebPartTitle Control

In the past month we get new SPFx React Controls which we can use it in our SharePoint Framework projects. I want to show you quick example how you can use first of it – WebPartTitle control.

The purpose of this control is ability of changing web part title inline when the page is in edit mode. 

Firstly, check if you have updated SPFx template generator with next command:

npm outdated -g

On the picture below you could see that I have outdated generator.

2017-12-29_1324

So I have to update it with next command:

npm install @microsoft/generator-sharepoint@latest -g

So, now we can start with new SPFx project.

yo @microsoft/sharepoint

After project is created install next dependency to your project. This is for SPFx React Controls.

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

Open project within Visual Studio Code.

code .

Go to config/config.json file and add the following line to the localizedResources property:

"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
Open main TypeScript file from src folder where you have class extended from BaseClientSideWebPart (in my case is HelloWorldWebPart.ts file).
Add import statement for DisplayMode class.
import { DisplayMode } from '@microsoft/sp-core-library';

Change interface for our web part properties like this:

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

Find render method in same file and change React element:

const element: React.ReactElement<IHelloWorldWebPartProps> = React.createElement(
  HelloWorld,
  {
    title: this.properties.title,
    displayMode: this.displayMode,
    updateProperty: (value: string) => {
      this.properties.title = value;
    }
  }
);

Go to interface file in components subfolder and change Web Part properties like this below:

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

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

Find React TSX file in same folder and add import statement for WebPartTitle control:

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

And last thing – add WebPartTitle control to render function:

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

[ Complete code on GitHub ]

Cheers!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: