How to Add an Application Customizer Using PnP PowerShell

Introduction

In the realm of SharePoint customization, the ability to tailor the user experience to match specific business needs is paramount. Application customizers offer a powerful way to inject custom JavaScript or CSS code into modern SharePoint pages, thereby extending functionality and enhancing the user interface. In this blog post, we’ll explore how to leverage PnP PowerShell to add an application customizer to your SharePoint site seamlessly.

Step 1: Install PnP PowerShell

The first step in the process is to ensure that you have the PnP PowerShell module installed. If you haven’t already done so, you can easily install it by running the following command in PowerShell:

Install-Module -Name PnP.PowerShell

This command will download and install the PnP PowerShell module, making it available for use in your PowerShell environment.

Hint: Should you require a comprehensive guide on commencing your PnP PowerShell journey, I recommend consulting my previous blog post available at: PnP PowerShell: How to get started? – Hemant Kabra

Step 2: Connect to SharePoint

Once the PnP PowerShell module is installed, the next step is to connect to your SharePoint site using the Connect-PnPOnline cmdlet. You’ll need to specify the URL of your SharePoint site and provide your credentials when prompted:

Connect-PnPOnline -Url <SiteUrl> -Interactive

Replace <SiteUrl> with the URL of your SharePoint site. This command establishes a connection to your SharePoint site, allowing you to execute PnP PowerShell cmdlets against it.

Step 3: Add the Application Customizer

Now that you’re connected to your SharePoint site, you can use the Add-PnPApplicationCustomizer cmdlet to add your application customizer. This cmdlet requires several parameters, including the ID of the client-side component, and any additional properties to be passed to the component:

Add-PnPApplicationCustomizer -Title <Title> -ClientSideComponentId <ComponentId> -ClientSideComponentProperties <ComponentProperties>

Replace <Title> with the title of your client-side component, <ComponentId> with the ID of your client-side component, and <ComponentProperties> with any additional properties you want to pass to the component (if applicable).

Example

Here’s an example of adding an application customizer using PnP PowerShell:

Add-PnPApplicationCustomizer -Title "Sample App Customizer" -ClientSideComponentId "12345678-1234-1234-1234-123456789abc" -ClientSideComponentProperties "{`"testMessage`":`"Test message`",`"environment`":`"Production`"}" 

Note: To apply this command, ensure a SharePoint Framework solution is deployed with the specified application customizer in its manifest. Run Install-PnPApp beforehand to add the new application customizer to the current web.

Step 4: Verify

Finally, verify that the application customizer has been successfully added to your SharePoint site. You can do this by navigating to your SharePoint site and confirming that the custom functionality has been applied as expected. Other option is to use the Get-PnPApplicationCustomizer cmdlet from PnP PowerShell as shown below:

Get-PnPApplicationCustomizer -ClientSideComponentId 12345678-1234-1234-1234-123456789abc

Conclusion

Adding an application customizer to your SharePoint site using PnP PowerShell is a straightforward process that empowers you to enhance the user experience and extend the functionality of your SharePoint environment. By following the steps outlined in this blog post, you can seamlessly integrate custom JavaScript or CSS code into your SharePoint pages, unlocking new possibilities for customization and user engagement.