SharePoint Application Customizer - Locus IT Services

SharePoint Application Customizer

Locus IT ServicesSharePoint DevelopmentsSharePoint Application Customizer
Posted by Akshay | , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,  |

SharePoint Application Customizer

This article is about how to deploy your SharePoint Application Customizer to SharePoint and see it working on modern SharePoint pages. There are many different ways on getting your SPFx Application Customizer extensions activated and deployed on the SharePoint sites. Right model depends on your business objectives and requirements. Here are the main options.

  • Activate extension on particular site using feature framework based on activation when the solution is installed. This is the only model which supports site level assets getting deployed or created as part of the solution activation.
  • Use tenant-scoped deployment option and activate the extension on specific sites using APIs or  PowerShell. This feature was introduced with SharePoint Framework version 1.4 release.
  • Use tenant wide deployment feature for extensions from application catalog. This feature was introduced with SharePoint Framework version 1.6 release.

Package Hello World Application for Customizer

In this scenario we will be activating the extension specifically in a single site, which means that we’ll be using Feature Framework based activation when the solution is being installed on the site.

  • In the search console window, go to the extension project directory.
  • Stop from running by selecting Ctrl+C, If the gulp serve is still running.
  • Install the package solution to the site where it should be installed so that the extension manifest is being white listed for execution.
  • Associate the SPFx Application Customizer to the planned scope. This can be performed using programmatically or by using the feature framework inside the SharePoint Framework solution package.
  • Then return to the solution package in Visual Studio Code.
  • Extend the sharepoint folder and assets subfolder in the root solution to see the existing  elements.xml file.

Review the Existing Elements of .xml File for SharePoint Definitions

Preview the existing XML structure in the elements.xml file. Note that the ClientSideComponentId  property has been updated automatically based on the unique ID of your SPFx Application Customizer available in the HelloWorldApplicationCustomizer.manifest.json file in the src\extensions\helloWorldfolder.

ClientSideComponentProperties has also been set automatically with the default structure and JSON properties for this extension instance.

The Installation configuration uses the specific location of ClientSideExtension.ApplicationCustomizer to define that this is an SPFx Application Customizer. Because this elements.xml is associated to a Web scoped feature by default, this CustomAction is automatically added to the Web.UserCustomAction collection in the site where the solution is being installed.

To make sure that the configuration matches updates performed in the SPFx Application Customizer, update the Client Side Component Properties as in the following XML structure.

What about ClientSideInstance .xml File in Assets Folder?

ClientSideInstance.xml is used with Tenant Wide deployment of Microsoft SharePoint Application Customizer extensions. You can use this .xml file to automatically add an entry to the centralized Tenant Wide Extensions list in the application catalog site of the tenant if you use the tenant-scoped deployment option. In this tutorial case, we selected the solution to be installed on site level, which means that this file will be ignored when solution is activated in the application catalog.

Tenant Wide Extensions list is used to automatically activate extensions in tenant from a centralized location. Tenant wide deployment is supported for list view command sets and SPFx Application Customizer.

Ensure that Definitions are Taken Into Account Within the Pipeline

Open package-solution.json from the config folder. The package-solution.json defines the package metadata as shown in the code it is to ensure that the element.xml file is taken into account while the solution is being packaged, default scaffolding includes needed configuration to define a feature framework feature definition for the solution package. Remove the entry for clientsideinstance.xml  under the elementManifests.

Deploy the Extension to SharePoint Online and Host the JavaScript from the LocalHost

Now it’s ready to deploy the solution for a SharePoint Application Customizer site and have the CustomAction automatically associated on the site level.

  • In the console window, enter the following command to package your client-side solution that contains the extension so that we’ll get the basic structure ready for packaging gulp bundle
  • Executing the following command so that the solution package is created in gulp package-solution
  • The command will creates the package in the solution or sharepoint folder: app-extension.sppkg
  • You now need to deploy the installation package that was generated to the application catalog. To do this go to your tenant’s application catalog and Select the Apps for SharePoint library.
  • Drag and drop or Upload the app-extension.sppkg located in the sharepoint or solution folder to the application catalog.
  • Select the Deploy button.
  • Get back to your console and make sure that the solution is running. If it is not running then execute the following command in the solution folder gulp serve no browser
  • Go to the site where you want to validate SharePoint Application Customizer asset provisioning. This could be any site collection in the tenant where you would deployed this solution package.
  • Click on the gear icon on the top navigation bar on the right and then select Add an app to go to your Apps page.
  • In the Search box, enter application and then click on Enter to filter your apps.
  • Select the app-extension-client-side-solution application to install the solution on the site. When the installation is completed refresh the page by selecting F5 key.

When the application has been installed successfully, you can see the header and footer being rendered just like with the debug query parameters. Congratulations, you have deployed an extension to a modern SharePoint Application Customizer page from the application catalog popup shows.

Locus IT has a thorough knowledge of Microsoft SharePoint and provides services like SharePoint Application support and SharePoint Application staffing. For more details please contact us and we’ll surely get back to you.

Locus IT Project Management Office
What’s it?