How To Disable Automatic Activation Of SPFx Extension When App Is Installed

Scenario

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

This was required as part of the solution which I have created to provide a User Interface to Site Admins to add/modify/delete header and footer on SPFx web part via application customizer extension.

This article will focus on how to disable the automatic activation of SPFx extension when the 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, it has features node in the above XML. This is a feature which is activated by default once the app is installed. We can just remove the features node itself. Remove the first instance of the array which says ‘Deploys a custom action with ClientSideComponentId association’ if you have multiple features added to your solution there would be more than one JSON object inside this array.

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 ensure that the application customizer is not activated by default when the app is installed. Now that we have disabled the automatic activation, how will we provide the user option to enable it manually?

The answer is via Custom Action Registration by using ClientSideComponentId and ClientSideComponentProperties. The same concept is being used in this solution. If interested, you can go through the details.

Hope this helps...Happy coding!!!!

2 Comments

Join the conversation! Your thoughts help the community grow.

Siddharth Vaghasia6y ago
Hey Abenet, it happens when you actually install the app, in case of gulp serve it will happen immediately once the page mentioned in extension manifest is opened.
Abenet Beyene6y ago
Is the features node happened after you do gulp budle --ship gulp package-solution --ship or before that.