Microsoft SharePoint Framework - Locus IT Services

Microsoft SharePoint Framework

Locus IT ServicesSharePoint DevelopmentsMicrosoft SharePoint Framework
Posted by Akshay | , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,  |

Microsoft SharePoint Framework

Microsoft SharePoint Framework (SPFx) Extensions are client-side components that’ll run inside the SharePoint page. You can deploy extensions SharePoint Online and you can use modern JavaScript tools and libraries to build them up.

SharePoint was launched as an on-premises product. Most of the features are written in C#, compiled to DLLs, and deployed to on-premises farms. That architecture works well in environments with only one enterprise but it didn’t scale to the cloud where multiple tenants run side-by-side.

Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your functional and business requirements. For instance, you can create your dynamic header and footer experiences that render across all the pages in SharePoint Online.

Create an Extension Project

  • Create a new kind of project directory in your favorite location.
  • Go to the project directory.
  • Create new “HelloWorld” extension by running the Yeoman SharePoint Generator.
  • When prompted:
    • Accept the default application-extension as your solution name, and select Enter.
    • Select SharePoint Online only (latest), and select Enter.
    • Click Use the current folder, and select Enter.
    • Select N which requires the extension to be installed on each site explicitly when it’s being used.
    • Click on Extension as the client-side component type to be created.
    • Click on Application Customizer as the extension type to be created.
  • The next set of prompts will asks for specific information about your extension.
  • Then Yeoman installs the required dependencies and the solution files along with the HelloWorld extension.
  • Next, enter the following into the console to start Visual Studio Code.
  • Open HelloWorldApplicationCustomizer.manifest.json in the src\extensions\helloWorld folder.

Code your Application Customizer

  • Open the HelloWorldApplicationCustomizer.ts file in the src\extensions\helloWorld folder.
  • Notice that base class for the Application Customizer is commonly imported from the sp-application-base package, which also contains Microsoft SharePoint framework code required by the Application Customizer.
  • The main logic for your Application Customizer is contained in the onInit method, which is called when the client-side extension is first activated on the page.
  • If your Application Customizer utilizes the ClientSideComponentProperties JSON input, it’ll deserialized into the object. You can define an interface to describe it.
  • The default template is searching for a property called testMessage. If that property is provided, it popups with an alert message.

Debug your Application Customizer

You cannot utilize the local Workbench to test Microsoft SharePoint Framework Extensions. You’ll need to verify them against a live SharePoint Online site.

  • Open the serve.json file in the config folder.
  • Update URL page to match your own tenant, which you want to use for testing. You can use any URL with modern experience.
  • Switch on to your console to ensure that you are still in the app-extension directory, and then enter the following command : gulp trust-dev-cert
  • Compile your code and host the files from your local computer by running the following command : gulp serve
  • When the code compiles without any errors, it serves the resulting manifest from “https://localhost:4321” and also starts your browser with needed query parameters.
  • Go to your browser and select Load debug scripts to continue loading scripts from your local host.


  • Developer certificate installed ONLY once in your development environment, so you can skip this step, if you have already executed that in your environment.
  • If you don’t have the SPFx developer certificate installed, Workbench will notifies you that it is not configured to load scripts from localhost.
  • If this’ll happens, stop the process that is currently running in the console window, run the gulp trust-dev-cert command in your project console to install the developer certificate, and then run the gulp serve --nobrowsercommand again.

Congratulations, you got your first Microsoft SharePoint Framework Extension running popup will show. You can use the similar project and take benefits of specific content placeholders for modifying the UI of SharePoint.

Being a Microsoft Certified partner Locus IT provides Microsoft SharePoint implementation, Microsoft  SharePoint training, Microsoft SharePoint migration, MS SharePoint upgradation and support services.For more information please contact us.

Locus IT Project Management Office
What’s it?