Background
We all know that with Modern experience in SharePoint, there is no concept of a master page. So, Microsoft has come up with SPFx extensions to enhance the user experience. Please refer to this
link to know more about SPFx extensions.
One of the basic requirements of any SharePoint site which requires branding is to add custom header and footer on the site. Now, as we don't have a master page concept on modern pages, an SPFx extension application customizer can be used to add the header and footer to the SharePoint modern site pages. We can find a sample at this
link. It is pretty much straightforward and easy to develop customizer to add a header and a footer. While I was trying this for an issue raised by someone on stack overflow, I found some challenges mentioned below.
- Header and footer HTML is hardcoded in solution.
- I had to redeploy SPFx solution every time a small change is required in text/HTML.
- A different solution would be required for different site collections as we would definitely need different header and footer for each site collection(most of the case).
- High maintenance and time consuming for a simple task.
With these challenges, I thought of creating a reusable component web part which provides a user interface to add/edit/remove header and footer on modern pages using SPFx extension application customizer.
This solution comes handy for the developers, tenant admins, or site collection administrators to add header and footer.
Features of solution
- Web part to configure Header and Footer
- Edit functionality if header or footer is already added via this solution.
- Completely Remove header and footer created via this solution
I have uploaded solution with this blog, You can download, deploy and install like any other SPFx solution. I won't go in details of how to deploy this solution.
After installation, follow the below steps to use the web part.
Step 1
Create a SharePoint Page. Add a web part named ‘WpConfigureApplicationCustomizerWebPart’.
Step 2
It will open the below page. Add your Header and/or Footer HTML in the text area.
Step 3
Add a custom HTML to either header/footer text area.
Click "Register Custom Action" and wait for the success message.
![SPFx Resuable Webpart To Configure Header And Footer For Modern Pages]()
Step 4
Refresh the page. You will see the below header and footer inserted on the page.
Header
Footer
Next, we will see how you can edit Header or footer.
- If header and footer is already added before using this web part and you visit the page
- Web part would be loaded with header and footer text added previously in the text area.
- Update HTML if required and click on Update custom action button. This will update header and footer.
- You can also remove custom action. This will completely remove the header and footer from the site.
- If you want only header or footer, you can add HTML to the only respective text area and keep another one empty.
You can find 'How to' documentation at this
link. If you are interested in further customizing, please find the full source code at this
repo. A detailed documentation and steps are mentioned in repo's read me file.
Hope this solution save you some time :). Feel free to share/comment if any feedback.