{"id":1775,"date":"2018-09-18T10:29:36","date_gmt":"2018-09-18T17:29:36","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=1775"},"modified":"2021-10-18T11:22:47","modified_gmt":"2021-10-18T18:22:47","slug":"consistently-extend-sharepoint-with-the-sharepoint-framework","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/consistently-extend-sharepoint-with-the-sharepoint-framework\/","title":{"rendered":"Consistently extend SharePoint with the SharePoint Framework"},"content":{"rendered":"
\n
Using the SharePoint Framework<\/a>, developers can extend SharePoint to their organization’s specific needs. And with the latest version<\/a> of the SharePoint Framework, they can do it consistently across all sites in the tenant using tenant wide deployment capability.<\/div>\n<\/div>\n
\n

Extending modern SharePoint experiences<\/h2>\n
\n
SharePoint Framework is a new development model that organizations can use to extend SharePoint to their specific needs. It is the only development model that developers can use to extend modern SharePoint experiences. If your organization is transitioning or planning to transition to modern experiences, you can already prepare, by building your solution using the SharePoint Framework because they work both in classic and modern SharePoint sites.<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
\n
\n
Using the SharePoint Framework developers can build client-side web parts<\/a> as well as extensions<\/a> that allow them to add new functionality to SharePoint user interface in a supported and future-proof way. By building extensions, developers can add menu items to list toolbars, control how fields are rendered or present extra information in page header and footer.<\/div>\n
Until recently, only web parts could have been deployed to all sites in a tenant. SharePoint Framework extensions had to be activated on each site separately. And while developers and administrators could build scripts to automate the installation, it was still hard for them to ensure that the particular extension was deployed consistently across the whole tenant.<\/div>\n<\/div>\n
\n
\n

Tenant-wide deployment of SharePoint Framework extensions<\/h2>\n
\n
In version 1.6 of the SharePoint Framework<\/a>, we’ve added support for tenant-wide deployment of SharePoint Framework extensions. When building SharePoint Framework solutions, developers can decide if the particular solution should be deployed globally or not. If so, then when adding the solution package to the app catalog, administrators will be informed that the particular solution package will activate one or more extensions across all sites.<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
\n
\n
After deploying the solution package, extensions that were chosen to be activated globally, are enabled on all sites.<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
\n
\n

How it works<\/h2>\n<\/div>\n<\/div>\n
\n
\n
When adding extensions to their SharePoint Framework projects, developers can choose if they should be activated on specific sites or all sites across the tenant. If the particular extension should be added globally, developers need to add an XML file specifying the ID of the extension as well as properties with which it should be activated. Following is an example how that XML looks like:<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
\n
\n
When deploying the package to the app catalog, the information from the XML is added to the Tenant Wide Extensions list located in the app catalog site collection. You can access that by clicking Site contents link from the left menu.<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
When loading sites, SharePoint retrieves the information from the Tenant Wide Extensions list and loads extensions as specified in the list. When you change the properties of the particular extension or on which type of sites it should be activated, it will be reflected consistently across the whole tenant.<\/div>\n
\n

Video demonstration<\/h2>\n
\n
Following video shows the steps on using the custom footer showed in this article, which is available on GitHub<\/a> and you can deploy it to your tenant for testing using the included sppkg file<\/a>. This footer uses Office UI Fabric<\/a> to provide a consistent look and feel aligned with the out-of-the-box SharePoint experience. Feel free to use this solution or the provided source code any way you prefer in your own solutions.<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
\n