ASP.NET, SharePoint

SharePoint Framework (SPFx)

Introduction to the SharePoint Framework!

The Sharepoint Framework (SPFx) is an extension which gives us the feature of client-side development for building Sharepoint applications. It also gives us the facility for integration with the Sharepoint data without any difficulty.

Previously, we use to create web parts as C# assemblies that were installed in cloud servers, but now development models for the most part involve JavaScript running in a browser making REST API calls to the SharePoint and Office 365 back-end workloads. Therefore we were in the need of new model. The SharePoint Framework is the next evolution in SharePoint development.

Key features of the SharePoint Framework :

  • It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly to the page).
  • The controls are accessible and responsive by nature.
  • The controls are rendered in the normal page DOM.
  • It enables the developer to access the lifecycle in addition to renderloadserialize and deserializeconfiguration changes, and more.
  • It is framework-agnostic. You can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more.
  • The toolchain is based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
  • Very reliable in Performance.
  • End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
  • SPFx web parts can be added to both classic and modern pages.


Tools required

1. Node.js:

SharePoint Framework

• Node.js is an open source JavaScript runtime.
• It uses an event-driven and non-blocking I/O model that makes it lightweight and efficient.
• SPFx supports latest LTS version

2. npm:

SharePoint Framework

• ‘npm’ stands for node package manager.
• Required as a centralized package registry for SPFx.
• Installs modules and dependencies.
• Packages can be installed globally or locally. Locally installed packages go in the node_modules subfolder.
• Note: Node.js and npm are the foundation for the local SharePoint Framework development. Other tools in the SPFx framework toolchain run on Node.js
• Example commands:
npm install windows-build-tools
npm install jquery

3. Yeoman:


• Yeoman is used as SharePoint web part generator.
• Yeoman builds out the project structure required.
• Yeoman relies on npm and Gulp.
• ‘yo’ is the Yeoman command line utility allowing creation of projects
• Example commands:
npm install -g @microsoft/generator-SharePoint
yo @microsoft/SharePoint

4. Visual Studio code:

visual studio code

• Visual Studio code can be used for working with client-side web part projects.
• This is an extremely fast and lightweight tool, which shows the file and folder structure of the project
• Visual Studio code is not same as Visual Studio IDE
• It is available on Linux and Mac OS

5. TypeScript:


• TypeScript is a strongly typed language, which can catch and resolve syntax errors before run time. (TypeScript adds compile-time syntax and type checking to Javascript)
• It also supports writing classes and interfaces as required.

6. Gulp


• Gulp is used to automate SPFx development and deployment tasks. Gulp can be used to automate repetitive build processes
• It is used as the task runner to handle build process tasks.
• Ability to compile, bundle and copy files to deployment directories.
• Example commands:
gulp trust-dev-cert
gulp serve

7. SharePoint workbench


• SharePoint workbench is a developer design interface (kind of HTML page with new modern experience), and enables us the preview and test the client side web parts without deploying them to SharePoint.
• Workbench works with the current page context.
• It can be served locally in the browser or from the SP Online site.
• Local Workbench reloads when the changes in code occur, which helps us to view and update the web part in real time
• Workbench provides the capability to test SharePoint customizations locally.


Creating a Simple Client-side Web Part

We will add some more features to set up announcements from the SharePoint lists and display them in the web part.

Development of Web Part

Add the announcement class, which you’ll use to store the data available from the SharePoint List. Create an interface for the announcement (IAnnouncement) and an array of announcements (IAnnouncements), as shown below. Create a separate typescript file “Announcement.ts” as also shown below.

export interface IAnnouncements{  
   value: IAnnouncement[];  
 export interface IAnnouncement{  

Now, create two classes MockServiceProvider and SharedServiceProvider.

MockServiceProvider—This fetches the mock data for the local workbench.

SharedServiceProvider—This fetches the data from the SharePoint List for the SharePoint workbench.


import { ISharedServiceProvider } from './ISharedServiceProvider';  
 import { IAnnouncement, IAnnouncements } from "../announcement/Announcements";  
 export class MockServiceProvider implements ISharedServiceProvider {  
   constructor() {  
   private static mockAnnouncements: IAnnouncement[] = [  
     { Title: 'Announcment #1', Body: 'Some Announcment description 1', Id: '1' },  
     { Title: 'Announcment #2', Body: 'Some Announcment description 2', Id: '2' },  
     { Title: 'Announcment #3', Body: 'Some Announcment description 3', Id: '3' }  
   public getAnnouncements(): Promise {  
     var announcements: IAnnouncements = { value: MockServiceProvider.mockAnnouncements };  
     return new Promise((resolve) => {  


import { ISharedServiceProvider } from './ISharedServiceProvider';  
 import { IAnnouncements } from "../announcement/Announcements";  
 import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';  
 import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library';  
 import { PageContext } from '@microsoft/sp-page-context';  
 export class SharedServiceProvider implements ISharedServiceProvider {  
   public static readonly serviceKey: ServiceKey = ServiceKey.create('dps:ISharedServiceProvider', SharedServiceProvider);  
   private _spHttpClient: SPHttpClient;  
   private _pageContext: PageContext;  
   private _currentWebUrl: string;  
   constructor(serviceScope: ServiceScope) {  
     serviceScope.whenFinished(() => {  
       this._spHttpClient = serviceScope.consume(SPHttpClient.serviceKey);  
       this._pageContext = serviceScope.consume(PageContext.serviceKey);  
       this._currentWebUrl = this._pageContext.web.absoluteUrl;  
   public getAnnouncements(): Promise {      
     return new Promise((resolve) => {  
       resolve(this._spHttpClient.get(`${this._currentWebUrl}/_api/lists/GetByTitle('Announcements')/items`, SPHttpClient.configurations.v1)  
         .then((response: SPHttpClientResponse) => {  
           return response.json();  

Initialize the web part with the isDebug property that keeps track of the current environment of the web part. If the current environment type is test or local, fetch the data from the mock service, and if the current environment is SharePoint, fetch the data from the SharePoint.

Initialize the constructor of the web part as follows:

private isDebug: boolean;  
  public constructor(context: IWebPartContext) {  
   this.isDebug =  
    DEBUG && (Environment.type === EnvironmentType.Test || Environment.type === EnvironmentType.Local);  

Create the web part outer structure of the webpart in the render() method and initialize the service based on the iDebug variable.

Create a renderWebpartData() method as below that makes a call to the service initialized earlier to get the data.

private renderWebpartData() {  
   this._sharedService.getAnnouncements().then((response: IAnnouncements) => {  
   }).catch((err) => {  
    console.log('Error getting announcements : ' + err);  

renderHtmlFromData() method will iterate through the data fetched and display it as HTML.

private renderHtmlFromData(announcements: IAnnouncement[]): void {  
   let html: string = '';  
   //const announcementLogo: any = require('../images/announcement.png');  
   let announcementLogo: string = String(require('./images/Announcement.png'));  
   announcements.forEach((item: IAnnouncement) => {  
    html += `     
     <ul class="${styles.announcementsList}">  
        <div class="${styles.announcementIcon}">  
        <img src="${announcementLogo}" />  
         <div class="${styles.txt}">  
   const listContainer: Element = this.domElement.querySelector('#announcementListContainer');  
   listContainer.innerHTML = html;  

Styling the Web Part

Now, add some css classes in the Announcement.module.scss to use in the web part.

Once you complete all the steps, you can build your web part using the command below.

Gulp Build

gulp build

Launch Web Part in Local Workbench

Now test the web part you created with some test data using gupl serve command in local workbench. It will launch the browser and you can add the announcement web part on the page.

Add webpart to Local Workbench

Select the web part and add the web part. You can see the test data on the web part.

Announcement MockData SPFX Webpart

Launch a Web Part in SharePoint Workbench

Note: Make sure the gulp serve command is running in the background.

Navigate to the SharePoint Website.

As you did with a local workbench, you have to add the web part on the workbench.

Announcement SharePoint SPFX Webpart


How to package the web part and deploy it to the SharePoint!

Generating the Package

Before generating the package for the web part, look at the solution. You’ll find the package-solution.json file in the config folder.


Your package-solution.json file will look something like this:

  "solution": {  
   "name": "spfx-announcement-client-side-solution",  
   "id": "9af7ce6b-7e38-427b-a4f5-129dd1acfc0a",  
   "version": ""  
  "paths": {  
   "zippedPackage": "solution/spfx-announcement.sppkg"  

If you look at the property “zippedPackage,” it specifies the location where the package will generate for your web part.

In order to generate the package, execute the command below.

gulp package solution


Once successfully executed, it will generate the package under the “Sharepoint/Solution” folder in your project.

SPFX Webpart Package

In the folder you can find the spfx-announcement.sppkg file that you must upload to the SharePoint app catalog that we created.

Upload the spfx-announcement.sppkg file in the app catalog site. It will display a dialog box to confirm from you to trust the solution package file you want to deploy.


Just click on Deploy button.

Now navigate to the site and add this web part using “Add an app” link.

You should see you web part as shown below:

site contents

Select it, and it will add the web part to your site.

Navigate to the page and click on “Add web part,” you’ll see the newly created web part section as “Under Development.”

Add Webpart

Click on “Add,” which adds the web part on the page.

You can see the web part running on your page without running the gulp serve command.

SFPX Webpart Deploy

About The Author

Leave a Reply