Mastering Sharepoint Framework
US$ 19.95
The publisher has enabled DRM protection, which means that you need to use the BookFusion iOS, Android or Web app to read this eBook. This eBook cannot be used outside of the BookFusion platform.
Description
Contents
Reviews
Language
English
ISBN
9789389328875
Cover Page
Title Page
Copyright Page
Dedication
About the Author
About the Reviewer
Acknowledgements
Preface
Errata
Table of Contents
1. Getting Started with the SharePoint Framework
Structure
Objectives
SharePoint Evolution Across Versions
SharePoint 2007: Full Trust Farm Solutions
SharePoint 2010, SharePoint Online: Sandbox Solutions
SharePoint 2013, SharePoint 2016, and SharePoint Online: App/Add-ins Model
Birth of the SharePoint Framework
How SPFx is different?
Modern toolchain/Open source tooling
Easy integration with SharePoint data
Available in Cloud and On-Premises
Client-side rendering
Not dependent on JavaScript injection
No iframe
Key Features of the SharePoint Framework
Script Editor WebPart vs App Part vs the SPFx WebPart
Lightweight Components/Tools Used (SPFx Toolchain)
ALM of the Client-side Web Part
Setup the Developer Environment for SPFx
Conclusion
2. Develop Your First SPFx Web Part
Structure
Objectives
Features of SPFx Client-side Web Parts
Develop Your First SPFx Solution
Open Solution in Code Editor
Run the WebPart on SharePoint local workbench
Understand the Solution Structure
Major Elements of the SPFx Solution
Web Part Class (HelloWorldWebPart.ts)
Property Type Interface (IHelloWorldWebPartProps)
Conclusion
3. SPFx Web Part Property Pane
Structure
Objectives
Property Pane Metadata
SPFx Solution for the Property Pane
Property Pane Code
Supported Typed Object Properties
Test the Property Pane
Conclusion
4. Custom Control for the Web Part Property Pane
Structure
Objectives
Build the List Dropdown Custom Control
Define the Web Part Property
Add the Dropdown Property Pane Control
Define React Props for the dropdown
Define the React State for the dropdown
Define the DropDown React Component
Add List Dropdown to the Property Pane Control
Define internal properties for the dropdown property pane control
Define the dropdown property pane control
Use the Dropdown Property Pane Control in the Web Part
Add the list information interface
Reference the Dropdown Property Pane in the WebPart
Test the Custom Property Pane
Conclusion
5. PnP Control for the Web Part Property Pane
Structure
Objectives
PnP Reusable Property Pane Controls
Develop the SPFx Solution to use PnP Reusable Property Pane Controls
Install PnP Property Controls
Use List Picker Control in the Web Part Property Pane
Conclusion
6. CSS Considerations
Structure
Objectives
Manage CSS files in the SPFx solution
Use of Sass
Use CSS classes over id
Use CSS Modules
Override externally referenced CSS
Conclusion
7. Configure the SPFx WebPart Icon
Structure
Objectives
Out-of-the-box look and feel
Office UI Fabric Icons
Advantages of using an Office Fabric Icon
Use an External Icon Image
Advantages of using an external image as an icon
Use the base64 Encoded Image
Advantages of using the base64 encoded image
General observation
Conclusion
8. Examine SPFx WebParts on Modern SharePoint
Structure
Objectives
Understand the SharePoint Workbench
Local Workbench
SharePoint Workbench
Develop the SharePoint Framework Web Part
Configure SPFx web parts for Modern Pages
Conclusion
9. Host SPFx WebParts from MS Azure CDN
Structure
Objectives
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
10. Host SPFx WebParts from the Office 365 Public CDN
Structure
Objectives
Configure the CDN forthe Office 365 Tenant
Setup the New Office 365 CDN
Configure the SPFx Solution for the Office 365 CDN
Conclusion
11. Host SPFx Web Parts From the SharePoint Document Library
Structure
Objectives
Deployment to CDN
Configurethe SharePoint Library as CDN
Configure the SPFx Solution for the SharePoint Library CDN
Conclusion
12. Integrating jQuery with SPFx WebParts
Structure
Objectives
Integrate jQuery with the SPFx Web Part
Configure the Required Packages and Dependencies
Solution Changes for jQuery
Conclusion
13. CRUD Operations with No Framework
Structure
Objectives
Develop a SPFx Solution with No Framework for CRUD operations
Configure the Property for the List Name
Conclusion
14. CRUD Operations with React JS
Structure
Objectives
Brief about React JS
The SPFx Solution for CRUD operations with React JS
Configure the Property for the List Name
Define a Model for List Item
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
15. CRUD Operations with AngularJS
Structure
Objectives
Brief information about AngularJS
Create the SPFx Solution
Configure AngularJS
Configure the Property for List Name
Build an Angular application
Configure Data Service
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
Test the WebPart
Create Operation
Read Operation
Update Operation
Delete Operation
Troubleshooting
Conclusion
16. CRUD Operations Using Knockout JS
Structure
Objectives
Brief information about KnockoutJS
Create the SPFx Solution
Configure Property for List Name
Configure ViewModel
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
Troubleshooting
Conclusion
17 CRUD Operations with SP-PnP-JS
Structure
Objectives
Brief information about SP-PnP-JS
Create the SPFx Solution
Configure sp-pnp-js
Configure Property for List Name
Model for List Item
Add Controls to the WebPart
Import sp-pnp-js
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
18. Transition to @pnp/sp from sp-pnp-js
Structure
Objectives
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
19. SPFx Development with ReactJS
Structure
Objectives
Life with JavaScript before React JS
Example of String Concatenation
Templating Engines
The era of Modern Toolchain
Overview of ReactJS
Why React works well with SPFx?
React/Virtual DOM
Primary Building Blocks of React
React Element
React Props
React Component - Stateful React Element
React State
JavaScript XML (.jsx)
Conclusion
20. React Lifecycle Events in SPFx
Structure
Objectives
React Component Life Cycle
Render Method of the React Component
componentWillMount
componentDidMount
Conclusion
21. Autobind Control Events in SPFx
Structure
Objectives
Develop the SPFx Web Part
Development Scenario
Define a State
Add Controls to the Web Part
Run the SPFx WebPart
Binding the event to the control
Binding all the events at once
Conclusion
22. Partial State Update for React-based SPFx WebParts
Structure
Objectives
React State
Developthe SPFx Solution with React
Definethe React State
Code the WebPart
Spread operator
Test the WebPart
Conclusion
23. Using Office UI Fabric in SPFx
Structure
Objectives
The UI Challenges
Overview of Office UI Fabric
Office UI Fabric for the SharePoint Framework
Create the SPFx Solution
Office UI Fabric Components
Use Office UI Fabric Components in the SPFx WebPart
Implement the Greet Message WebPart using Office UI Fabric
Test the WebPart
Conclusion
24. Provision SharePoint Assets in SPFx Solutions
Structure
Objectives
SharePoint Assets
Create the SPFx Solution
Add SharePoint Assets to the SPFx Solution
Custom Schema
Package the assets as part of the SPFx Solution
Deploy and Testthe SPFx Web Part
Conclusion
25. Connect to the MS Graph API with MSGraphClient
Structure
Objectives
Brief information about Microsoft Graph
Develop the SPFx Solution to consume the MS Graph API with MSGraphClient
MSGraphClient to consume the Graph APIs
Retrieve User Information using MS Graph
Conclusion
26. Connect to the MS Graph API with AadHttpClient
Structure
Objective
AadHttpClient vs MSGraphClient
Access MS Graph using AadHttpClient
Get user details using MS Graph
Configureyour Office 365 Tenant as the First Release Tenant
API Management
Conclusion
27. SPFx Logging Mechanism
Structure
Objectives
Understand the Logging API
Developthe SPFx Solution for Implementing Logging
Exploring the Logging API
Conclusion
28. Debug SPFx Solutions
Structure
Objectives
Develop the SharePoint Framework Web Part
Debugging with a Browser
Debug while developing
Debug with Visual Studio Code
Get the Debugger Extension
Debugging on the Local Workbench
Debugging on the Hosted Workbench
Conclusion
29. Overview of SPFx Extensions
Structure
Objectives
SharePoint Framework Extensions
Update the SPFxYeoman Generator
Create the SharePoint Framework Extensions Project
Conclusion
30. SPFx Extensions-Application Customizer
Structure
Objectives
Overview of an Application Customizer
Page Placeholders:
Application Customizer the SPFx Solution
Solution Structure
Implement the Application Customizer
Conclusion
31. Extendan Application Customizer with React Components
Structure
Objectives
Generate the SPFx Solution for an Application Customizer
Application Customizer Implementation
Implement the React Component as the Footer
Conclusion
32. SPFx Extensions-Field Customizer
Structure
Objectives
Overview of a Field Customizer
Column Formatting VS SPFx Field Customizer
Develop the SPFx Solution for a Field Customizer
Solution Structure
Implement the Field Customizer
Debug Field Customizer
Apply Field Customization
Conclusion
33. SPFx Extensions-ListView Command Set
Structure
Objectives
Overview of ListView Command Set
Develop the ListView Command Set SPFx Solution
Solution Structure
Develop the ListView Command Set
Debuggingthe List View Command Set
Define the ListView Command Sets
Implement the ListView Command Set Customization
Conclusion
34. Anonymously Call MS Azure Functions
Structure
Objectives
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
35. Securing Azure Functions with Azure Active Directory
Structure
Objectives
Azure Active Directory App Registration
Set up the required permissions for App registration
Assign consents for the App registration
Implement the MS Azure Function
CORS Enablement for Azure Function
Develop the Azure Function with Visual Studio
Conclusion
36. Consume Azure AD Secured Function with SPFx
Structure
Objectives
Consume the Azure function with the SPFx web part
Set permissions to the SPFx webpart
Code the webpart
Package the SPFx solution
Grant permissions to test the webpart
Handle permission requests using Power Shell
Conclusion
37. Implementing Separation of Concerns (SoC)
Structure
Objectives
Separation of Concerns (SoC)
Developan SoC scenario
Mock data service implementation
Consume service inside the SPFx webpart
Test the web part
Conclusion
38. Localization Support for SPFx
Structure
Objectives
Develop localization solutions for SPFx
Support for localization
Test the web part property pane
Conclusion
39. Office 365 CLI
Structure
Objectives
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
40. SPFx Solutions Upgrade
Structure
Objectives
The upgrade puzzle
Is the upgrade process simple?
The basic strides to upgrade
The upgrade plan
Conclusion
41. SPFx Solution Upgrade with the Office 365 CLI
Structure
Objective
Introduction to the Office 365 CLI
SPFx Solution Upgrade to the Latest Version
SPFx Solution Upgrade to a Specific Version
SPFx Solution Downgrade?
Conclusion
42. Common Issues and Resolutions with Upgrading npn Packages
Structure
Objectives
Why to upgrade npm packages?
Upgrading npm packages
Common Issues and Resolutions for npm Upgrade
Conclusion
43. Extend MS Teams with SPFx
Structure
Objectives
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
44. Library Component Types
Structure
Objectives
Introduction to a Library Component
Create the Library Component
Develop the Library Component
Utilize the library component in the SPFx webpart
Verify the webpart
Deploy a library to the tenant app catalog
Consume the Library from the Tenant App Catalog
Conclusion
45. Develop Custom App Pages with SPFx
Structure
Objective
Develop custom app pages with SPFx
Configure the web part for a single part page
Deploy the Package
Deploy the package to the app catalog
Verify the Custom App Page Creation
Conclusion
46. Optimizing SPFx Solutions
Structure
Objective
SPFx implementation common issues
Tip# 1: Splitting web parts to load individually
Tip# 2: Dynamic loading of third-party libraries
Tip# 3: Externally Reference External Libraries
Tip# 4: Dissecting the SPFx Bundle
Conclusion
47. Unit Test with Jest and Enzyme
Structure
Objectives
Need of unit tests
Implement Unit Tests
NPM Dependencies
Setup Jest for SPFx:
Include tests in the SPFxwebpart
Execute Test Cases
Automate Unit Testing with Azure DevOps
Azure DevOps Build Pipeline Configuration
Conclusion
48. DevOps for SPFx
Structure
Objectives
Continuous Integration (CI)
Create a Build Definition
Setup Deployment Trigger
Conclusion
49. Query User Profile Details
Structure
Objectives
User Profile Service Outline
Query User Profile Details from SPFx
Define Model representing User Profile Information
Code the WebPart
Conclusion
50. Querying SP Search Results
Structure
Objectives
SPFx Web Part to Query Search Results
Define a Model for Search Result
Implement Service to Query Search Results
Conclusion
51. React-based Tree View
Structure
Objectives
Develop a SPFx Solution for a React-based Tree View
Tree View Control
Conclusion
52. React-based Carousel
Structure
Objectives
Develop the SPFx Solution for Carousel
NPM Carousel Package
Conclusion
53. Implement a React-based Organogram
Structure
Objectives
Develop the SPFx Solution for an Organogram
Development Scenario
NPM Packages
Code the webpart
Conclusion
54. Integrating Adaptive Cards with SPFx
Structure
Objectives
Introduction to Adaptive Cards
Develop the SPFx web part for Adaptive Cards integration
NPM Packages
SharePoint Information Architecture
Conclusion
55. Integrating the Google API with SPFx
Structure
Objectives
Google Fit REST API
Overview of the Google Fit REST API
Beginning with Google Fitness REST APIs
Get Started with REST API
Google Developer Playground
List all data sources
Get the Number of Steps
Get the start date and end date
Develop the SPFx web part todisplay Google Fit information
NPM Packages Used
Define State
Implement the Service
Code the web part
Include Authorized JavaScript Origins
Verify the web part
Conclusion
56. SPFx Development with SharePoint On-Premises
Structure
Objectives
Decide the SPFx Version
Prepare SharePoint On-Premises for SPFx
Develop the SPFx Web Part
SPFx Support for SharePoint 2019
Verify the SPFx webpart on the local SharePoint workbench
Set up App Catalog
Enable Scripting Capabilities (SharePoint 2019 only)
Prepare the Package
Upload the Package to the App Catalog
Add the SPFx Solution to the SharePoint Site
Place SPFx web part on the modern page
Conclusion
Appendix
Glossary
Index
Recommendations, Resources & The Final Words
The book hasn't received reviews yet.