Written by

Arut Selvan

Share

  

Category

see all categories
intranet as a service

How to create SharePoint Framework(SPFx) Extensions?

To change the user experience of a classic SharePoint site, we can customize or build our own master page files and deploy it as a solution or a feature or a file in SharePoint. But the modern SharePoint site is built using modern script developmental tools like React js and knockout js which does not support classic master pages. To expand this modern user experience, we cannot proceed with old methodologies like master pages. Instead Microsoft has introduced SPFx extensions, where you can able to customize or boost the user experience of the modern site.

SPFx has three extension types,

Application Customizers

1. Allows html placeholders with custom rendering.
2. It is helpful in embedding js code snippets.
3. Deployment scope varies from Site collection to Site to list level.

Field Customizers

1. It is helpful in modifying data views in a list.
2. It can be used along with site column or a list column to override its presentation in the list.

Command Sets

1. It helps to extend the SharePoint Command surfaces to add actions, which can work with client-side codes.
2. Toolbars and context menus can be created using this.
3. Helps to add action buttons to the list.

Create SPFx Extensions:

                Before starting with the development, we should setup the development environment. Click this link to know how to configure or setup your environment.  Make sure that you’re using the latest version of Yeoman SharePoint generator. To get the latest version of SharePoint generator, run the below cmd.

                npm update -g @microsoft/generator-sharepoint@latest

To create SPFx Extension solution, run below command.

yo @microsoft/sharepoint

It will ask for solution name, target of your component. I chose “SharePoint Online only”.

SharePoint online

Then folder to place the solution. Give the necessary details. Then comes the deployment type, this will handle the automatic installation of extension to your tenant which means the add-in will be available in all your site collection automatically. If you don’t want to do this click No and you can install it the site in which you need it. I am proceeding with No.

SP Online

Key step in this, choosing client-side component. Choose Extension since we need to create SPFx extensions.

SP-1

I am developing a header for the modern site. So, I am choosing Application Customizer in the next step.

modern site

In the next steps, we should give the title and description for the extension.

meta data

It will take some time to prepare the solution for you and finally you will be getting the below screen on successful completion of the solution creation.

SPFX Online

I am going to use Visual Studio Code IDE to develop the extension.

Use gulp serve to run your application. To it use the below URL

Leaderboard_CDR

https://<your_site_collection_url> /SitePages/Forms/ByAuthor.aspx?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests%2Ejs&customActions=%7B"<ID_From_your_manifest_json>"%3A%7B"location"%3A%20"ClientSideExtension%2EApplicationCustomizer"%2C"properties"%3A%20%7B"testMessage"%3A"Test%20message"%7D%7D%7D
Debug Scripts

 It will show the security warning confirmation window. Press “Load debug scripts” to run the base application.
Use the below code to find the top placeholder of the page and customize it. I just printed some content on the header part.

Replace your applicationcustomizer.ts code with the below one.

import { override } from '@microsoft/decorators';

import { Log } from '@microsoft/sp-core-library';

import {

  BaseApplicationCustomizer, PlaceholderContent, PlaceholderName, PlaceholderProvider

} from '@microsoft/sp-application-base';

import { Dialog } from '@microsoft/sp-dialog';

 

import * as strings from 'ModernSiteHeaderApplicationCustomizerStrings';

 

const LOG_SOURCE: string = 'ModernSiteHeaderApplicationCustomizer';

 

/**

 * If your command set uses the ClientSideComponentProperties JSON input,

 * it will be deserialized into the BaseExtension.properties object.

 * You can define an interface to describe it.

 */

export interface IModernSiteHeaderApplicationCustomizerProperties {

  // This is an example; replace with your own property

  testMessage: string;

}

 

/** A Custom Action which can be run during execution of a Client Side Application */

export default class ModernSiteHeaderApplicationCustomizer

  extends BaseApplicationCustomizer<IModernSiteHeaderApplicationCustomizerProperties> {

 

  @override

  public onInit(): Promise<void> {

    let topPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);

    if (topPlaceholder) {

      topPlaceholder.domElement.innerHTML = `<div>

                  <div style="text-align:center" class="ms-bgColor-themeLight ms-fontColor-black">

                    Hello!!! This is the header part of the page.

                  </div>

                </div>`;

    }

   

    return Promise.resolve();

  }

}

To run this on your site collection URL, use “gulp bundle” command to bundle the solution. Then you should package the solution using “gulp package-solution” command.

The sppkg package will be generated. Upload the package to your appcatalog.

SPPKG

Then, install the app in your site.

Install SPFx Extension

Run your application using “gulp serve --nobrowser” and open any modern site page. You will see the extension on the top.

gulp serve --nobrowserI hope this is useful. Let's make SharePoint modern site's user experience better. Post your queries and comments in the below comment box. 

Arut Selvan

Written by Arut Selvan

A technology enthusiast keen in learning & exploring new Microsoft technologies. Predominantly working on Microsoft 365, SharePoint & Azure. Currently working with "Hubfly - A unified digital workplace" as a Product Engineer, Arut brings in the new flavors of the technology to the product. He ensures we are always on the edge in our technology stack. He brings in innovation to the product with his out of the box thinking. He is also a Microsoft certified professional.