SPFxHeaderFooter: A TypeScript repository from IT Systems Operations

SharePoint Framework custom header and footer application customizer extension

This is the code for the SharePoint Framework application customizer extension that renders a custom header and footer on all modern pages within a SharePoint Online site. You can read more details about it in my blog post here.

Note that this solution complements the SharePoint-hosted add-in that includes the configuration interface and user custom actions to render the header and footer on all classic pages within a SharePoint Online site. You can read more details about that here. To use this application customizer extension, you will need to first install and configure the add-in.

Building the code (for localhost debugging)

git clone the repo
npm i
gulp serve --nobrowser

When debugging locally, you will need to include the following querystring parameter on any modern pages where you wish to test this functionality:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"bbe5f3fa-7326-455d-8573-9f0b2b015ff9":{"location":"ClientSideExtension.ApplicationCustomizer"}}

Building the code (for production deployment)

git clone the repo
npm i
gulp bundle --ship
gulp package-solution --ship

Tenant-scoped deployment

This extension is configured to optionally allow tenant-scoped deployment. When deploying to production, you must first upload the .sppkg file to your tenant's app catalog. You will then be given the option to make this solution available to all sites within your organization:

Adding the user custom action for the extension in a tenant-scoped deployment

If you check the box labeled Make this solution available to all sites in the organization before pressing Deploy, you will need to manually add the user custom action associated with the extension on any site where you would like the custom header and footer to be rendered on modern pages. If you deploy the extension at tenant scope, it is immediately available to all sites and you do not need to explicitly add the app from the Site Contents screen. However, because tenant-scoped extensions cannot leverage the feature framework, you will need to associate the user custom action with the ClientSideComponentId of the extension manually. This can be accomplished a number of different ways. Some example code using the .NET Managed Client Object Model in a console application is shown below:

using (ClientContext ctx = new ClientContext("https://[YOUR TENANT].sharepoint.com"))
{
    SecureString password = new SecureString();
    foreach (char c in "[YOUR PASSWORD]".ToCharArray()) password.AppendChar(c);
    ctx.Credentials = new SharePointOnlineCredentials("[USER]@[YOUR TENANT].onmicrosoft.com", password);

    Web web = ctx.Web;
    UserCustomActionCollection ucaCollection = web.UserCustomActions;
    UserCustomAction uca = ucaCollection.Add();
    uca.Title = "SPFxHeaderFooterApplicationCustomizer";
    // This is the user custom action location for application customizer extensions
    uca.Location = "ClientSideExtension.ApplicationCustomizer";
    // Use the ID from HeaderFooterApplicationCustomizer.manifest.json below
    uca.ClientSideComponentId = new Guid("bbe5f3fa-7326-455d-8573-9f0b2b015ff9");
    uca.Update();

    ctx.Load(web, w => w.UserCustomActions);
    ctx.ExecuteQuery();

    Console.WriteLine("User custom action added to site successfully!");
}

You still need to install and configure the SharePoint-hosted add-in on any site where you wish to use this extension and disable NoScript on that site if necessary.

If you do not perform a tenant-scoped installation