The creation of this web part should be completed after the a clear understanding of the introduction by Microsoft “Hello World”.
- (Microsoft) Build your first SharePoint client-side web part (Hello World part 1)
- (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
- Addtitle
- SharePoint Online
- Use current folder
- No
- No
- WebPart
- Add Title
- Adds an editable title to a web part.
- 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.
- Remove the description line from the interface (AddTitle.tsx)
- 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:
|
Thanks for your post, it is simple & very clear
LikeLiked by 1 person
Thanks Prasad!
LikeLike
I had a question. How do I set a Default tittle when it renders and then change it afterwards
LikeLike
Hi Kavya,
This title is able to be changed when hitting the edit button on the webpart. When do you want to be able to change the title, not sure what you are looking for?
Best Regards
LikeLike