+91 – 88617 28680learning@flexmind.co

SharePoint Framework Training

SharePoint Framework Training

Course Duration: 4 days (32 hours)
Course Fee: INR 17,999
Training Mode: Live Virtual Classroom
Next weekend batch (Saturday/Sunday): To be announced

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.

Course Outline

Module 1 – Getting Started with the SharePoint Framework

What is SharePoint Framework

During this introduction we will talk about the development options we have in SharePoint. We will take a look at the toolchain of SharePoint Framework and how it fits into the modern SharePoint development story.

  • SharePoint Framework overview
  • SharePoint Framework tools

Preparing your machine for the SharePoint Framework

In this module we will talk about the SharePoint Framework development process and how each of the tools fits into that process.

  • Visual Studio Code
  • js/NPM – local hosting and module management
  • Yeoman – project scaffolding
  • Gulp – task runner

Module 2: Strongly typed JavaScript with TypeScript (Overview)

By using TypeScript we improve the way we write client-side code. We can use all the latest ECMAScript features, while still supporting all browsers. TypeScript adds type annotations and code compilation to your development process so that you write better code. TypeScript is used by default in all SPFx generated projects. In this module, we will talk about the TypeScript language and how it can help you in building your enterprise scale applications.

  • Overview of the TypeScript language
  • The ECMAScript standard
  • Why use TypeScript as a SharePoint developer?
  • Typescript transpilation and configuration
  • Variables, Objects, Interfaces, Classes and more
  • Namespaces and Modules


Module 3 – Developing SharePoint Framework Client-Side Web Parts

Building Client-Side Web Parts

The SharePoint Framework allows us to build modern client-side web parts. We will use the Yeoman generator to create a web part project. During this module, we will explore the project structure and make some basic changes to our first web part.

  • Client-side web parts fundamentals
  • Web Part Project Structure
  • Adding multiple web parts to a project

Web part properties

Just like with classic web parts, we have a property pane that can be customized. In this chapter you will learn how to do just that

  • Changing the web part property pane
  • Validating web part properties
  • Using custom controls in the property pane
  • Property pane life cycle
  • Storing web part data

Deploying SPFx solutions

SPFx solutions need to be deployed through a SharePoint app catalog. In this chapter we will see how to create an app catalog and how to deploy.

  • What is an app catalog and how do we create it?
  • Deploying your solution
  • Global vs local deployment
  • Adding your deployed components to sites and pages


Module 4 – Office UI Fabric React

  • Types of components
  • Understanding Props and State in React
  • Building UI using Office UI Fabric React components
  • Working with data in Fabric React

Module 5 – Loading Data in SPFx

Loading SharePoint data in SharePoint Framework

When loading data from client-side code, we use REST. SharePoint has REST services. This module will teach you how to use the Framework HTTP clients to consume these services.

  • Working with OData REST Services
  • Discovering the SharePoint REST endpoints
  • Using the built-in SharePoint client to get data
  • Adding or updating data from client-side code

Module 6 – Connecting to Microsoft Graph

Microsoft Graph is a unified API for getting data from the entire Office 365 platform. We can also use the native client and permission system to access this data.

  • Microsoft Graph API
  • The Graph API Client
  • Consuming Microsoft Graph
  • Registering and approving permissions to access Microsoft Graph

Module 7 – Consuming Azure AD protected API’s

For Azure AD protected API’s, other than SharePoint or Graph, we can use another built-in client to get to the data.

  • Using the AadHttpClient
  • Registering and setting permissions

List Subscriptions

With a List Subscription we can subscribe to a document library and receive a notification when something happens to a document!

  • Creating a document library subscription
  • Receiving the update
  • Getting the document changes from SharePoint

Module 8 – SharePoint Framework Extensions

Application Customizer

Using an application customizer extension, we can run JavaScript on any modern page, while leveraging some of the tools provided to us by SharePoint

  • Creating an application customizer
  • Using dialogs and alerts
  • Injecting controls into modern page placeholders

Field Customizer

Similar to JSLink in classic SharePoint development, Field Customizer extension allows us to override part of the render process

  • Creating a Field Customizer
  • Using field data
  • Injecting React controls into your field customizer

Command Set

Just like the Custom Actions we built in the past, a Command Set will extend the interface with extra buttons.

  • Creating a Command Set
  • Executing scripts when a button is clicked
  • Show your button conditionally based on item selection, location, etc.