SharePoint Framework (SPFx) Extensions Application Customizer Example

In this SPFx tutorial, we will discuss what are SharePoint framework extensions and how to create SPFx application customizer for SharePoint Online Office 365.

Table of Contents

SharePoint Framework Extensions Overview

Now, let us understand what are SharePoint framework extensions.

By using SPFx extension, we can extend the user experience within modern pages and SharePoint document libraries.

We can customize the SharePoint notification areas, toolbars, and list data views using SPFx extensions.

There are 3 types of extensions:

Application Customizers: By using SPFx application customizers, we can add scripts, access HTML element placeholders, and extend those placeholders.
Field Customizers: By using SPFx field customizers we can modify the list views.
Command Sets: By using command sets, we can add new actions with client-side code to implement the behaviors.

We can create application customizers using plain JavaScript, AngularJS, or ReactJS, etc. With react, we can also use Fluent UI for a similar user experience to Office 365.

Create SharePoint Framework Extension Application Customizer

Now, we will see how to create an SPFx application customizer for SharePoint Online Office 365.

Open node.js command prompt (Run as administrator).

Then create a folder where you want to create the solution. Run the below commands:

md App-Cust-Example
cd App-Cust-Example

Then run the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

Then you can select the options like below:

What is your solution name?
Then select SharePoint Online only (latest) for the baseline packages.
Where you want to place the files? Select Use the current folder
Select N, to allow the solution to be deployed to all sites immediately.
Select N, select solution contains unique permissions.
Then select Extension, which type of client-side component to create?
Then which type of client-side extension to create? Select Application Customizer from (Application Customizer/Field Customizer/ListViw Command Sets)

sharepoint framework extensions tutorial

Then provide the Application customizer name and application customizer description.

Then it will take sometime and create the project and it will show a successful message like below:

sharepoint framework extensions application customizer

Now, Open the solution using visual studio code.

code .

The folder structure looks like below:

sharepoint framework extensions application customizer example

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

Code:

public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    let message: string = this.properties.testMessage;
    if (!message) {
      message = '(No properties were provided.)';
    }

    Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);

    return Promise.resolve();
  }

SharePoint framework extensions like Application customizers, we can not run in the local workbench. We need to test directly on the SharePoint Online pages.

To proceed further, first create a SharePoint Online site page and copy the URL.

Now, open the serve.json file, which is located in config folder.

There enter the page URL like below:

You can put any page url.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/SitePages/SPFx-Application-Customizer-Example.aspx",
      "customActions": {
        "3e9d7e33-edf4-481f-ab04-70ca13ac17d8": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    },
    "firstAppCustomizer": {
      "pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/SitePages/SPFx-Application-Customizer-Example.aspx",
      "customActions": {
        "3e9d7e33-edf4-481f-ab04-70ca13ac17d8": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    }
  }
}

If you are developing any SPFx solution for the first time, then run the below command at least once:

gulp trust-dev-cert

Now run the below command which will open the SharePoint Online site URL.

gulp serve
gulp serve --nobrowser

Now, it will open the SharePoint page directly open the browser.

Here, click on Load debug scripts like below:

types of sharepoint framework extensions

Now, it will display the dialog box like below:

Deploy SPFx Extension to SharePoint Online

Now, we will see how to deploy the SharePoint Framework (SPFx) extension to SharePoint Online Office 365.

You can stop the solution using the below command.

Ctrl + C

Now, run the below command to bundle and packages the solution (One by One in the same order).

gulp build
gulp bundle --ship
gulp package-solution --ship

Then it will create the .ppkg file in the SharePoint -> Solution folder. It looks like below:

Now, you can upload it into the .sppkg file in the App Catalog site in SharePoint Online.

Once you drag and drop in the Apps for SharePoint, click on Deploy like below:

Once deploy the package, you can see like below:

Once it is deployed, open the SharePoint Online site.

Then click on the gear icon -> Add an app.

Then select the client side solution like below:

Once you can see the Site Contents page, and you can see the solution deployed successfully.

deploy spfx extension to sharepoint online

Now, you can open the SharePoint site and you can see the dialog box like below:

This is how we can build and deploy SharePoint Framework SPFx application customizer in SharePoint Online Office 365.