Technology

Exploring SPFx Framework and Its Essentials

Last Update: August 19, 2024

Contributors

Vivasoft Team

Tech Stack

0 +

We are about to begin a journey into SharePoint development. For those looking to customize SharePoint and enhance Microsoft 365 services in innovative ways, the SharePoint Framework (SPFx) is the key to success.

In this article, we’ll dive deep into the essentials of SPFx, exploring its core components and concepts, which are essential toolkits for developers working within the Microsoft ecosystem. Additionally, we’ll demonstrate how to build a sample SPFx web part project.

Sharepoint Framework (SPFx): What is it?

In a nutshell, the SharePoint Framework (SPFx) is a client-side technology that provides developers with the tools and resources necessary to create modern, responsive, and engaging user experiences.

This not only applies to SharePoint environments but also extends to other Microsoft 365 services, allowing the same JavaScript based application to be utilized in Microsoft Teams, Microsoft Viva, Outlook, and SharePoint. So build once, expose across Microsoft 365.

SPFx is basically a page and web part model that supports client-side development, designed to be portable, ready to use, and responsive from the beginning. This design ensures easy integration with SharePoint data, and extends Microsoft Teams and Microsoft Viva.

SPFx operates within the context of the current user and browser session utilizing popular JavaScript frameworks, tools, and libraries. The picture below shows an example case where SPFx is utilized to extend functionality across other Microsoft 365 products.

How SPFx Works

In SharePoint, there are specific areas designated for customization using SPFx, including web part zones, top and bottom placeholders, field customizers, and command sets. When a page is requested, SharePoint initially checks for any SPFx components. If found, it loads the SPFx runtime. Otherwise, the runtime is not loaded.

The following mechanisms illustrate how SPFx enables the development of fast, integrated, and powerful web parts and extensions that run smoothly within a browser:

Page Load and Initialization

When the SPFx runtime loads, it retrieves a list of components that need to be rendered on the page. It checks each component’s dependencies, which include the JavaScript bundle, and gathers information about the SharePoint site, user details, permissions, and other relevant environmental data.

Web Part Rendering

SPFx web parts are linked to specific DOM elements on the page. The user interface of these web parts is rendered directly into these elements using libraries such as React or Angular.

This client-side rendering approach enhances application responsiveness by processing data and elements locally in the browser, which reduces reliance on server-side rendering.

Integration with SharePoint Data

To integrate with SharePoint data, SPFx web parts make asynchronous API calls to SharePoint Online or Microsoft Graph APIs. The framework utilizes context objects to effectively interact with the environment, which includes details about the user, page, and SharePoint site.

User Interaction

As users interact with a web part, it processes the input, can make further API calls, and dynamically updates the UI without needing to refresh the page.

Security and Permissions

Each web part operates within the permissions of the logged in user, ensuring that all data requests and interactions are securely managed according to user permissions.

SPFx Development Environment

Before we explore the essentials of SPFx, let’s walk through a step-by-step guide to the prerequisites and preparation steps for setting up the development environment.

Step 1: Ensure having access to SharePoint Online or a Microsoft 365 tenant. If we don’t have the Microsoft 365 subscription, we can utilize the Microsoft 365 Developer Sandbox option.

Step 2: Install the following toolchains :

Web browser: Download and install a modern web browser like Microsoft Edge, Google Chrome.
Code Editor: Download and install any code editor or IDE that supports client-side development to build your web part and extensions, such as Visual Studio Code, Webstor
Node.js : Download and Install the most recent LTS version of Node.js. We can check the installed version by executing the following command.

				
					node --version

Gulp: Run the following command to install the Gulp CLI globally

				
					npm install gulp-cli --global

Yeoman: Enter the following command to install Yeoman globally.

				
					npm install yo --global

Yeoman SharePoint generator: Install the SharePoint Framework Yeoman generator globally, enter the following command.

				
					npm install @microsoft/generator-sharepoint --global

Essential Components of SPFx

As we explore the essentials of the SharePoint Framework (SPFx), several key components come into play. These components are fundamental for understanding and effectively utilizing SPFx for SharePoint development. Here are the essential components of SPFx:

Toolchain

SPFx is equipped with various tools and utilities that streamline the development, build, and deployment processes.

This toolchain ensures a smooth development experience and helps maintain consistency across projects. Let’s discuss the tools & libraries which are useful in the SPFx development:

Yeoman: Yeoman enables productive project initiation with scaffolding, and the SharePoint Yeoman generator is integrated into the framework to support the creation of new projects with standardized boilerplate code.

Gulp: Gulp is used for automating tasks such as compiling TypeScript, bundling and minifying files, and packaging SPFx solutions for deployment.

It simplifies the development process, enabling efficient local testing and easier deployment to SharePoint environments. Gulp ensures that developers can focus on code rather than build configurations.

Webpack: Webpack is used to bundle and optimize JavaScript applications. It manages dependencies, minimizes bundle sizes through techniques like minification, and supports various asset types like CSS and images.

Webpack improves development efficiency and ensures that the code is optimized for performance in SharePoint environments.
Node Package Manager (npm): npm handles the installation, updating, and management of packages, utilizes package.json for project configuration, and supports script automation for tasks like building and testing through Gulp and Webpack.npm ensures stability in project environments by managing package versions and facilitates reuse and module sharing across projects to maintain the development workflows.
JavaScript Frameworks and Libraries: SPFx commonly used JavaScript frameworks and libraries include:
- React: For building dynamic and responsive user interfaces.
- Angular: Useful for creating scalable single-page applications with robust features.
- Vue.js: Known for its ease of use and efficiency in developing modern web interfaces.
- PnPjs: Streamlines interactions with SharePoint and Office 365 REST APIs.
- jQuery: Simplifies HTML document manipulation and event handling, though less favored in modern development.

SharePoint Workbench

The SharePoint Workbench provides a local development environment where developers can test and debug their SPFx solutions.

It provides a simulated SharePoint environment where developers can preview and interact with their web parts and extensions before deploying them to a live SharePoint site.

Extensions

SPFx extensions allow developers to extend the capabilities of SharePoint beyond its out-of-the-box features. Extensions allow for customizations such as adding header and footer elements, modifying list views, injecting scripts and styles, and integrating with third party services.

This includes customizing different types of extensions, such as application customizers, field customizers. Following are the extension types SPFx provide:

Application Customizer: It allows developers to add scripts to the page, access HTML element placeholders, and extend the SharePoint user interface. For example, we can add header and footer elements to all pages, inject additional tracking scripts, or modify the appearance of certain page elements globally across the sharepoint site.
Field Customizer: It provides a way to customize the rendering of a SharePoint field or column in a list view. We can use Field Customizers to modify the showcase of field values by applying text styles, icons, and even interactive components. It improves how data is presented without affecting the underlying data structure.
Command Set: It enables adding custom actions to SharePoint lists and libraries. With custom command Sets, we can create new menu options or toolbar buttons in SharePoint user interfaces. This allows for actions like triggering workflows, navigating to custom forms, or integrating with third-party systems, directly from the list or library view.

Web Parts

Web parts are the building blocks of SPFx development. They are reusable components that can be added to pages and can also be used to implement extensibility in Microsoft tenants to enhance functionality and user experiences.

Web parts can range from simple components displaying static content to complex interactive elements incorporating dynamic data and interactions.

Let’s build a simple web part to understand its functionality, follow SPFx Development Environment section to setup the dev environment:

Create a new project directory and navigate to that directory.

				
					md spfx-web-part
cd spfx-web-part

To create a new SPFx project run the following command.

				
					yo @microsoft/sharepoint

Yeoman SharePoint Generator will guide us through a series of prompts to set up the new project, we can select as follows:

This scaffolding and installation process may take 2-3 minutes after completing Yeoman will display a success message like following:

Strongly Typed Hubs

Install developer certificate to be able to run the project locally, as the SPFx client-side toolchain uses HTTPS endpoints by default.

				
					
gulp trust-dev-cert

To preview the sample web part, we need to configure the ‘serve.json’ file located in the ‘config’ folder within the ‘sample-web-part’ directory as follows: update the ‘initialPage’ field to an actual tenant domain address, for example: ‘https://vivasoft.sharepoint.com/_layouts/15/workbench.aspx’

Finally, execute the following command to run it on a local server and launch the hosted workbench:

				
					gulp serve

The above command executes a series of Gulp tasks to start the local web server, open the default browser, and load the hosted workbench to preview web parts from the local development environment.

To Add the “HeloWorld” web part in the hosted SharePoint workbench, select ‘add’ icon – this opens the toolbox where we can see a list of web parts available to add.

Now we have just added our first web part to a client-side page.

Packaging and Deployment

Packaging and deploying SPFx solutions to SharePoint environments require an understanding of the packaging and deployment mechanisms.

We bundle solution files, package them into SharePoint solution packages (.sppkg), and deploy them to SharePoint app catalogs or site collections. Let’s explore how to package and deploy a SPFx web part in a SharePoint environment.

First, go to the SPFx web part project directory that we build in the Web Parts section and run following command to bundle the web part solution:

				
					gulp bundle

Then, enter following command to package the client-side solution that contains the web part:

				
					gulp package-solution

The above command creates the following package: ./sharepoint/solution/sample-web-part.sppkg

Now, we can deploy the web part into the SharePoint environment by uploading sample-web-part.sppkg package into the site’s app catalog.

				
					gulp package-solution

SharePoint will display a dialog to trust the client-side solution to deploy and ask to enable the app, that will make this app available across all sites.

Conclusion

SharePoint Framework (SPFx) revolutionizes SharePoint development by providing a modern and flexible platform for building custom solutions.

By incorporating SPFx and its essential components, developers can create interactive web parts and extensions that advance the SharePoint user experience.

Now exploring SPFx is a worthwhile attempt that opens up a world of possibilities for building innovative SharePoint solutions.