SharePoint Online for Administrators

Lessons:

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

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

Lessons:

• Setup Office 365
• Software Installation

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

• Set up a machine for developing with the SharePoint Framework

Lessons:

• 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

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

• 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

• 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

Lessons:

• What is JavaScript
• What is ECMAScript
• Using libraries to extend JavaScript functionality
• Debugging JavaScript with the browser debugger

• Understand where JavaScript is loaded and run
• Use the browser debugger to debug JavaScript code

Lessons:

• Variables, Objects, Arrays and Functions
• JavaScript Scopes and Closures
• Function Parameters
• Function Constructors
• Prototypes
• Error handling

• Read a number input from a user and compare it with a random value
• Write a function to test the elements of an array
• Write a function that transforms the casing of a string
• Write a rock-paper-scissors game using JavaScript objects
• Solve a JavaScript scope problem

• Write basic JavaScript
• Create variables and objects in JavaScript
• Write JavaScript functions
• Understand JavaScript scopes
• Understand and extend JavaScript prototypes
• Handle JavaScript errors

Lessons:

• Callback Pattern
• Options hashing
• Self-invoking functions
• Class Pattern
• Module Pattern
• The self reference

• Use callbacks
• User option hashing
• Write a self-invoking function
• Use the Class and Module patterns
• Understand the self reference

Lessons:

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

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

• 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

Lessons:

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

• 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

Lessons:

• Loading Libraries and/or Frameworks
• Considerations
• NPM Package
• Loading from a URL
• Loading A Local Copy
• Loading jQuery and plugins
• Component loader

• Load additional libraries in their SharePoint Framework project using either npm, a url, local copy or the component loader.

Lessons:

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

• Optimizing the SCSS file
• Nesting and extending
• Working with mixins
• Observing the generated CSS

• Write Sass code to style their html components with
• Compile the scss files to css

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

• 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

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

Lessons:

• Build and Deploy a Framework solution
• Overview
• Building
• Deployment

• Create a deployment location
• Generate the web part asset files
• Generate the package
• Using the web part

• Configure and use the build and deployment options with Gulp
• Use the App catalog site to deploy the package
• Distinguish between global and local deployment
• Select the right deployment option for the source files

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

• Modifying the site permissions web part
• Creating the main component
• Create the data service layer
• Visualizing the data inside your component
• Creating the component to view the Group Members

• Create SharePoint Framework solutions using React
• Work with properties and state inside React components
• Provide interactivity between components by means of events
• Generate HTML tags programmatically or with JSX

Lessons:

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

• Create a SharePoint Framework web part for facility management
• Improve the appearance with Office UI Fabric

• Style their html or React components with Office UI Fabric

Lessons:

• Deploying SharePoint Artifacts
• Deployment Options
• Asset Types
• Features

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

Lessons:

• Introduction to Microsoft Graph
• Authentication Providers
• Microsoft Graph API
• Development

• Decide between Azure AD or Azure AD v2.0
• Register their applications for authentication and authorization
• Set up implicit oAuth flow, which is needed for JavaScript
• Choose the appropriate authentication library
• Authenticate using ADAL.js
• Authenticate using MSAL
• Understand and consume the Graph API
• Use the GraphClient helper inside their SharePoint Framework projects

Lessons:

• SharePoint Framework Extensions
• Extensions Overview
• Creating Extensions
• Application Customizers
• Field Customizers
• Command Sets

• Create the extension project
• Retrieving data from the Microsoft Graph using the GraphHttpClient
• Render the data inside your component

• Use Yeoman to scaffold a SharePoint Framework project for extensions
• Create application extensions, field customizers, command sets
• Run their extensions online, but debug them locally

Lessons:

• What is Webpack
• Entries and Outputs
• Using Loaders
• The need for Plugins

• Configure Webpack to bundle their SharePoint Framework solution
• Understand the benefits and drawbacks of Webpack
• Create loaders for other file types besides JavaScript
• Use the appropriate plugins when needed

Lessons:

• Installing Gulp as a node module
• Gulp primitives
• Gulp by example

• Understand the existing Gulp tasks in your SharePoint Framework project
• Create basic custom Gulp tasks for compiling, minifying, serving, … your code

Lessons:

• Included test frameworks
• Running tests
• Component testing

• Use the included testing frameworks for testing their SharePoint Framework projects
• Use Gulp to run the created tests
• Use enzyme to test React components