SharePoint Framework Extensions Overview

Overview

SharePoint Framework (SPFx) was launched in February 2017 which changed the perspectives of SharePoint developers. Developers then started to build and deploy modern client side web parts using SharePoint Framework across their Office 365 tenants. We will also see this available soon in SharePoint OnPremise version of SP2016.

Earlier, development scenarios included adding Script Editor web parts all over the place on SharePoint site. Troubleshooting the issues to find out which script on page does the trick was very tricky. SharePoint Framework brought some governance to developers' lives to address these issues.

Recently there was an announcement of SharePoint Framework extension.

How will SharePoint Framework Extensions help?

SharePoint Framework Extensions has an ability to expand further SharePoint modern UI, which includes site, list, and command extensions, and Graph HttpClient support.

SharePoint Framework includes three new extension types:

Application Customizers

• Allows predefined HTML element placeholders and extend them with custom renderings.
• Used to embed visible or hidden JavaScript on the SharePoint site
• It can be added to Site collection, site or at list scope

Field Customizers

• Allows us to modify views to data for fields within a list.
• Can be used to override field presentation in the list
• Can be used with site columns or directly on the field in list.

Command Sets

• Allows developers to extend command surfaces of SharePoint to add new actions, along with client side code that can be used to implement behaviors.
• Can be used to provide action buttons to list
• Supports toolbar and context menu

Update Generators for SharePoint Framework Extensions

SharePoint Framework Yeoman generator is updated recently to support the SharePoint Framework Extensions.

If you already have the Yeoman generator installed, you will have to update it by following below instructions:

• Open command prompt.
• Type yo.
  
  
  
  
• Select option “Update your generators”.
• Select @microsoft/generator-sharepoint.
  
  
  
  
• Hit Enter to update the microsoft/generator-sharepoint

Useful commands

1. Update your SharePoint Framework Yeoman generator.
   
   npm update -g @microsoft/generator-sharepoint@latest
   
   You may run this command as you want, if there is no update available – the command will simply return.

2. Check the SharePoint Framework Yeoman generator version
   
   npm view @microsoft/generator-sharepoint version

3. npm list
   
   npm list -g @microsoft/generator-sharepoint
   
   Displays information of installed package on your workstation. Optionally you may use -g parameter to get information on the globally installed package.
   
   
   

Create an SharePoint Framework Extensions Proejct

1. Open Command Prompt
2. Run the below command
   
   yo @microsoft/sharepoint

3. When prompted
   
   
   1. Enter the solution name
   2. Choose Extension (Preview) as the client-side component type to create
   3. Choose any of below customizer to create
      
      
      1. Application Customizer
      2. Field Customizer
      3. ListView Command Set
         
         
         

4. Enter name of your extension and press Enter
5. Enter description of your extension and press Enter

Yeoman will install the required dependencies and start scaffolding the solution files. This might take a few minutes to generate the project.

Visual Studio Extension for SharePoint Framework

Visual Studio Code is one of the editors for developing SharePoint Framework web parts and SharePoint Framework Extensions.

If you are a Visual Studio enthusiast, SharePoint Patterns and Practices group recently have released a Visual Studio extension.

How does extension work?

The Visual Studio extension is a wrapper around the cmdlets of the Microsoft Yeoman generator (yo @microsoft/sharepoint) and presents it in the windows forms experience.

The extension generator project executes the scaffolding behind the scene to create all necessary files.

Once the project creation is successful, developers then can launch the local Workbench by pressing F5.