SharePoint Framework Developer Training Course

[student]You are enrolled in this course[/student]

Self-Paced Training

  30 Hours of e-learning videos

  Lifetime free Upgrade

  15 lab exercises

₹ 9,999 ₹ 1,999

* Price outside India may vary

BUY NOW

---

Course Description

In this SharePoint Framework Developer course, 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 Duration: 30 hours

Key concepts covered include:

• React
• TypeScript
• WebPack
• Node.JS
• Yeoman
• Gulp

Module 1 - Developer Overview of the SharePoint Framework  

• SharePoint Framework Overview  
• SharePoint Framework tools 
• SharePoint OOB SPFx WebParts 
• Workbench overview
• Node.js Modules

Hands-on Lab: 

• Preparing your machine for the SharePoint Framework by installing
• Visual Studio Code
• Yeoman
• Project scaffolding
• Node.js/NPM [local hosting and module management] 
• Webpack [packaging]
• Gulp [build configuration and automation] 

Module 2 - Developing Client-Side Web Parts  

• SharePoint client-side Web-Part fundamentals 
• Understanding Web Part Project/Scaffold Structure 
• Web part property pane o Webpart Properties 
• Default Web-Part fundamentals (Typescript, Classes, Interfaces) 

Hands-on Lab: Creating SharePoint Framework Web Part  

• Creating first SPFx Web-Part
• Adding/Modifying Web Part Property Pane  
• Creating Properties and using various controls to render it. 
• Running it on local workbench
• Deployment
• CDN based deployment Solutioning

Module 3 - Typescript 

• What is TypeScript 
• Using TypeScript in your project 
• Variables
• Functions 
• Interfaces and Classes 
• Modules and Namespaces 
• Method overloading 
• Constructors 
• Members 
• Inheritance 

Hands-on Lab: Creating a WebPart using Typescript 

• Creating the model classes 
• Providing dummy data 
• Creating Services 
• Creating the WebPart

Module 4 - Developing SharePoint Framework WebPart using React

• What is React JS 
• Model View ViewModel (MVVM) 
• React Components 
• What is JSX
• Html Tags vs React Components 
• Creating Components - JavaScript Expressions 
• Handling Component State
• Adding Interactivity by means of events
• Using Multiple Components 
• The Lifecycle of a Component 
• Web Part Project Structure 
• Create, Deploy React SPFx WebPart
• Single Page Application (SPA)
• Use PnPjs library 
• Flux and Redux

Hands-on Lab: Developing SharePoint Framework WebPart using React 

• Create SPFx Webpart using react library 
• Creating react component
• Maintaining state Events

Module 5 - Developing SPFx interaction with SharePoint Lists 

• Loading SharePoint data o Page Context 
• Web Services Overview 
• REST and ODATA Fundamentals 
• SharePoint REST API's
• AJAX 
• Framework HttpClient 
• Solving cross-domain issues with CORS 
• Override OOB CSS and how to write and use custom CSS in SPFx WebPart 

Hands-on Lab: Developing SPFx with SharePoint Lists

• Performing CRUD operations using Typescript on list (Add/Update/Delete/View) 
• Adding Office Fabric components into SPFx WebPart 
• Rendering SharePoint data in Webpart Property and dynamically displaying SharePoint data within webpart 
• Handling Local workbench and SharePoint Workbench through code
• Deploy on App Catalog and test on SharePoint site

Module 6 - SASS

• What is SASS?
• The Language
• Variables
• Types
• Comments
• Nested Rules and Properties
• Partials
• Extend
• Functions

Module 7 - SPFX Designing using Office-UI-Fabric

• What Is Office UI Fabric? 
• Office UI Fabric Versions
• Fabric Core Styles
• Example Uses 
• Fabric Components
• Fabric JS
• ngOfficeUIFabric
• Fabric React
• Using PnP 
• Library Components

Hands-on Lab: Developing SPFx with Office-UI-Fabric

• Create a SharePoint Framework web part using Office UI Fabric React Components  
• Adding Multiple react components within WebPart
• Implement React component rendering to Improve the appearance with Office UI Fabric styles and controls

Module 8 - Microsoft Graph

This module explains how to consume the Microsoft Graph from within your SharePoint Framework solutions.

• Introduction to Microsoft Graph
• Authentication Providers
• Microsoft Graph API
• Access User Data and Files with Microsoft Graph

Hands-on Lab: Developing SharePoint Framework WebPart using MS Graph

• Create SPFx Webpart using Microsoft Graph APIs to display tenant data within webpart

Module 9 - Extend Teams using SharePoint Framework

• Develop SharePoint Framework WebParts for Microsoft Teams
• Make the web part available in Microsoft Teams

Hands-on Lab: Developing SharePoint Framework WebPart using MS Graph

• Create a WebPart and deploy it to Microsoft Teams

Module 10 - SharePoint Framework Extensions

• SharePoint Framework Extensions overview 
• Application Customizers Overview 
• Field Customizers Overview 
• Command sets overview 
• Creating Command Set 
• Debugging SPFx Extension on SharePoint Online Site

Hands-on Lab: SharePoint Framework Extensions 

• Create SPFx Extensions [Application Customizer]
• Consume Graph API within your Application Customizer and display Graph data on Application Customizer 
• Creating Field Customizer to format display of list content
• Creating Command Sets

Please contact us for any queries on SharePoint Framework Developer Training Course.