Who and Where can the SharePoint Framework (SPFx) be used?

When evaluating the SharePoint Framework, you need to determine not just what you can do, but if your SharePoint environment supports specific customizations and where you can apply those customizations. In this post, learn not only what versions of SharePoint support which SharePoint Framework customizations, but where these customizations can be applied to the page.

This is one of a multi-part series of posts answering the most common questions on the SharePoint Framework. This series, SharePoint Framework Five “W"s & One “H” answered , gives you the best high-level picture of the SharePoint Framework. I ( Andrew Connell ) wrote this series in late 2020 to help people new to the SharePoint Framework get the answers to the most common and basic questions about the SharePoint Framework.

Photo by Bruno Wolf on Unsplash

Photo by Bruno Wolf on Unsplash

In this installment of my SharePoint Framework Five Ws Answered series, I’m going to tackle two questions in one post:

  • Who can use the SharePoint Framework?
  • Where can you use the SharePoint Framework?

Let’s start with the first question:

Who can use the SharePoint Framework?

The SharePoint Framework (SPFx) was released in February 2017 (see: When did Microsoft introduce (and release) the SharePoint Framework? - SPFx v1.0 released February 2017 ) to SharePoint Online.

SharePoint Online: all versions

Ever since then, each release of the SPFx is deployed to SharePoint Online. This means that regardless of the SPFx version your component is created with, it will work in SharePoint Online.

SharePoint Server 2016: SPFx v1.1

Initially the SPFx wasn’t available outside of SharePoint Online. In late 2017, Microsoft shipped Feature Pack 2 (FP2) for SharePoint Server 2016. FP2 included the SharePoint Framework v1.1 (see: When did Microsoft introduce (and release) the SharePoint Framework? - Late 2017: SharePoint Server 2016 gets the SPFx v1.1 )

Due to the nature of SPFx being primarily a cloud-first extensibility model for SharePoint Online, the SharePoint Server 2016 implementation of SPFx has not received any updates beyond v1.1, nor has Microsoft stated any future plans to update it.

For more information on the SPFx in SharePoint Server 2016 Feature Pack 2, see SharePoint Development: SharePoint Framework development with SharePoint Server 2016 Feature Pack 2 .

SharePoint Server 2019: SPFx v1.4.1

When Microsoft shipped SharePoint Server 2019 in September 2018, they included the SPFx v1.4.1. (see: When did Microsoft introduce (and release) the SharePoint Framework? - SharePoint Server 2019 includes support for SPFx v1.4.1 ).

Just like SharePoint Server 2016, Microsoft has not shipped any updates to the SPFx for SharePoint Server 2019, nor have they stated any future plans to update it.

For more information on the SPFx in SharePoint Server 2019, see SharePoint Development: SharePoint Framework development with SharePoint Server 2019 .

In summary, the answer to the question “who can use the SharePoint Framework”, it is customers who have the following SharePoint environments:

  • SharePoint Online (all SPFx versions)
  • SharePoint Server 2019 (SPFx v1.4.1)
  • SharePoint Server 2016 with Feature Pack 2 (SPFx v1.1.0)

Where can the SharePoint Framework be used?

Now let’s answer the question where can you use SPFx. For this, I’m going to focus on the capabilities in the SPFx as far as where they can be used. Some features are only available in specific user experiences (classic vs. modern) while others are only available in a hosted environment vs. on-premises SharePoint installations.

First, let’s tackle the biggest category.

SharePoint Online (modern experience) supports everything

The SPFx was built as the preferred way to customize the modern experience in SharePoint.

This means that everything the SPFx has to offer will work within modern experience, including client-side web parts & extensions.

Check out my "Mastering the SharePoint Framework" on-demand course for developers!

Are you ready to learn the SharePoint Framework? Check out our on-demand video course with over 30 hours of demos, explanation and downloadable code: Mastering the SharePoint Framework!

Start with the FREE Starter bundle that includes three (3) chapters including a walk-through of setting up your developer environment to start creating SharePoint Framework components.

Once you start working, jump to the Fundamentals bundle to learn the basics and start creating SharePoint Framework components. The Ultimate bundle will make you a master at the SharePoint Framework with automated testing, continuous monitoring, implement CI/CD practices, and learn other advanced techniques.

The Ultimate bundle includes the Fundamentals bundle and grants you access to our live monthly office hours meetings as well as access to our student-only mastermind group.

Both SharePoint Online & SharePoint Server 2019 include the modern experience so this means that SPFx web parts & extensions are available in SharePoint Online & SharePoint Server 2019.

Furthermore, SharePoint Online supports everything the latest version of the SPFx has to offer with one exception.

SPFx Extensions: SharePoint Online & SharePoint Server 2019 (modern only)

However, the classic experience in SharePoint Online only supports client-side web parts; SPFx extensions are not supported & don’t work in the SharePoint classic experience.

SPFx Web Parts available everywhere

SPFx client-side web parts are available in all supported versions of SharePoint previously mentioned as well as in both the classic and modern experiences.

Features exclusively available to SharePoint Online

Some features in the SPFx are only available within SharePoint Online due to their cloud-nature. This includes the following features that are only available within SharePoint Online:

  • Tenant-wide deployment
  • Search extensions
  • Microsoft Graph API support (MSGraphClientFactory & MSGraphClient)
  • Microsoft Entra ID-secured endpoint support (AADHttpClientFactory & AadHttpClient)

SharePoint page customization areas

In the post What is the SharePoint Framework? - Introduces a “page contract” in this series, I explained how Microsoft established a contract with developers for which parts of a page could be customized or modified.

These modifications shouldn’t be done using the DOM, rather they should use the API provided to developers.

Let’s first look at a typical modern page in SharePoint Online:

Customization areas enabled by the SharePoint Framework

Customization areas enabled by the SharePoint Framework

I’ve added callouts to the image above to show what areas of he page you can customize. Let’s look at each of these:

  1. The red box across the top is where a top placeholder would go from an application customizer SPFx extension.
  2. The red box across the bottom of the page is where the bottom placeholder would go from an application customizer SPFx extension.
  3. The yellow box in the middle is where a client-side web part would go.
  4. The yellow box on the right is where the property pane with the associated client-side web part goes. This is a component of a web part, not something you can build independently of a web part.

While not shown in the above screenshot, rather shown in the next one, you can also customize the search box at the top, but not visually. The search extension component type allows you to modify the search term sent to SharePoint before it’s submitted. In other words, this extension has no visual component to it.

Now let’s look at a SharePoint library/list page:

Customization areas enabled by the SharePoint Framework's UI Extensions

Customization areas enabled by the SharePoint Framework's UI Extensions

  1. The SPFx command set extensions allow developers to add buttons to the toolbars in lists and libraries. You can also define under what conditions the button should be visible or hidden.
  2. In addition, you can use command set extensions to add menu items to the context menu of items within lists and libraries.
  3. The red box in a list item’s cell is where a field customizer extension can be used to control how a cell is rendered for all items in this list. The field customizer is defined at the column level and has access to all data for the list item it’s rendering results for.
  4. As mentioned above, you can associate a search extension in the site’s search box to modify the search terms sent to SharePoint. There is no visual aspect to this customization.

While not shown in this section screenshot, just like the first screenshot, you can use the application customizer extensions to add a top and bottom placeholder to list pages. In fact, placeholders are defined for all modern pages in a site; they aren’t defined for specific pages.

Conclusion

My goal in this post was to answer the question Who & Where can the SharePoint Framework be used? By now you should have a good grasp on what SPFx components are available to developers to customize SharePoint, what versions of SharePoint support those customizations, and where these customizations can be applied.

This is one of a multi-part series of posts answering the most common questions on the SharePoint Framework. This series, SharePoint Framework Five “W"s & One “H” answered , gives you the best high-level picture of the SharePoint Framework. I ( Andrew Connell ) wrote this series in late 2020 to help people new to the SharePoint Framework get the answers to the most common and basic questions about the SharePoint Framework.

Andrew Connell
Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.
Written by Andrew Connell

Andrew Connell is a full stack developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to helping you be the best Microsoft 365 full stack developer. He lives with his wife & two kids in Florida.

Share & Comment