Application Customizer – Configuration

Component: SiteFooterApplicationCustomizer
Component ID: e11b6815-8fab-41fd-ab56-48779caa8b2a
Type: SPFx Application Customizer

Overview

SiteFooterApplicationCustomizer is a core component for SharePoint page layout and design. It registers on every site and controls the global page chrome, including header and footer rendering, color theming, positioning, and visibility of UI elements.

Specifically, it manages:

• Rendering the site footer in the bottom Bottom placeholder.
• Rendering and styling the site header (colors, navigation).
• Controlling visibility and positioning of key page elements such as navigation, command bar, app bar, and forms.
• Applying a unified color scheme across the page (header, background, navigation links).
• Showing special admin UI for users with ManageWeb permissions.

ISiteFooterProperties

If no properties are configured, the component uses the default layout defined by the application: SharePoint theme colors, hidden navigation and command bar, visible footer, and form width of 950px.

Note: Color properties accept any valid CSS color value, including hex codes (#1a2b3c), rgb(...), or named colors (white).

PowerShell configuration

The component is registered automatically during tenant-wide deployment. Therefore, property configuration is performed by updating the existing custom action via Set-PnPCustomAction.

Prerequisites

Install-Module -Name PnP.PowerShell -Scope CurrentUser
Copy

Set properties

Connect-PnPOnline -Url "https://contoso.sharepoint.com/sites/myweb" -Interactive

$componentId = "e11b6815-8fab-41fd-ab56-48779caa8b2a"

$properties = @{
    showHorizontalNavLinks = $true
    showEditComponents     = $true
    showAppBar             = $false
    hideFooter             = $false
    headerBackgroundColor  = "#1a3c5e"
    headerForeColor        = "#ffffff"
    navLinksColor          = "#c8d8e8"
    pageBackgroundColor    = "#f4f6f8"
    formMaxWidth           = "1200px"
} | ConvertTo-Json -Compress

$action = Get-PnPCustomAction -Scope Web | Where-Object { $_.ClientSideComponentId -eq $componentId }

if ($action) {
    Set-PnPApplicationCustomizer \
        -Identity $action.Id \
        -ClientSideComponentProperties $properties \
        -Scope "Web"

    Write-Host "Properties updated." -ForegroundColor Green
} else {
    Write-Warning "Custom action not found. Verify that the application is installed."
}
Copy

Configuration examples

Minimal setup (footer only, everything else hidden)

{}
Copy

Full setup – dark header, expanded forms

{
    "showHorizontalNavLinks": true,
    "showEditComponents": true,
    "showAppBar": true,
    "hideFooter": false,
    "headerBackgroundColor": "#1a3c5e",
    "headerForeColor": "#ffffff",
    "navLinksColor": "#c8d8e8",
    "pageBackgroundColor": "#f4f6f8",
    "formMaxWidth": "1400px"
}
Copy

No footer page layout

{
    "showHorizontalNavLinks": false,
    "showEditComponents": false,
    "showAppBar": false,
    "hideFooter": true,
    "headerBackgroundColor": "",
    "headerForeColor": "",
    "navLinksColor": "",
    "pageBackgroundColor": "",
    "formMaxWidth": "950px"
}
Copy