5 Ways to Use the SharePoint Framework

Whether your company is running SharePoint Server 2016, 2019, or SharePoint Online, the SharePoint Framework (SPFx) customization model has a lot to offer. It has revitalized Microsoft’s collaborative platform with a broad array of coding options, freeing developers from the limitations of these proprietary tools. In particular, SPFx has become Microsoft’s answer to the growing demand for expanded customization in their cloud version of the platform.

In case you haven’t yet begun to take advantage of SPFx, here are five ways you can use the framework itself as a full solution or in concert with other development and customization tools.

1. Develop a Custom Web Part

Previously, the act of building a web part was a matter of straightforward coding. This “classic” customization process involved injecting JavaScript arbitrarily into a SharePoint page and then manipulating the Document Object Model (DOM) to enable further code injection, using CSS, HTML, or more JavaScript.

However, one of the big problems with script injection is that it's often performed without any degree of management or control. Poor governance of customization often leads to broken pages and sometimes even jeopardizes security.

SPFx introduces a much more controllable and consistent methodology for creating new web parts. A key advantage of SPFx is its use of TypeScript, which is more developer-friendly than JavaScript, especially when it comes to debugging code and identifying potential security issues. It also supports multiple coding frameworks, allowing developers to customize with toolsets like React and AngularJS.

If your organization uses SharePoint 2016 or 2019 on-premises solutions, SPFx increases the range of client-side customization possibilities, reducing the need to deploy managed code on the server side.

2. Make a Mobile-Friendly Solution

Microsoft’s mobility strategy for SharePoint has slowly developed over the last decade, not always keeping up with the modern needs of end users. In fact, SharePoint developers had to go to tremendous lengths to build suitably responsive sites, often hampered by the limitations of apps and add-ins that rendered content inside iframes.

SPFx has enabled a transformation in the development and customization of responsive SharePoint solutions. This has finally allowed software engineers to build a solution with SharePoint Server or SharePoint Online that is user-friendly on all devices. Of course, this usability has been greatly enhanced by the availability of Microsoft's SharePoint mobile app as well.

3. Brand Your SharePoint Site

With one or two caveats, you can also use SPFx to brand your SharePoint solution. In fact, if your enterprise uses SharePoint's modern experience, it's pretty much the only way to do so. As for solutions based on classic SharePoint, developers still have carte blanche to use DOM manipulation (as undesirable a practice as it may be) and script injection to customize pages.

The capabilities for modern site branding with SPFx does lack finesse as compared to the freestyle methods used in classical branding. However, when you use it in conjunction with the SharePoint theme engine, the results can be somewhat satisfactory.

Often, it's the most challenging for organizations with a combination of classic and modern sites who want to maintain consistent branding across the platform. While not ideal, companies can choose unsophisticated branding—inspired by standard out-of-the-box modern experiences—as an overall theme.

In general, simplicity is the key to this branding approach. For example, headers and footers should be kept relatively simple so they can be applied to both modern and classic sites. If a transition to a completely modern SharePoint site is not an option for your enterprise, this customization strategy is a straightforward alternative to building and deploying custom web parts.

4. Interrogate the Microsoft Graph

In earlier versions of SPFx, it wasn't very helpful for building client-side web parts that needed to call the Microsoft Graph API. With SPFx 1.6, this issue has been resolved, and it’s now relatively easy to access the Microsoft Graph and other Azure Active Directory APIs using PnPjs. You can take straightforward steps that are popular in the development community, such as:

Develop your custom web part and install the PnPjs libraries
Create a PnPjs custom fetch client that will communicate with Microsoft Graph
Update the permissions request for your web part
Initialize PnPjs with the custom fetch client
Add the code enabling your web part to talk to Microsoft Graph

By using SPFx and PnPjs to link SharePoint web parts to Microsoft Graph, you can create enterprise applications that are highly personalized and deliver stable performance.

5. Future-Proof Your Classic SharePoint Sites

It’s evident that SPFx is mainly designed with modern pages in mind, but some organizations might not be ready to transition from the classic version just yet. However, all enterprises will have to graduate from classic to the modern experience eventually. By rebuilding your current solution using SPFx, switching over to modern pages can be quite easy, especially when the classic version of SharePoint will be considered obsolete.

What about companies using an on-premises version of SharePoint? The reality is that any future-proofing strategy must account for the server-side impact of enhancements made with SPFx. You should be able to employ the approaches above, but you will also need to use provider-hosted add-ins for any server-side code updates.

The Case for Building SPFx Competencies

The SharePoint platform has been around for a long time now, and if your business has a long history of using it for an intranet, document management, or other collaborative solution, it can be hard to let go of old customization habits.

Right now, SPFx is a no-go solution for classic SharePoint sites, so it’s probably too soon to write off tools like SharePoint add-ins, but maintaining some of the old ways should not be an excuse to avoid preparing for an inevitably different future.

This future will require your developers to exercise a different range of competencies to those they currently employ. As SPFx looks set to become the de-facto standard for SharePoint customization within the next couple of years, it’s probably worth confronting these new skills and overcoming any pain points sooner rather than later.

Sandra Lupanova is a SharePoint and Office 365 Evangelist at Iflexion, a software development and IT consulting company headquartered in Denver, Colorado. Sandra focuses on SharePoint and Office 365 capabilities, challenges that companies face while adopting these platforms, and improving SharePoint and Office 365 deployments for maximum benefit. For more information, visit www.iflexion.com or follow her on Twitter @SandraLupanava.