Auckland Branch : 09 5536586 Lower Hutt Branch : 04 5956893 Fax: 028 25537640 PUNE : +91 9850809220

SharePoint Framework

Course Outline


Course & Trainer Detail.

  • Course Duration: 15 hours
  • Course Fee: 15,000 Only
  • Training Mode: Live Class Room
  • Weekend batch: Saturday & Sunday
  • Trainer 1: Nanddeep Nachan
  • Trainer 2: Satyendra Gupta
  • Experience: 14 Year
  • About: Consultant - Consultant - SharePoint | Speaker | Blogger | Trainer |

In this SharePoint Framework training you will learn to build and deploy client-side web parts & extensions using the SharePoint Framework. The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one.

Module 1: SharePoint Framework Overview

This module explains the development options we have in SharePoint. It gives an overview of the toolchain of SharePoint Framework and how it fits into the SharePoint development story.


  • What is SharePoint Framework
  • Why SharePoint Framework?
  • Modern toolchain
  • The Future

After completing this module, students will be able to

  • Understand the development models in SharePoint
  • Understand why SharePoint Framework was introduced
  • Know what the toolchain consists of and what the role of every tool is

Module 2: Preparing your machine for the SharePoint Framework

This module explains how to prepare your machine for SharePoint Framework development. Configuring your SharePoint environment for development and deployment is also discussed.


  • Setup Office 365 & Visual Studio Code
  • Node.js/NPM – local hosting and module management
  • Yeoman – project scaffolding & Gulp – task runner

Lab: Preparing your machine for the SharePoint Framework

  • Set up an Office 365 developer tenant
  • Set up your development machine

After completing this module, students will be able to:

  • Set up a machine for developing with the SharePoint Framework

Module 3: Node.js Modules

This module explains how a node.js project is structured, explains the role of the different components contained within and how to scaffold a project from scratch. It illustrates the different kind of modules you have and how to work with them; i.e. installing, versioning, locking down, caching.


  • Modules
  • Creating a Project
  • Using Modules
  • CommonJS
  • Important Modules

After completing this module, students will be able to

  • Setup a node.js project using npm
  • Install the right modules for their node.js project
  • Loading and caching modules in a node.js project

Module 4: SharePoint Framework Client Web Parts

This module explains how to use the Yeoman generator to create a SharePoint Framework project. It will illustrate the structure of a SharePoint Framework project. This module introduces client-side web parts and how to make basic changes to it. It also introduces the local and online Workbench, where your web parts can be tested.


  • Framework Client Web Parts & What is a Client Web Part?
  • Creating a project & Exploring Project Contents
  • Running Your Project, Gulp tasks & Web Part Configuration

Lab: Create a SharePoint Framework Web Part

  • Create a SharePoint client-side solution
  • Take a look at the generated project
  • Modify the properties and the property pane
  • Modify the web part & Test on SharePoint

After completing this module, students will be able to:

  • Use Yeoman to scaffold a SharePoint Framework project
  • Understand the different components inside a SharePoint Framework project and what their role is
  • Create client-side web parts and make changes to it
  • Run their client-side web-parts on local & online workbench
  • Understand and use the Gulp tasks

Module 5: TypeScript

This module explains how Typescript solves many of the problems discussed in the previous modules. TypeScript adds type annotations and code compilation to your development process so that you write better code. TypeScript is used by default in all SharePoint Framework generated projects. This module will discuss the TypeScript language and how it can help you in building your enterprise scale applications.


  • What is TypeScript
  • Using TypeScript in your project
  • Variables & Functions
  • Interfaces, Classes, Modules & Namespaces

Lab: Creating a project with TypeScript

  • Creating the model classes
  • Providing dummy data & Using an external library

After completing this module, students will be able to

  • Use TypeScript as a typed superset of JavaScript
  • Configure the TypeScript compiler tsc to convert TypeScript to JS
  • Work with interfaces, classes, generics, lambda’s in TypeScript
  • Debug the TypeScript code
  • Create TypeScript modules that can be shared and reused

Module 6: Client Web Part Properties

This module explains how to modify the property pane of your web part. It explains how to configure and use your own properties. It discusses how to dynamically load property pane options, create custom property controls, validate property values.


  • Client Web Part Properties
  • Webpart Properties
  • Adding Properties
  • Using Properties
  • Preconfigured Entries
  • Dynamic Data
  • Custom Properties
  • Advanced Configuration

After completing this module, students will be able to

  • Customize the web part property pane with additional properties, groups and pages
  • Synchronously and asynchronously load property options into the property pane
  • Build custom controls to be used inside the property pane
  • Provide property validation

Module 7: Loading SharePoint Data in a client web part

This module explains how to load data in your SharePoint Framework components using the utility classes. The module discusses the SharePoint REST API and how to consume it. Consume your own API and handling cross-origin issues.


  • Loading SharePoint data
  • Page Context & Web Services Overview
  • REST and ODATA Fundamentals
  • SharePoint REST API’s & AJAX
  • Framework HttpClient
  • Solving cross domain issues with CORS

Lab: Loading SharePoint data in a client-side web part

  • Configuring the web part properties
  • Configuring the web part propertiesLoading SharePoint lists with a DataService and MockService
  • Testing in the local/online workbench
  • Loading items for the selected list

After completing this module, students will be able to:

  • Load/manipulate data from SharePoint by using the SPHttpClient and the SharePoint REST APIs
  • Consuming your own webservice by using the HttpClient

Module 8: React JS Essentials

This module will cover the basics of the JavaScript framework React. It discusses how the React component system works, and how to use it inside your SharePoint Framework projects.


  • What is React JS
  • Model View ViewModel (MVVM)
  • React Components
  • What is JSX
  • Html Tags vs React Components
  • Creating Components
  • JavaScript Expressions
  • JSX Gotchas
  • Relationship with State Machines
  • Handling Component State
  • Adding Interactivity by means of events
  • Using Multiple Components
  • Transferring props between components
  • The Lifecycle of a Component
  • Alternative Syntax
  • SharePoint Framework and React

Module 9: Single Page Application (SPA) React JS

This module will cover how to create a single page application using React JS


  • Routing components & Applying Routing
  • Router implementation & Routing concerns
  • Advanced Routing
  • Data Architecture (Flux and Redux)
  • The Flux pattern
  • Implementing Flux store
  • Flux details & Redux overview
  • Implementing Redux

Module 10: Deploying SharePoint Artifacts

This module explains how you can use your SharePoint Framework solutions to provision SharePoint artifacts, like fields, content types, lists to your SharePoint site.


  • Deploying SharePoint Artifacts to app catalog
  • Deployment Options
  • Asset Types
  • Features

After completing this module, students will be able to:

  • Deploy artifacts to a SharePoint site using a SharePoint Framework solution

Module 11: SharePoint Framework Extensions

This module explains how to build UI extension for your SharePoint site by means of extensions. It will discuss altering the header/footer of a site with application customizers, creating field customizers to change the rendering of a field and how to use command sets to provide your own command bar buttons.


  • SharePoint Framework Extensions
  • Extensions Overview & Creating Extensions
  • Application Customizers & Creating an application customize
  • Creating a field customizer & Creating a command set