How to Test or Debug your Application Customizer -SPFx

There is a way to test the SPFx extension on your local before deploy the app to the site.

Please follow the below steps once you are done with the SPFx extension creation

Run your solution using the below commans

1. gulp serve –nobrowser

3. Append query string with page URL

E.g. https://contoso.sharepoint.com/sites/test/SitePages/Home.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={“Customactionid”:{“location”:”ClientSideExtension.ApplicationCustomizer”,”properties”:{“testMessage”:”Test message”}}}

* Customactionid –Replace the custom action id from serve.json

 "customActions": {
         "c0ab3b94-8609-40cf-861e-2a1759170b43": {
           "location": "ClientSideExtension.ApplicationCustomizer",
           "properties": {
             "testMessage": "Test message"
           }
         }
 

Details of Query String

ü loadSPFX=true ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework is not normally loaded unless at least one extension is registered. Because no components are registered yet, we must explicitly load the framework.

ü debugManifestsFile specifies that you want to load SPFx components that are locally served. The loader only looks for components in the App Catalog (for your deployed solution) and the SharePoint manifest server (for the system libraries).

ü fieldCustomizers indicates which fields in your list should have their rendering controlled by the Field Customizer. The ID parameter specifies the GUID of the extension that should be used to control the rendering of the field. The properties parameter is an optional text string containing a JSON object that is deserialized into this.properties for your extension.

Id: The GUID of the Field Customizer extension associated with this field.

Properties: The property values defined in the extension. In this example, sampleText is a property defined by the extension.