SharePoint Online: Customizing Modern Pages with SPFx Extensions

SPFx Extensions let you customize SharePoint beyond web parts. Add headers, footers, field customizers, or command sets. Here’s how to get started with these powerful customization options.

Types of Extensions

• Application Customizer: Add elements to page header/footer
• Field Customizer: Custom rendering for list columns
• Command Set: Custom toolbar buttons and context menu items

Creating an Application Customizer

yo @microsoft/sharepoint
# Select "Extension"
# Select "Application Customizer"

import { BaseApplicationCustomizer, PlaceholderName } from '@microsoft/sp-application-base';

export default class HeaderCustomizer extends BaseApplicationCustomizer<{}> {

  public onInit(): Promise<void> {
    this.context.placeholderProvider.changedEvent.add(this, this.renderPlaceholders);
    return Promise.resolve();
  }

  private renderPlaceholders(): void {
    const topPlaceholder = this.context.placeholderProvider
      .tryCreateContent(PlaceholderName.Top);

    if (topPlaceholder) {
      topPlaceholder.domElement.innerHTML = `
        <div style="background: #0078d4; color: white; padding: 10px;">
          Welcome to our intranet!
        </div>
      `;
    }
  }
}

Field Customizer Example

import { BaseFieldCustomizer } from '@microsoft/sp-listview-extensibility';

export default class StatusFieldCustomizer extends BaseFieldCustomizer<{}> {
  
  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    const status = event.fieldValue;
    
    const colors: Record<string, string> = {
      'Completed': '#4caf50',
      'In Progress': '#ff9800',
      'Not Started': '#f44336'
    };

    event.domElement.innerHTML = `
      <span style="
        background: ${colors[status] || '#gray'};
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
      ">${status}</span>
    `;
  }
}

Deployment

Extensions deploy like web parts but require additional configuration:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-solution-manifest.schema.json",
  "solution": {
    "name": "header-extension",
    "id": "...",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true
  }
}

References

• SPFx Extensions Overview