SharePoint Online – How do disable automatic activation of SPFx Extension when app is installed?

Scenario – Suppose you are creating a SPFx extension. Be it any kind of SPFx extension application customizer, field customizer or Command Set. You would have yoeman generator to create project and it would have scaffold required project structure. Package the solution and deploy on app on app catalog and install it on any particular site collection. As soon as you install app, it will by default enable your extension and your customization would be by default starts applying. Say you have used Application customizer to add header and footer to Modern pages. But you don’t want to start applying this customizing on site. You might want to give site admins option to enable/disable application customizer. 

This was required as part of solution which I have created to provide User interface to Site admins to add/modify/delete header and footer on SPFx webpart via application customizer extension.

This article will focus on how to disable automatic activation of SPFx extension when app is installed.

Go to .\config folder

Open package solution.json

It would look like below.

{

"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

"solution": {

  "name": "SPFx Application Customizer Custom Header",

  "id": "G-U-I-D",

  "version": "1.0.0.0",

  "includeClientSideAssets": true,

  "isDomainIsolated": false,

  "features": [

    {

      "title": "Application Extension - Deployment of custom action.",

      "description": "Deploys a custom action with ClientSideComponentId association",

      "id": "G-U-I-D",

      "version": "1.0.0.0",

      "assets": {

        "elementManifests": [

          "elements.xml",

          "clientsideinstance.xml"

        ]

      }

    }

  ]

 

},

"paths": {

  "zippedPackage": "solution/SPFxAppCustomizerApp.sppkg"

}

}

If you look closely, what it has is a features node in above xml. This is a feature which is activated by default once app is installed. We can just remove the features node itself just remove first instance of array which says ‘Deploys a custom action with ClientSideComponentId association’ if you have multiple features added to your solution.

After removing it would look like below

{

"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

"solution": {

  "name": "SPFx Application Customizer Custom Header",

  "id": "G-U-I-D",

  "version": "1.0.0.0",

  "includeClientSideAssets": true,

  "isDomainIsolated": false

 

},

"paths": {

  "zippedPackage": "solution/SPFxAppCustomizerApp.sppkg"

}

}

This will make sure that application customizer is not activate by default once app is installed. Now we have disabled automatic activation, how will we provide user option to enable it manually? Answer is via Custom Action registration by using ClientSideComponentId and ClientSideComponentProperties. Same concept is being used in this solution . If interested, go through once to understand in detail.

Hope this helps…Happy coding!!!!

Note: This article was originally posted on my c-sharpcorner profile at this link.