SPFx Extensions are used to extend the SharePoint experience. For example, custom header or footer, custom view for a list field etc.
SPFX Extensions can be deployed and activate in three ways:
SPFX Extensions can be deployed and activate in three ways:
- Site Scoped Local Activation - SPFx extensions are installed explicitly on a site and are then available like any other app on a site, and can be activated from site contents page.
- Tenant Scoped on demand activation - Tenant wide deployed but not activated - Extension is available to all sites in the tenant but activation can be done via script alone.
- Tenant Scoped and activated by default - Extension is deployed tenant wide and also activated automatically across all the sites.We will explore this way in more detail in this blog.
Tenant Scoped and activated by default option for Extensions is very useful when you want the extension to be available on all the sites in the tenant. Lets say for example there is a header or footer that needs to be displayed in all sites.
I created my extension using the following options that yeoman generator walks me through:
Let's create a new SharePoint solution.
? What is your solution name? on-demand-extension
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Create a subfolder with solution name
Found npm version 6.9.0
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Yes
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? Extension
? Which type of client-side extension to create? Application Customizer
Add new Application Customizer to solution on-demand-extension.
? What is your Application Customizer name? custom-header
? What is your Application Customizer description? custom-header
When you are creating the extension make sure you have selected Yes for the option i have highlighted above. What this does is that, a feature is defined in the package-solution.json file and an Assets folder is created with Client Side Instance xml and elements xml. When this package is deployed to SharePoint, every time a site is created or for existing sites this feature and there by the Extension is activated.
Now a folder with the base code for SPFx Extension is created. Open the folder in your code editor, and open the package-solution.json, you will see the following:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "on-demand-extension-client-side-solution",
"id": "dafe6ae3-7d52-4e85-b784-728be2a7660c",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
"features": [
{
"title": "Application Extension - Deployment of custom action.",
"description": "Deploys a custom action with ClientSideComponentId association",
"id": "8e500ccf-e147-480d-92b5-9cef681c2eb8",
"version": "1.0.0.0",
"assets": {
"elementManifests": [
"elements.xml",
"clientsideinstance.xml"
]
}
}
]
},
"paths": {
"zippedPackage": "solution/on-demand-extension.sppkg"
}
}
skipFeatureDeployment is the property that determines if this SPFx solution will be deployed tenant wide or not. If it is set to true means it will be deployed tenant wide.
Lets build the package using
gulp bundle
gulp package-solution
gulp serve --nobrowser
Drag and drop the solution package file from the \sharepoint\solution folder to app catalog site, you will be prompted to trust the solution, select the option to make the solution available to all the sites in the organization and click Deploy.
Now in the app catalog site if you navigate to the Tenant Wide Extensions list, you can find our extension there.
Also notice the component property,, the value is "Test message", and that is the property that is being used in the default extensions pop up control.
Lets say you want to display an updated message, then what you can do is just go to the Tenant Wide Extensions list and update the Component Property value, i did just that and updated the value to "Mahesh is Testing New Message" and now see the pop up's update message:
As you can see this Tenant Wide Deployment is an excellent option for components that need to be displayed across all the sites in the tenant. It is easy to use and Component Property mechanism allows for easy maintenance.
Thanks for reading, do let me know if you have implemented something similar and share your use case and solution.
