Customizing SharePoint UI using PnP PowerShell

Customizing the SharePoint UI enhances user experience, improves navigation, and aligns the site’s design with organizational branding. Using PnP PowerShell, you can apply themes, modify headers and footers, update navigation, and format list views efficiently.

This guide provides step-by-step instructions to customize SharePoint UI using PnP PowerShell.

Step 1: Prerequisites

1.1 Install and Update PnP PowerShell

Ensure you have PnP PowerShell installed. If not, install it using:

Install-Module PnP.PowerShell -Scope CurrentUser

To update to the latest version:

Update-Module PnP.PowerShell

1.2 Connect to SharePoint Online

Run the following command to authenticate and connect to SharePoint Online:

Connect-PnPOnline -Url "https://yourtenant.sharepoint.com/sites/YourSite" -Interactive

Replace "yourtenant" with your SharePoint tenant name and "YourSite" with the target site URL.

Step 2: Apply a Custom SharePoint Theme

SharePoint allows you to customize themes to reflect your brand’s colors.

2.1 Create a Custom Theme JSON File

Create a JSON file (CustomTheme.json) with your branding colors:

{
  "palette": {
    "themePrimary": "#005A9E",
    "themeLighterAlt": "#f3f9fd",
    "themeLighter": "#d0e5f8",
    "themeLight": "#a7cff2",
    "themeTertiary": "#5fa8e6",
    "themeSecondary": "#1d7fcb",
    "themeDarkAlt": "#00548f",
    "themeDark": "#004876",
    "themeDarker": "#003559",
    "neutralLighterAlt": "#faf9f8",
    "neutralLighter": "#f3f2f1",
    "neutralLight": "#edebe9",
    "neutralQuaternaryAlt": "#e1dfdd",
    "neutralQuaternary": "#d0d0d0",
    "neutralTertiaryAlt": "#c8c6c4",
    "neutralTertiary": "#a19f9d",
    "neutralSecondary": "#605e5c",
    "neutralPrimaryAlt": "#3b3a39",
    "neutralPrimary": "#323130",
    "neutralDark": "#201f1e",
    "black": "#000000",
    "white": "#ffffff"
  }
}

2.2 Import and Apply the Theme

Run the following command to import and apply the theme:

Import-PnPTheme -Path "C:\Path\To\CustomTheme.json" -Name "MyCustomTheme" -IsInverted $false -Overwrite
Set-PnPWebTheme -Theme "MyCustomTheme"

Replace "C:\Path\To\CustomTheme.json" with the actual file path.
"MyCustomTheme" is the theme name you assign.
$false ensures the theme is in light mode.

Result: The theme is applied to the site.

Step 3: Customize Navigation Menu

SharePoint allows you to modify the top navigation and quick launch menu.

3.1 Add a Link to the Top Navigation

To add a new link:

Add-PnPNavigationNode -Title "Company Portal" -Url "https://companyportal.com" -Location "TopNavigationBar"

3.2 Add a Link to the Quick Launch (Left Navigation)

Add-PnPNavigationNode -Title "HR Documents" -Url "/sites/YourSite/HRDocs" -Location "QuickLaunch"

3.3 Remove a Navigation Link

Remove-PnPNavigationNode -Identity "HR Documents" -Location "QuickLaunch"

Result: Navigation menus are updated.

Step 4: Customize the SharePoint Footer

4.1 Enable the Footer

Set-PnPSite -FooterEnabled $true

4.2 Add a Footer Link

Add-PnPNavigationNode -Title "Privacy Policy" -Url "https://company.com/privacy" -Location "Footer"

Result: A custom footer with links is added.

Step 5: Modify the SharePoint Header

5.1 Change Header Layout (Standard, Compact, Minimal, Extended)

Set-PnPSite -HeaderLayout Compact

5.2 Apply a Custom Site Logo

Set-PnPWeb -SiteLogoUrl "https://yourtenant.sharepoint.com/sites/YourSite/Logo.png"

Result: The header layout and logo are updated.

Step 6: Apply JSON Formatting to List Views

JSON formatting allows you to customize list item views in SharePoint.

6.1 Create a JSON Formatting File

Save the following JSON to a file (FormatView.json):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if([$Status] == 'Completed', '#DFF6DD', '#FFF4CE')",
    "color": "#333",
    "padding": "8px",
    "border-radius": "4px"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

6.2 Apply JSON Formatting to a SharePoint List Column

Set-PnPView -List "Tasks" -Identity "All Items" -Values @{ CustomFormatter = Get-Content "C:\Path\To\FormatView.json" -Raw }

Result: Conditional formatting is applied to the “Status” column.

Step 7: Automate UI Customization with Site Designs

SharePoint Site Designs allow you to apply multiple UI changes at once.

7.1 Create a Site Script

Save the following JSON as SiteDesign.json:

{
  "$schema": "schema.json",
  "actions": [
    {
      "verb": "applyTheme",
      "themeName": "MyCustomTheme"
    },
    {
      "verb": "setSiteLogo",
      "url": "https://yourtenant.sharepoint.com/sites/YourSite/Logo.png"
    },
    {
      "verb": "setHeader",
      "layout": "Compact"
    },
    {
      "verb": "addNavLink",
      "url": "/sites/YourSite/HRDocs",
      "displayName": "HR Documents",
      "isWebRelative": true
    }
  ],
  "bindata": {},
  "version": 1
}

7.2 Register the Site Script

$scriptJson = Get-Content "C:\Path\To\SiteDesign.json" -Raw
Add-PnPSiteScript -Title "My Custom UI" -Content $scriptJson

7.3 Apply the Site Design

Add-PnPSiteDesign -Title "My Company Theme" -SiteScripts "My Custom UI" -WebTemplate "64"

Result: UI changes are automated and standardized across sites.