Microsoft 365 – SharePoint Online – Fetching all controls / web parts on modern pages / client side pages – using PnP PowerShell CMDLETs

Hi All,

Greetings for the day!!! Today new learning so sharing . SHARING IS CARING 🙂

Learning – How to get all controls / web parts on modern page of communication site

Take away from this article

• How to connect to SharePoint online using PnP
• How to get modern / client side page details
  • Page properties like – name, title
  • All controls details available on page – Type of control, Instance Id of control, Position of control on the page, properties of control and so on

Details / Background / Use Case

• In one of our SharePoint online project we are creating bulk communication site collections using PnP provisioning template
• Through PnP provisioning template we are also configuring the our custom SPFx webparts
• After site collection is created we need to update webpart properties dynamically
• Here, first step is to get all web parts from the page and then update respective webpart properties
• So here this article born 🙂 – how to retrieve controls / web part on modern page of communication site using PnP PowerShell CMDLETs

STEPS to update properties of webpart on modern page of communication site

STEP 1 – Verify PnP.PowerShell module – whether installed or not

• We need PnP.PowerShell module
• Check if PnP.PowerShell module is installed or not using – Get-InstalledModule -Name PnP.PowerShell
  • We have detailed article to know the respective module is installed or not – Small Tips and Tricks – how to know the version of any installed PowerShell module – Get-InstalledModule
• If PnP.PowerShell module is not installed then we need to install the respective module using – Install-Module as

Install-Module PnP.PowerShell -Scope CurrentUser

STEP 2 – Import PnP.PowerShell module – Import-Module

#we need PnP.PowerShell module - importing it
Import-Module -Name PnP.PowerShell

STEP 3 – required variable declaration

• Here we are declaring following variable
  • siteUrl – URL of site from which pages we need to get controls / web parts
  • pageName – Page of which we need to get the web parts

#variable declaration

#site from which pages we need to get the controls / web part
$siteUrl = "https://knowledgejunction1.sharepoint.com/sites/demo"

#Page from where we need to get the web parts
$pageName = "Home.aspx"

STEP 4 – Connect to SharePoint with PnP using – Connect-PnPOnline

#connect to SharePoint with PnP
Connect-PnPOnline -Url $siteUrl -Interactive

STEP 5 – Read the page properties and web parts using – Get-PnPPage

#using - Get-PnPPage - helps to retrieve the properties and web parts of modern page
#https://pnp.github.io/powershell/cmdlets/Get-PnPPage.html
$page=Get-PnPPage -Identity $pageName

STEP 6 – Get all controls from respective page using Controls property as

#to have all controls on page we have Controls property as
$page.Controls

#output will be - all web part details from the page as below

InstanceId                           Type        Title       Section Column Position PropertiesJson                                     
----------                           ----        -----       ------- ------ -------- --------------                                     
523f72f4-b9f9-4ff9-acd3-720cec7674e6 PageWebPart Hero        1       1      1        {"layoutCategory":1,"layout":5,"content":[{"id":...
3c3acc5f-432c-4b7b-a6b3-0426a6dad5cf PageWebPart News        2       1      1        {"showChrome":true,"carouselSettings":{"autoplay...
827b43f0-884e-4e84-a25a-a27032357605 PageWebPart Quick links 2       1      2        {"items":[{"sourceItem":{"guids":{"siteId":"78aa...
e836535d-fc72-4c20-9329-6eb50e4f84c2 PageWebPart People      2       1      3        {"persons":[],"layout":1}                          
c37f02dc-b07f-4f7c-a176-048d8f27671e PageWebPart Link        2       1      4        {"url":"","imageURL":"","linkPreviewComponentMod...
25c26266-dac3-4346-97fb-4e581546fd58 PageWebPart Events      2       1      5        {"selectedListId":"3269b950-2160-4920-aa0c-f130a...
746dfd6b-fa0f-4b43-a7f0-094fb1edc390 PageWebPart Twitter     2       2      1        {"displayAs":"list","displayHeader":true,"displa...

COMPLETE SCRIPT

#we need PnP.PowerShell module - importing it
Import-Module -Name PnP.PowerShell

#variable declaration
    #site from which pages we need to get the controls / webpart
    $siteUrl = "https://knowledgejunction1.sharepoint.com/sites/demo"

    #Page from where we need to get the web parts
    $pageName = "Home.aspx"

#connect to SharePoint with PnP
Connect-PnPOnline -Url $siteUrl -Interactive

#using - Get-PnPPage - helps to retrieve the properties and web parts of modern page
#https://pnp.github.io/powershell/cmdlets/Get-PnPPage.html
$page=Get-PnPPage -Identity $pageName

#to have all conrols on page we habe Controls property as
$page.Controls

#fetching page properties
#$page | Select PageTitle,Name

REFERENCES

• Get-PnPPage – https://pnp.github.io/powershell/cmdlets/Get-PnPPage.html

Thanks for reading!!! HAVE a FANTASTIC LEARNING AHEAD 🙂 LIFE IS BEAUTIFUL 🙂