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

 



 

sharepoint-client-side-web-part-ii-1

 

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

 

sharepoint-client-side-web-part-ii-2

 

Select “Hello World” web part to add.

 

sharepoint-client-side-web-part-ii-3

 

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

 

sharepoint-client-side-web-part-ii-4

 



 

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 .

 

visual-studio-code-1

 

  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(this.properties.description)}</p>

              <a href=”https://aka.ms/spfx” 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…

 



 

About Satyendra Mishra

Satyendra is a Technical Project Manager with 12+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (AngularJS) and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →