SharePoint Framework Training

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

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

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

• Set up a machine for developing with the SharePoint Framework

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

• 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

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.

Lessons

• 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 the local and online workbench
• Understand and use the Gulp tasks

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.

Lessons

• What is TypeScript
• Using TypeScript in your project
• Variables
• Functions
• Interfaces and Classes
• Modules and 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 the TypeScript to JavaScript
• Work with interfaces, classes, generics, lambda’s, … in TypeScript
• Debug the TypeScript code
• Create TypeScript modules that can be shared and reused

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.

Lessons

• 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

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.

Lessons

• 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
• Loading 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 

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.

Lessons

• 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

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

Lessons

• 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

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

Lessons

• 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

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.

Lessons

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