SharePoint SPFx is a simple way of utilizing data through open source tools. The modifications can be easily applied and customizations are simpler. It enables you to use whatever JavaScript framework you choose to develop SPFx solutions, and constructing SharePoint solutions isn’t restricted to Windows and Visual Studio.
Because SharePoint Framework makes use of a widely known web development stack, spfx solutions may be created on any platform, including OS X and Linux, using any code editor of your choosing. In this Microsoft powered SharePoint development model, it does not employ a proprietary model but rather tools and techniques that are widely utilised by developers across all platforms and stacks. In addition, the Product Group is dedicated to building their solutions on top of the framework using only publicly available APIs, which will support developers.
What can you build with the SharePoint framework?
With SPFx, we can build three types of things: Web parts, Extensions, Library Components. And these include sub-components too.
Web parts:-Web parts are the boxes of functionality added to a page and other web parts & can access DOM elements of the page. They run in the current context of the SharePoint page. It can be developed using HTML, CSS, JavaScript and can leverage frameworks & libraries like Angular, React, jQuery. All web parts have public properties that we can use to configure the web part.
Extensions:-Extensions allow developers to extend or augment the SharePoint user experience for modern pages & document libraries. This can be useful for branding across sites in the entire tenant. SPFx includes three types of extension:-
Application Customizers:- This enables developers to add scripts across SharePoint pages and access HTML placeholders on the page, e.g., header & footer placeholders. It can be used for branding across sites.
Field Customizers:- A Field Customizer allows us to create modified views to data for fields & columns within a list or library. For example, we can use it to display colored bars or a KPI instead of a text-based percentage in a field to have a more engaging experience.
Commands Sets:- Command Sets help in creating custom commands for lists & libraries. It allows adding new actions by extending the command surfaces of SharePoint
Library:-A library component allows creating shared code that can be referenced & used among all components in the tenant.
Microsoft Teams Solution:-The SPFx web parts can be used to develop custom apps for Microsoft Teams. A web part's manifest file can be updated to indicate that it can be used as a Microsoft Teams tab. In this way, a single web part can be added to the SharePoint page and the Microsoft Teams custom app.
SharePoint Framework : Set Up development Environment
Let us see how to set up the development environment to kick start with SharePoint Framework development (SPFx).
For Setting up of development environment for SharePoint Framework, you will have to:
Install Developer tools
Install Node JS. Make sure you install LTS (Long Term Support) version.
Download MSI installer from https://nodejs.org/en/
SharePoint Framework : Run the installer
Nodejs installation is also straightforward. Double click on the setup file.
On the welcome screen, click next.
The next screen would be End-user license agreement, check ‘I agree…’ and click Next.
In the following screen, select destination path ‘C:\Program Files\nodejs\’ , you can choose to install on another path also.
In the next screen, to select features, keep everything default.
Then check on Automatically install the necessary tool and click on Next.
On the next screen, we will get the Install button. Click on Install.
Based on your security settings, it might ask to allow the below. Click Yes
Once the installation will over, it will display a successful message like below:
SharePoint Framework (SPFx) Install code editor
We can use any of the below code editors or IDE that supports client-side development to build your web part:
Visual Studio Code
Atom
WebStorm
Note pad++
I prefer to use the “Visual Studio Code” editor. We can download it from here: Visual Studio Code
End-user license agreement, there are two choices a) I accept the agreement b) I do not accept the agreement choose “I accept the agreement” and click Next.
In the following screen, select destination path ‘C:\Users\Nitin puri\AppData\Local\Programs\Microsoft VS Code’, you can choose to install on another path also. and Click Next
Once you download the visual studio code, double click on the setup file to start the installation.
Run the setup wizard and follow along with the instructions to install. It is pretty much self-explanatory. In the Additional task link below, use the below-preferred option. It will help you later.
On the next screen, we will get the Install button. Click on Install.
Once you click on the Install button, the installation will start like below:
Then you can see the installation over, and it will show a successful message.
Features of Sharepoint Framework:
Open source tooling: SPFx is an open & connected platform. It leverages all the open-source tools & can be installed on any machine.
SharePoint 2019 On-Premise Customization: The new SharePoint Server 2019 can utilize modern SPFx features to build & deploy solutions.
Capabilities to customize modern UI: Earlier, we could customize classic pages using JavaScript injection, but there was no option to customize modern SharePoint pages. With SPFx, we have the flexibility to customize modern lists, libraries, pages to enhance user experience.
Can leverage many JavaScript frameworks: We can choose anyone from several JavaScript frameworks to develop client-side web parts. Here are some popular ones:- React, Angular, Vue.js, Handlebars.
Deploying SPFx web parts as MS Teams tabs: SPFx v1.8.0 onwards, SPFx web parts can be added to Teams as tabs with little customization. This allows utilizing web parts more & gives them more exposure.
Library Components, a new feature: Developing reusable code that can be shared & reused among many components can be beneficial. SharePoint Framework provides this feature to create standard services that many web parts can utilize.
Benefits of SharePoint Framework:
Total absence of iframes. SPFx operates in the user’s browser
SPFx enables faster rendering in the browser and normal page DOM
All the controls are responsive and they are rendered in the normal DOM
In addition to renders and configuration changes, devs can access the lifecycle of all other SharePoint Framework components
SPFx is framework agnostic. You can use any framework that you like. React, Angular, Knockout - anything goes
SPFx allows the use of open source development tools like npm, TypeScript, Yeoman, webpack and Gulp
SPFx works with both classic pages and modern SharePoint pages
Development in SPFx is safe and secure
Controlled visibility - with SPFx, devs can give viewing option to the webpart in the App Catalog of the site contents to anyone they like
Earlier knowledge of CSOM comes in handy here - the data models are not changed and everything is completely transferable
SPFx supports mobile views of SharePoint Online sites
Resource: evolvous.com
The Tech Platform