SPFx Application Customizer Example

You know that developers use the Application Customizer in the SharePoint Framework (SPFx) to add custom scripts and HTML to the header and footer of every page on a modern SharePoint Online site.

I will explain the SharePoint Framework (SPFx) extensions here and how to create an SPFx Application Customizer. Finally, I have shown how to deploy the spfx application customizer to a SharePoint Online site.

SharePoint Framework (SPFx) Extensions

The SharePoint Framework (SPFx) Extensions are tools for adding custom features and enhancements to SharePoint sites.

By using SPFx extensions, we can enhance the user experience on modern pages and in SharePoint document libraries. We can customize SharePoint notification areas, toolbars and list data views with SPFx extensions.

The SPFx includes five extension types:

• Application Customizers: These allow developers to add scripts to SharePoint pages and customize the rendering of well-known HTML element placeholders on those pages.
• Field Customizers: These extensions modify how data fields are displayed within lists in SharePoint, providing customized views.
• ListView Command Set: This type extends SharePoint’s command surfaces, adding new actions to toolbars and context menus. Developers can implement specific behaviors using client-side code.
• Form Customizer: This extension allows customization of SharePoint modern forms, providing flexibility in how forms appear and behave.
• Search Query Modifier: This extension modifies search queries before they are executed by SharePoint, allowing developers to customize and refine search results based on specific criteria.

Create an Application Customizer using SPFx

Now, we see how to create an application customizer extension using SPFx. If you are new to SPFx, check out a tutorial on setting up the development environment for SharePoint Framework.

Open the Node.js command prompt and create a directory using the following command:

md Application Customizer

Navigate to that directory using the following command:

cd Application Customizer

To create an Extensions, we need to run Yeoman SharePoint Generator using the following command:

yo @microsoft/sharepoint

The Yeoman generator will guide you through a series of questions about the solution you want to create. Like below:

• What is the name of your solution? You can enter your solution name here. For example, I am naming mine ‘WelcomeInfoBar.’
• Which type of client-side component to create? Give an Extension.
• Which type of client-side extension to create? Give an Application Customizer.
• What is your Application Customizer name? Enter your Application name. For example, I am naming mine ‘PersonalizedWelcomeBar.’

After creating the project, it will take some time to complete. Once finished, you should see a success message like this:

Next, you need to open this folder in VS code using the below command:

Code .

Then, the VS Code automatically opens with these files.

Here, in the onInit() method, we are displaying the alert message by default.

Here, I want to create a feature that displays specifically the top placeholder:

• A welcome message personalized with the current user’s display name and their site name.
• The user’s email address and the current date and time.

Like the screenshot below.

Before we write code, we need to install Additional Libraries using the below command:

npm install @microsoft/sp-http