Mastering SharePoint Framework

Preface

Getting Started with the SharePoint Framework

• SharePoint Evolution Across Versions
• Birth of the SharePoint Framework
• Key Features of the SharePoint Framework
• Script Editor Web Part vs App Part vs the SPFx Web Part
• Lightweight Components/Tools Used (SPFx Toolchain)
• ALM of the Client-side Web Part
• Setup the Developer Environment for SPFx
• Conclusion

Develop Your First SPFx Web Part

• Features of SPFx Client-side Web Parts
• Conclusion

SPFx Web Part Property Pane

• Property Pane Metadata
• Supported Typed Object Properties
• Test the Property Pane
• Conclusion

Custom Control for the Web Part Property Pane

• Build the List Dropdown Custom Control
• Define the Web Part Property
• Add the Dropdown Property Pane Control
• Add List Dropdown to the Property Pane Control
• Use the Dropdown Property Pane Control in the Web Part
• Test the Custom Property Pane
• Conclusion

PnP Control for the Web Part Property Pane

• PnP Reusable Property Pane Controls
• Use List Picker Control in the Web Part Property Pane
• Conclusion

CSS Considerations

• Manage CSS files in the SPFx solution
• Use of Sass
•  Override externally referenced CSS
• Conclusion

Configure the SPFx WebPart Icon

• Out-of-the-box look and feel
• Office UI Fabric Icons
• Use an External Icon Image
• Use the base64 Encoded Image
• Conclusion

Examine SPFx WebParts on Modern SharePoint

• Understand the SharePoint Workbench
• Configure SPFx web parts for Modern Pages
• Conclusion

Host SPFx WebParts from MS Azure CDN

• Configure the MS Azure Storage Account
• Configure the BLOB container
• Enable Azure CDN for Storage Account
• Configure the SPFx Solution to use Azure CDN
• Conclusion

Host SPFx WebParts from the Office 365 Public CDN

• Configure the CDN for the Office 365 Tenant
• Setup the New Office 365 CDN
• Conclusion

Host SPFx Web Parts From the SharePoint Document Library

• Deployment to CDN
• Configure the SharePoint Library as CDN
• Configure the SPFx Solution for the SharePoint Library CDN
• Conclusion

Integrating jQuery with SPFx WebParts

• Integrate jQuery with the SPFx Web Part
•  Configure the Required Packages and Dependencies

CRUD Operations with No Framework

• Develop a SPFx Solution with No Framework for CRUD operations
•  Configure the Property for the List Name
• Conclusion

CRUD Operations with React JS

• Brief about React JS
• The SPFx Solution for CRUD operations with React JS
• Configure the Property for the List Name
• Add Controls to the WebPart
• Implement the Create Operation
• Implement the Read Operation
• Implement the Update Operation
• Implement the Delete Operation
• Create Operation
• Read Operation
• Update Operation
• Delete Operation
• Conclusion

CRUD Operations with AngularJS

• Brief information about AngularJS
• Create the SPFx Solution
• Configure AngularJS
• Configure the Property for List Name
• Build an Angular application
• Implement the Create Operation
• Implement the Read Operation
• Implement the Update Operation
• Implement the Delete Operation
• Configure the Controller
• Configure the Module
• Add Controls to the WebPart
• Create Operation
• Read Operation
• Update Operation
• Delete Operation
• Conclusion

CRUD Operations Using Knockout JS

• Brief information about KnockoutJS
• Create the SPFx Solution
• Configure Property for List Name
• Implement the Create Operation
• Implement the Read Operation
• Implement the Update Operation
• Implement the Delete Operation
• Add Controls to the Knockout template
• Test the WebPart
• Create Operation
• Read Operation
• Update Operation
• Delete Operation
• Conclusion

CRUD Operations with SP-PnP-JS

• Brief information about SP-PnP-JS
• Create the SPFx Solution
• Configure sp-pnp-js
• Configure Property for List Name
• Add Controls to the WebPart
• Implement the Create Operation
• Implement the Read Operation
• Implement the Update Operation
• Implement the Delete Operation
• Test the WebPart
• Create Operation
• Read Operation
• Update Operation
• Delete Operation
• Conclusion

Transition to @pnp/sp from sp-pnp-js

• Why sp-pnp-js is deprecated?
• The SPFx WebPart with sp-pnp-js
• Code the WebPart
• Test the WebPart
• Transition to @pnp/sp from sp-pnp-js
• Test the web part after the @pnp/sp transition
• Conclusion

SPFx Development with ReactJS

• Life with JavaScript before React JS
• Overview of ReactJS
• React/Virtual DOM
• Primary Building Blocks of React
• Conclusion

React Lifecycle Events in SPFx

• React Component Life Cycle
• Render Method of the React Component
• Conclusion

Autobind Control Events in SPFx

• Develop the SPFx Web Part
• Binding the event to the control
• Binding all the events at once
• Conclusion

Partial State Update for React-based SPFx WebParts

• React State
• Spread operator
• Test the WebPart
• Conclusion

Using Office UI Fabric in SPFx

• The UI Challenges
• Overview of Office UI Fabric
• Office UI Fabric for the SharePoint Framework
• Office UI Fabric Components
• Use Office UI Fabric Components in the SPFx WebPart
• Implement the Greet Message WebPart using Office UI Fabric
• Conclusion

Provision SharePoint Assets in SPFx Solutions

• SharePoint Assets
• Create the SPFx Solution
• Add SharePoint Assets to the SPFxSolution
• Package the assets as part of the SPFx Solution
• Conclusion

Connect to the MS Graph API with MSGraphClient

• Brief information about Microsoft Graph
• MSGraphClient to consume the Graph APIs
• Retrieve User Information using MS Graph
• Conclusion

Connect to the MS Graph API with AadHttpClient

• AadHttpClient vs MSGraphClient
• Access MS Graph using AadHttpClient
• Get user details using MS Graph
• Configure your Office 365 Tenant as the First Release Tenant
• API Management
• Conclusion

SPFx Logging Mechanism

• Understand the Logging API
• Develop the SPFx Solution for Implementing Logging
• Conclusion

Debug SPFx Solutions

• Develop the SharePoint Framework Web Part
• Debugging with a Browser
• Debug while developing
• Debug with Visual Studio Code
• Debugging on the Local Workbench
• Debugging on the Hosted Workbench
• Conclusion

Overview of SPFx Extensions

• SharePoint Framework Extensions
• Update the SPFxYeoman Generator
• Create the SharePoint Framework Extensions Project
• Conclusion

SPFx Extensions-Application Customizer

• Overview of an Application Customizer
• Application Customizer the SPFx Solution
• Implement the Application Customizer
• Conclusion

Extend an Application Customizer with React Components

• Generate the SPFx Solution for an Application Customizer
• Application Customizer Implementation
• Conclusion

SPFx Extensions-Field Customizer

• Overview of a Field Customizer
• Column Formatting VS SPFx Field Customizer
• Develop the SPFx Solution for a Field Customizer
• Conclusion

SPFx Extensions-ListView Command Set

• Overview of ListView Command Set
• Develop the ListView Command Set SPFx Solution
• Develop the ListViewCommand Set
• Debugging the List View Command Set
• Define the ListView Command Sets
• Implement the ListView Command Set Customization
• Conclusion

Anonymously Call MS Azure Functions

• Introduction to Azure Functions
• Empower CORS for the Azure Function
• Call the Azure function from the SPFx Web Part
• Call Anonymous Azure Function from the Web Part
• Conclusion

Securing Azure Functions with Azure Active Directory

• Azure Active Directory App Registration
• CORS Enablement for Azure Function
• Develop the Azure Function with Visual Studio
• Conclusion

Consume Azure AD Secured Function with SPFx

• Consume the Azure function with the SPFx web part
• Set permissions to the SPFx webpart
• Grant permissionsto test the webpart
• Conclusion

Implementing Separation of Concerns (SoC)

• Separation of Concerns (SoC)
• Develop an SoC scenario
• Mock data service implementation
• Consume service inside the SPFx webpart
• Conclusion

Localization Support for SPFx

• Develop localization solutions for SPFx
• Support for localization
• Conclusion

Office 365 CLI

• Installation of the Office 365 CLI
• Usage of the Office 365 CLI
• Office 365 Tenant Management
• Office 365 CLI Cmdlets
• Office 365 CLI Upgrade
• Conclusion

SPFx Solutions Upgrade

• The upgrade puzzle
• The upgrade plan
• Conclusion

SPFx Solution Upgrade with the Office 365 CLI

• Introduction to the Office 365 CLI
• SPFx Solution Upgrade to the Latest Version
• SPFx Solution Upgrade to a Specific Version
• Conclusion

Common Issues and Resolutions with Upgrading npm Packages

• Why to upgrade npm packages?
• Common Issues and Resolutions for npm Upgrade
• Conclusion

Extend MS Teams with SPFx

• Develop the MS Teams Tab SPFx Solution
• Support for MS Teams in SPFx
• Handle MS Teams Context in the Web Part
• Package and Deploy the web part to SharePoint
• Make the web part accessible in MS Teams
• Conclusion

Library Component Types

• Introduction to a Library Component
• Create the Library Component
• Develop the Library Component
• Utilize the library component in the SPFx web part
• Deploy a library to the tenant app catalog
• Consume the Library from the Tenant App Catalog
• Conclusion

Develop Custom App Pages with SPFx

• Develop custom app pages with SPFx
• Configure the web part for a single part page
• Deploy the Package
• Verify the Custom App Page Creation
• Conclusion

Optimizing SPFx Solutions

• SPFx implementation common issues
• Conclusion

Unit Test with Jest and Enzyme

• Need of unit tests
• Implement Unit Tests
• Automate Unit Testing with Azure DevOps
• Conclusion

DevOps for SPFx

• Continuous Integration (CI)
• Create a Build Definition
• Continuous Deployment
• Setup Deployment Trigger
• Conclusion

Query User Profile Details

• User Profile Service Outline
• Query User Profile Details from SPFx
• Conclusion

Querying SP Search Results

• SPFx Web Part to Query Search Results
• Implement Service to Query Search Results
• Conclusion

React-based Tree View

• Develop a SPFx Solution for a React-based Tree View
• Tree View Control
• Conclusion

React-based Carousel

• Develop the SPFx Solution for Carousel
• NPM Carousel Package
• Conclusion

Implement a React-based Organogram

• Develop the SPFx Solution for an Organogram
• Conclusion

Integrating Adaptive Cards with SPFx

• Introduction to Adaptive Cards
• Conclusion

Integrating the Google API with SPFx Functions

• Google Fit REST API
• Google Developer Playground
• Develop the SPFx web part to display Google Fit information
• Conclusion

SPFx Development with SharePoint On-Premises

• Decide the SPFx Version
• Conclusion

APPENDIX

• SPFx Commands Cheat Sheet