How To Create SharePoint Framework(SPFx) Extensions

SharePoint is a phenomenal collaboration platform, where we can manage our intranet sites. It is customizable in terms of theming. 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
  • Allows HTML placeholders with custom rendering.
  • It is helpful in embedding js code snippets.
  • Deployment scope varies from Site collection to Site to list level.
• Field Customizers
  • It is helpful in modifying data views in a list.
  • It can be used along with site column or a list column to override its presentation in the list.
• Command Sets
  • It helps to extend the SharePoint Command surfaces to add actions, which can work with client-side codes.
  • Toolbars and context menus can be created using this.
  • Helps to add action buttons to the list.

Create SPFx Extensions

Before starting with the development, we should set up 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, the target of your component. I chose “SharePoint Online only”.

Then you'll get a folder to place the solution. Give the necessary details. Then comes the deployment type, this will handle the automatic installation of an 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.

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

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

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

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.

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

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

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.

Then, install the app in your site.

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