SPFx Resuable Webpart To Configure Header And Footer For Modern Pages

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’.

SPFx Resuable Webpart To Configure Header And Footer For Modern Pages

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.

2 Comments

Join the conversation! Your thoughts help the community grow.

DAVID GENAO4y ago
This worked great for me. Two questions 1. I deploy it in a Tenant, would I be able to customize different sites differently or will it affect the whole tenant? 2. Is there a way to keep the top navigation in? To keep the waffle, search and the settings on the top? Thanks!
Prudhvi Spdev6y ago
Getting error when uploading to SharePint 2019 On-Prem App-catalog, Does this solution work on 2019 OnPrem? Error is ....."There were errors when validating the App manifest.: Xml Validation Exception: 'The 'IsDomainIsolated' attribute is not declared.' on line '1', position '286'."