You can apply a BindTuning theme to all your Modern SharePoint sites and in this article, we’ll explain how to apply the theme to all the sites for the organization. Note that you need to have admin rights at the APP catalog.
Upload the theme file to Tenant App Catalog
The initial step is to install the theme on your APP Catalog and for that follow the steps described below:
- Download the theme from your BindTuning account
- Extract the Theme_name.zip file and then the Theme_name.spfx.zip
- Go to the SharePoint App Catalog and upload the Theme_name.spfx.sppkg.
- Trust the solution you need to Make this solution available to all sites in the organization.
- The theme is now installed on your SharePoint site. Please check if the solution is available for the tenant on the items highlighted.
Activate the solution for the Tenant
Now that the theme is installed, we need to go on the TenantWideExtensions list to make the solution active on all the SharePoint sites, but let's first make a quick overview of the properties of this list.
- Title (Mandatory): You can give any name to this Extension reference.
- Component ID (Mandatory): Manifest ID of the installed solution.
- Component Properties: These are the Properties that the Extension has and below will be examples on how to use those by default.
- Web template: You can define specific Web Templates of SharePoint which will make the solution only shown under those type of sites
- List Template: You can define specific List Templates of SharePoint which will make the solution only shown under that type.
- Location (Mandatory): This option depends on the Solution that you’re trying to deploy on the SharePoint tenant
- Sequence: If you have multiple extensions to be load on the page you can set the order of load.
- Disable: To make the solution disable for all the sites without having to delete the item from the list.
Note: It will take up to 20 minutes before the functionality will be enabled after first entry added to the Tenant Wide Extensions list on a specific tenant. There are some options to apply just to some specific SharePoint Site Templates site like Modern Team sites or Communication Sites. You can find more information about the Tenant Extension Deployment on the Microsoft Documentation.
Let's now make the BindTuning theme available for the all SharePoint sites on the tenant:
- Go to Site Contents > TenantWideExtensions.
Note: In some cases, the TenantWideExtensions list may not show up. If that's the case, it can be accessed following https://[YOURTENANT].sharepoint.com/sites/[APPCATALOG]/Lists/TenantWideExtensions/AllItems.aspx
- There you need to click on Add a new item.
- Go back to the theme folder on your desktop and open the Installer.ps1 with notepad or similar.
- Find themeID and copy that GUID.
- Now at the new items added to the list we need to give the next structure:
- Title (Mandatory): Any name
- Component ID (Mandatory): ThemeID of your Solution
- Component Properties: Explained below but can go empty.
- Web template: Empty, or set according to the type of site that you want to apply.
- List Template: Empty
- Location (Mandatory): ClientSideExtension.ApplicationCustomizer
- Sequence: Empty or depending if you have more solutions.
- Disable: Unchecked to apply the theme to the sites.
- The item added to the list new to have a similar structure:
BindTuning Component Properties
You can set some properties to apply for the BindTuning theme by default and note those properties can be overridden at the site. These are the most relevant properties:
- bt-compact: Boolean
- bt-custom_css: String
- bt-custom_script: String
- bt-favicon: String
- bt-logo_url: String
- bt-headings: Boolean
- bt-hide_breadcrumb: Boolean
- bt-hide_footer: Boolean
- bt-hide_pagetitle: Boolean
- bt-menuh_recent: Boolean
- bt-menuh_recycle-bin: Boolean
- bt-show_feedback: Boolean
- bt-prevent_changes: Boolean
- bt-resources_NUMBER: PATH
The required JSON structure for those properties can be active is below:
Note: We recommend using all on the same line to avoid SharePoint Text Editor to inject HTML that breaks the JSON.
Note: The BTSettings list and the Browser Local Storage will have priority. So if you're testing the properties on your desktop, make sure you clear those settings after changing the Component Properties.