SharePoint Framework (SPFx) Extensions

We know about SPFx webparts but what is these extensions and why do I need them?

These are used to extend our SharePoint page level user experience.

In SharePoint on premise to apply custom branding/style or user experience we used Master pages, but in SharePoint online we cannot use custom master page as the new modern page model does not support it.

To overcome this Microsoft has given us the framework extensions to extend user experience in the page, list/field view and command tool. For example, implement a consistent footer in all pages of your site. And there are 3 types of extensions as below:

  • Application Customizers – Add customization inside the page like top header, footer, etc.,
  • Field Customizers – Customize the field of a list or library like adding a graphical representation to a field
  • Command Sets – Add custom commands to list/library view tool bar to perform your custom action

In this tutorial we will see how to create an Application Customizer – A custom Header and Footer.

Step 1: Create SPFX Extension

As like SPFX webpart we can follow the standard process and create an extension.

Once after the scaffolding is done here is our newly created extension.

Open with Visual studio code using “code .”

Go to “SpfxExtFooterApplicationCustomizer.ts” file which is our base file which is going to add our extension into the page. We could see Microsoft has added the default import tags for us and there is an default class with “Overide onInit()” which triggers a Dialog alert with test message.

Here I am not going to add anything, just let’s try debugging to see what the default extension looks like.

**Note: Before doing that one thing we note is as SPFX webpart we cannot debug these extensions in local workbench, so let us deploy it directly into one of our SharePoint online page.

Step 2: Debug SPFX extension

As we cannot test with local workbench we need to test it against a SP online site. It doesn’t mean we need to deploy it to the app catalog as we did for SPFX webpart, just we need to amend the live site page URL as below in “serve.json”

Open “serve.json” from config folder and update the Site Page URL of your site page. For me I created a new page named “Footer.aspx”

We are ready to debug, lets do

Which opened up my sharepoint online page in a debug mode

To proceed click “Load debug scripts” which allows out extension code to load. Cool I got a dialog window with my test message “Test message”.

I am so happy that have built the SPFX extension so quick without any struggle I faced while creating a SPFX webpart.

Now let’s move on to the original intension to create a Footer and Header for my SP Online site.

Modify the Application Customizer:

Step 1: Install Office UI Fabric

I want my Application Customizer (footer and header) to look like same as office styles so will install the Office UI fabric

As I am big fan, I love to use Microsoft Office UI Fabric 😊

Step 2: Add CSS style

Create a new file named “AppCustomizer.module.scss” under “src\extensions\spfxExFooter” and add the below code in it and save it.

Step 3: Import the added CSS

In “src\extensions\spfxExtFooter\SpfxExtFooterApplicationCustomizer.ts” add import tags just below the strings import statement

Step 4: Add code to create the main footer header placeholders

Open “SpfxExtFooterApplicationCustomizer.ts” file and add these import statements as we need to use the SharePoint modern page Placeholder to insert our footer into it as we do in our on premise classic Master page.

Step 5: Add two strings in Interface

Step 6: Add two private variables inside the class

Step 7: Create a new private method under onInit method

Step 8: Call the new method inside the onInit() method

Step 9: Amend another new private method

This method will write a message in console log when this extension is removed from the page

Step 10: Update the “serve.json” with the two new variables

Step 10: We are ready now to test our new Application Customizer. Go with “Gulp serve”

It builds my extension project and launches a window with below dialog to allow extension to load

Click “Load debug scripts”. That’s amazing to see my custom header and Footer area loaded.

I am much confident now that I can add all my customization, styles and branding to my SP Online site top header section and Footer.

Thanks for stopping by and reading my article. Will see more samples and tutorials on SPFX extensions in upcoming blogs.