SharePoint Workbench

As already discussed, below screen shows temporary Workbench page this is very helpful while development and unit testing. However, Workbench page is also available on SharePoint. You can visit to this page by using URL https://your-sharepoint-site-url/_layouts/workbench.aspx

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

 

 

Now, click on ‘+’ icon on horizontal bar.

 

 

Select “Hello World” web part to add.

 

 

You can change its view to mobile mode by selecting mobile icon on top bar.

 

 

Project Structure using Visual Studio Code

I used Visual Studio Code to go through the code. Let’s go step by step:

1. In console, go to project root folder i.e. helloworld-webpart.
2. Enter following command in command prompt

code .

 

 

3. Visual Studio Code is opened with provided folder as root folder.

Web Part Class

HelloWebPart.ts defines a web part class which extends BaseClientSideWebPart. To develop client side web part, you must extend BaseClientSideWebPart.

As per the definition of BaseClientSideWebpart:

“This abstract class implements the base functionality for a client side web part. Every client side web part needs to inherit from this class. Along with the base functionality, this class provides some APIs that can be used by the web part. These APIs fall in two categories. The first category of APIs provides data and functionality e.g. the web part context (i.e. this.context). This API should be used to access contextual data relevant to this web part instance. The second category of APIs provides a base implementation for the web part lifecycle and can be overridden for an updated implementation. The render() API is the only API that is mandatory to be implemented/overridden by a web part. All other life cycle APIs have a base implementation and can be overridden based on the needs of the web part. Please refer to the documentation of the individual APIs to make the right decision.”

BaseClientSideWebPart has many private and protected properties. Few of them are for displayMode, web part properties, web part context, instanceId, the most important root DOM Element as domElement which represent <div> at root level of web part and much more.

This web part class is also defined to take property type as IHelloWorldWebPartProps which is defined in IHelloWorldWebPartProps.ts as below:

 

export interface IHelloWorldWebPartProps {

description: string;

}

This property definition is used to define custom property types for web part.

Web part render method

Web part’s render() is must to be overridden. This method is used to render web part in DOM element using web part property domElement. This method’s parameters includes web part display mode (either Read or Edit) and configured web part properties.

public render(): void {

this.domElement.innerHTML = `

<div class=”${styles.helloWorld}”>

<div class=”${styles.container}”>

<div class=”ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}”>

<div class=”ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1″>

<span class=”ms-font-xl ms-fontColor-white”>Welcome to SharePoint!</span>

<p class=”ms-font-l ms-fontColor-white”>Customize SharePoint experiences using Web Parts.</p>

<p class=”ms-font-l ms-fontColor-white”>${escape(this.properties.description)}</p>

<a href=”https://aka.ms/spfx&#8221; class=”${styles.button}”>

<span class=”${styles.label}”>Learn more</span>

</a>

</div>

</div>

</div>

</div>`;

}

 

Let’s edit web part properties and see them in PropertyPane (also called as web part ToolPart in SharePoint classic applications).

To be continued…

Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.

About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.