SharePoint Framework Overview


Posted By : Ranjan Pandey

Added :

No Comments


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 works for SharePoint Online & SharePoint On-Premise (SharePoint 2016 Feature Pack 2). SharePoint Framework can be used  for developing client-side web part & extensions

Toolchain

SharePoint Framework development toolchain is based on common open source development tools npm, TypeScript, Yeoman, webpack & gulp.

SharePoint framework toolchain

SharePoint Add-in model

Advantage:

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

Disadvantage:

  • 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 are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

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 client webpart


Extensions

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.

 

SharePoint Framework extension application customizer

 

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

 

SharePoint Framework extension field customizer

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

 

SharePoint Framework extension command set

Workbench

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: 

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

local workbench

 

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

 

hosted workbench

 

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments