Build SharePoint Framework client side web part – II




Suggested Articles


What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 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

SharePoint Workbench

As already discussed, below screen shows temporary Workbench page. 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





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 .




  1. 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(}</p>

              <a href=”” class=”${styles.button}”>

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








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


To be continued…





THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *