Bringing custom elements and scripts to pages with application customizers

Application customizers offer a mechanism to load and run custom scripts and add custom HTML elements and content to two defined placeholders on the SharePoint page’s HTML DOM (Document Object Model). Placeholders for custom HTML are found at the top and bottom of the page (Figure 19.1):

Figure 19.1 - Top and bottom placeholders

The layout and styles of these placeholders can include custom styles, layouts, and even fonts, but it’s a good practice to refer to SharePoint Framework’s documentation and utilize Office UI Fabric, which is a premade set of controls and styles, when possible.

Note

Using Application Customizers to modify SharePoint’s HTML DOM is not a supported method for customizing modern SharePoint. Changes made to the page HTML DOM may cause issues with the customization.

Building an application customizer

You can create a project...