SharePoint Framework extensions is a great new way to customize modern SharePoint sites. The "Application Customizer" SPFx extension provides a way to customize the look and feel of certain sections of moder site such as header and footer. More details here. This gives us the opportunity to develop custom mega menu navigation and place it in the site header of modern sites .
Consider that you have a Communication Site in your tenant (for HR/Admin news etc) which is linked through the mega menu navigation of your Company's Intranet portal. Wouldn't it be great if a user navigating to this communication site was able to see the same mega menu as on the Intranet portal ? I recently implemented a solution that uses SPFx Extension application customizer to do exactly this.
Reusing this in Modern sites ?
<Click on the image to enlarge>
We can re-use all the JS, JQuery, CSS files to render navigation on modern site without having to replicate these files. This can be done as :
1) Reference the JS and CSS files in the SPFx extension. The links will point to the intranet portal site's style library Here is very nice article from Chris O'Brien on how to achieve this.
2) Render the container DIV in SPFx extension through a React Element which can then be used by JQuery (or any javascript code) to render the navigation links.
Since we are using the same JS and CSS files hosted in the intranet portal site, appropriate changes will have to be made to your JavaScript code if it uses any local site's information. For instance, if it uses "_spPageContextInfo" variable to get the navigation links using REST API, the code will have to be changed to always point to your intranet portal site collection.
Implementation :
Start off by creating a Application customizer SPFx extension using Yeoman generator. Make sure you select "Do you want to allow tenant admin the choice of being able to deploy....." to YES in the yeoman generator. This will allow you to deploy the extension tenant-wide and add the navigation to the modern sites across your tenant without feature activation (Add it as a custom action).
Once the project is created, modify the code of your Application customizer typescript file to add CSS and JS references and also to render a REACT element.
Here is the code for the onInit() method of the SPFx extension. It renders a REACT element.
Create a React component in your code
Consider that you have a Communication Site in your tenant (for HR/Admin news etc) which is linked through the mega menu navigation of your Company's Intranet portal. Wouldn't it be great if a user navigating to this communication site was able to see the same mega menu as on the Intranet portal ? I recently implemented a solution that uses SPFx Extension application customizer to do exactly this.
- For a customer that I was working for, the mega menu links for their Intranet portal site were stored in a custom SharePoint list.
- A DIV element placed in their custom Master Page acted as a container for the mega menu. JavaScript code retrieved the navigation links (using REST API) from the SP list and rendered the links inside this DIV through JQuery and CSS.
- The JS and CSS files were stored in the Style library of the portal site collection (all the users having at least read access to this library).
Reusing this in Modern sites ?
<Click on the image to enlarge>
We can re-use all the JS, JQuery, CSS files to render navigation on modern site without having to replicate these files. This can be done as :
1) Reference the JS and CSS files in the SPFx extension. The links will point to the intranet portal site's style library Here is very nice article from Chris O'Brien on how to achieve this.
2) Render the container DIV in SPFx extension through a React Element which can then be used by JQuery (or any javascript code) to render the navigation links.
Since we are using the same JS and CSS files hosted in the intranet portal site, appropriate changes will have to be made to your JavaScript code if it uses any local site's information. For instance, if it uses "_spPageContextInfo" variable to get the navigation links using REST API, the code will have to be changed to always point to your intranet portal site collection.
Implementation :
Start off by creating a Application customizer SPFx extension using Yeoman generator. Make sure you select "Do you want to allow tenant admin the choice of being able to deploy....." to YES in the yeoman generator. This will allow you to deploy the extension tenant-wide and add the navigation to the modern sites across your tenant without feature activation (Add it as a custom action).
Once the project is created, modify the code of your Application customizer typescript file to add CSS and JS references and also to render a REACT element.
Here is the code for the onInit() method of the SPFx extension. It renders a REACT element.
Create a React component in your code
Deploy the SPFx extension to your tenant's App catalog. Once it is deployed, it is globally available. You can now add the SPFx extension to a communication site easily using PnP PowerShell
ClientSideComponentId is the ID specified in the .manifest.json file of your SPFx extension.
The exact same navigation used in your intranet portal appears on a communication site.
This is "Superb" - don't know many great words, but all those words apply. How do I hide the Bar (containing the Logo, Site Title, and OOTB Menu) below the added Navigation? Thanks
ReplyDeleteThank you. You can identify the container of these elements in the developer tools and hide it through a small JavaScript snippet in the same SPFx extension.
Delete