Extensions

Forms List Layout Formating

• Configuring the Layout of SharePoint Forms

Custom Forms Extensions

• Building a SharePoint New Site Form Look-Alike
• AddValidateUpdateItemUsingPath deep dive

Tipps

• How to properly add an Application Customizer to an existing SPFx Web Part Project

Samples

• React-application-profile-meter
• How to create news ticker, SPFx-extension

Full Page

• SharePoint Full Page Canvas App
• spfx-appcust-removeFeeback
• React slider field customizer
• Check the page display mode from within your SharePoint Framework extensions

Site footer

• SharePoint Site Footer
• SharePoint Framework custom header and footer application customizer extension

ListView

• Showing or hiding SharePoint Framework ListView custom actions based on permissions and selected items
• SPFX ListView Command Set and Panel
• Let users get a simple link to a document or folder
• Create Modern Page Model with PnP/PnPjs
• Create ECB Menu Items
• A modern Save List as Template

Bots

• Add AtBot to your SharePoint site using SPFx

Clarity

• Microsoft SharePoint & Clarity
• Power Platform Canvas Apps & Clarity

Comments

• Receive comment notifications by email in Modern SharePoint Pages
• Github: Receive comment notifications on Modern SharePoint pages by email

Change browser favicon icon

• Change favicon on Modern SharePoint sites
• SPFx-favicon

Google Analytics

• Tracking code in Tenant Wide Extensions list
• SPFx-Google-Analytics
• How to add Google Tag Manager to modern SharePoint

Matamo (Piwik) Analytics

• Setting up usage analytics to Modern SharePoint using Matomo Analytics and SharePoint Framework

Inject CSS

• Inject Custom CSS on SharePoint Modern Pages using SPFx Application Extensions
• Add Google Analytics to SharePoint modern pages
• Whitespace – Regain distraction-free working in SharePoint

SPA

• Single Page App In SharePoint Using React

Navigations

• Handling navigation in a SharePoint Framework application customizer
• SPFx Side Navigation Project for Modern Sites

Placeholders

• Safely using Placeholders in an extension

private _topPlaceholder : PlaceholderContent;
public onInit(void){
    this.context.placeholderProvider.changedEvent.add(this, this._handlePlaceholderChange.bind(this));
}

private _handlePlaceholderChange(){
  if (!this._topPlaceholder)
  {
    // We don't have a placeholder populated yet.  Let's try and get it.
    this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
  } else {
    // We have a placeholder - let's make sure that it still exists.
    let index:number = this.context.placeholderProvider.placeholderNames.indexOf(PlaceholderName.Top);
    if ( index < 0)
    {
        // The placeholder is no longer here.
        this._topPlaceholder.dispose();
        this._topPlaceholder = undefined;
    }
  }
  if ( this._topPlaceholder )
  {
      this._topPlaceholder.innerText = 'Hello World!';
  }
}