SharePoint Framework Overview
What is SharePoint Framework?
SharePoint Framework is a new development model that provides full support for client-side SharePoint development by using open source client developments tools. The SharePoint Framework is the next evolution in SharePoint development.
SharePoint Framework development toolchain is based on common open source development tools npm, TypeScript, Yeoman, webpack & gulp.
SharePoint Add-in model
- Security – SharePoint Add-in model creates an iFrame where the actual implementation resides & executes. It is more secure because it’s external to the system and has no access to the current DOM/connection.
- iFrame is slower – The page loading under iFrame should go through authentication & authorization.
- Responsive Design – iFrame makes it difficult to create responsive designs and inherit styling information.
Set up SharePoint Framework development environment
You can use Windows, Mac, or Linux machine for doing SharePoint Framework development. You should Install developer tools:
- Install NodeJS
- Install Visual Studio Code (Code editor) . you can use any other code editor such as Atom, Webstorm that supports client-side development.
- Install Yeoman and gulp
- Install Yeoman SharePoint generator
Client side web parts
Client-side web parts can run on SharePoint Online and on-premise environment (SharePoint 2016 Feature Pack 2). Once you have configured SharePoint Framework dev environment, a client-side web part can be created in few steps.
SharePoint Framework extensions are client-side components that run inside the context of a SharePoint page. Extensions can be used to extend the SharePoint user experience. Extensions can be used to customize user experience within modern pages and document libraries. SharePoint Framework includes three new extensions types:
- Application Customizers: Application customizer can be used to customize SharePoint pages by accessing HTML element placeholders and extend them with custom renderings.
- Field Customizers: Field customizer can be used to customize the rendering of a field in a list view by using custom HTML elements and client-side code. JSLink customizations can be migrated to SharePoint Framework extensions without the need to make any changes.
- Command Set: SharePoint Framework extension command set can be used to add custom ECB menu items or custom buttons to the command bar of a list view for a list or a library.
One new part of the build toolset for SharePoint Framework is called Workbench. Workbench is a tool that can de used by developers to build and test their SPFx solutions. There are two versions of the workbench 1. Local workbench 2. SharePoint Hosted workbench.
Local workbench runs locally on the development machine and do not have connection with SharePoint. This workbench can be used to test functionality of web part with mock/dummy data. Local workbench URL is https://localhost:4321/temp/workbench.html
SharePoint Hosted Workbench:
SharePoint Hosted workbench is hosted inside SharePoint and is used to build & test the web part by using SharePoint data and context. you can access SharePoint hosted workbench by opening this application page _layouts/15/workbench.aspx, complete URL will look like https://[tenantname].sharepoint.com/sites/appdev/_layouts/15/workbench.aspx
Ranjan is a Microsoft Certified Trainer, author, founder, freelance corporate trainer having 12.5 years’ hands-on experience in Microsoft technologies including Azure, Power Apps, Power Automate & Microsoft 365 (SharePoint). He has delivered 300+ corporate training & trained 5000+ professionals across the globe with excellent feedback.