Getting Started With SPFx (SharePoint Framework)

Introduction

In this article, we will learn about a development framework called SPFx (also known as SharePoint Framework) which is generally used for client-side SharePoint development. It supports easy integration with SharePoint data and the new version also supports Microsoft Teams data. We can use SPFx to develop client-side web parts in SharePoint Modern and classic pages. Also, we can develop extensions in a Modern environment. In classic environments, only web parts are supported. SPFx has an advantage over traditional web parts development using basic javascript. In SharePoint Framework we can host our web parts as a solution package and can publish them as an app so we just need to add the solution as an app in our SharePoint site so web parts will be available on every page of the site.

Prerequisites

To learn development in SharePoint Framework developers should know about SharePoint Architecture and Basic knowledge of working with data in SharePoint lists and libraries.

Major features of SPFx

We have the advantage of getting the context of the current user and current site.
We can make it responsive and renderable on a normal page.
We can access the page life cycle to the call function.
SPFx supports many Javascript frameworks for development like React, Handlebars, Knockout, Angular, and Vue.js.
SPFx has great support of development tools like NPM, TypeScript, Yeoman, webpack, and gulp.
SPFx has the support of Fluent UI which makes it easy to design responsive Office UI components and also we can develop web parts that can match up the SharePoint UI.
SPFx web parts are supported in both Classic and Moden pages.
SPfx Solution can be managed from the central App catalog.
Web parts properties make web parts more configurable.
SPfx web parts are also supported in MS Teams and also MS Teams context can be used in SPFx web parts.

Type of Development Solutions

Web parts

SPFx Web parts are a small block of UI or we can say segmental component that we can add to the SharePoint page. There are many OOTB web parts available in the SharePoint Modern page like the list web part, library web part, Quick links web part, Image Gallery web parts, etc. but we can develop custom web parts using the SharePoint Framework (SPFx). SPFx can fetch the current site context so we can develop according to the current list and libraries and also for the currently logged-in user to make the web parts personalized. Below is the Hello World web part with description properties,

Extensions

Web parts can be only used within the page but with the use of SPFx web parts we can extend the user experience. Using SPFx Extensions we can customize the other parts of the SharePoint like the Notification area, Header, Footer, toolbars, and list views. Extensions can not run in a Classic environment. SPFx Extensions can extend the SharePoint user experience to Modern SharePoint Pages, Lists, and Document libraries using SPFX tools and libraries for client-side development.

There are three types of extensions available in SharePoint Framework (SPFx),

Application Customizer
Using the Application customizer extension, we can add scripts to SharePoint Modern pages and Modern UI of list and library view pages. It will not load on the classic view of lists and libraries. Using the Application customizer we can fetch the specific HTML element placeholders and render the custom components there. Application Customizers are used mostly for building Header and Footer development because using Application customizer we can fetch Top and Bottom placeholder where we can render header and footer on SharePoint Modern UI.
Field Customizers
Field customizers are used to modify the views and fields within the list in Modern UI. In the Classic list view, we have the option to modify the data fields using JSLink but in Modern UI we can use field customizers to render custom data fields.
Command Sets
We can develop custom actions for SharePoint lists and libraries. List view Command sets can be run for specific list/library items. List view command set appears as Command button on the Command bar of the list and library view and context menu of list/library items. We can specify whether the Command set will appear in the list or library in the elements.xml file. Also, we can set where the Command set will appear in the list/ library view.

Users can choose the SPFx solution according to the requirement and develop an advanced tool with enhanced Fluent/Office UI which can be matched with the current SharePoint UI.

Libraries

We can create third-party SPFx libraries using SharePoint Framework. Libraries are a bunch of code that can be reused in other SPFx web part and extension solutions. We can link the library in the solution and import the code file from the library and use the library function by creating its objects. Libraries are useful to avoid redundant code from the project and reuse the same code in multiple projects.

Conclusion

In this article, we learned the basics of the SharePoint Framework. If you find anything that I am missing in this article or you find it useful please provide your valuable feedback.