Skip to content
SharePoint-hosted add-in that allows users to set a custom site header and footer message.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
SiteHeaderFooter
.gitattributes
.gitignore
README.md
SiteHeaderFooter.sln

README.md

SharePoint-hosted add-in for custom site header and footer

This is the code for the SharePoint-hosted add-in that renders a custom header and footer on all classic page experiences within a SharePoint Online site (or an on-premises SharePoint 2013/2016 site):

Custom header and footer on classic page

To set up and configure the custom header and footer parameters, the add-in also includes an app part that can be added to a classic page:

App part for header and footer configuration

You can read more details about it in my blog post here.

Note that this solution requires a separate SharePoint Framework application customizer extension to render the header and footer on all modern pages within a SharePoint Online site. You can read more details about that here. To use the application customizer extension, you must first install and configure this add-in.

Building the code (for local debugging)

  • Git clone the repo
  • Open solution in Visual Studio
  • Set site URL to local development farm or SharePoint Online developer tenant site
  • Enable app sideloading on target site (if required)
  • Disable NoScript (if modern site)
  • Press F5 to build/deploy solution for local debugging
  • Trust the add-in when prompted
  • Click the app's tile in the Site Contents screen to launch the add-in, which initially deploys JS files and user custom actions to the host web (if you don't see the screen below, the add-in is not yet ready to use) Add-in install complete

Building the code (for production deployment)

  • Git clone the repo
  • Open solution in Visual Studio
  • Build solution in Visual Studio
  • Package .app file
  • Upload .app file to tenant app catalog
  • Disable NoScript (if modern site)
  • Add an app from target site
  • Trust the add-in when prompted
  • Click the app's tile in the Site Contents screen to launch the add-in, which initially deploys JS files and user custom actions to the host web (if you don't see the screen below, the add-in is not yet ready to use) Add-in install complete

Configuring the header and footer

  • Add "Set Custom Header/Footer" add-in part to a classic page
  • Configure header/footer parameters
  • Refresh page after setting parameters
You can’t perform that action at this time.