Duplicate Client Side Pages Into Same Modern SharePoint Online SitePages Lib

 

Problem Statement 

 

In this article, I would like to explain how to duplicate client side pages which have OOTB webparts and custom SPFx webparts into the same site pages library within the same site collection.

 

As a developer, we have a couple of options to duplicate the page into another modern site collection library or different folder structure, but  there is no way to copy the pages within the same modern site collection site library within the same folder structure.

 

Prerequisites Steps  

 

Let's create a page and add the exisitng below controls,  or the user can add any other available controls. This is just for demo purposes. 

• SharePoint Online PnP PowerShell Overview here
• Add and Configure  Custom SPFx Control
• Add and Configure  Image Control
• Add and Configure  News Control

Approach Overview

 

We need to follow the below key steps to perform duplication of Modern Site Collection Site Pages into the Same Library Folder. 

1. Use PnP Online to connect to SharePoint Online Modern Site
2. Export PnP Client Side Pages Command  export pages with PnP Provisioning Template
3. Store it locally.
4. Apply PnP Provisioning Template store it with different name. 

SharePoint Online PnP PowerShell Script

1. try   
2.    {  
3.       
4.         $srcUrl = "https://mittal1201.sharepoint.com/sites/commsitehub"   
5.         Connect-PnPOnline -Url $srcUrl  
6.         $pageName  = [System.Web.HttpUtility]::UrlDecode("Home")  
7.         write-host $pageName  
8.         $tempFile = 'C:\CsharpCorner\'+ $pageName +'.xml'  
9.         Export-PnPClientSidePage -Force -Identity $pageName -Out $tempFile  
10.   
11.         $con = Get-Content $tempFile  
12.         $sourcepage=$pageName +".aspx"  
13.         $targetpage=$pageName +"_Duplicate.aspx"  
14.        
15.         $con | % { $_.Replace($sourcepage, $targetpage) } | Set-Content $tempFile  
16.         Apply-PnPProvisioningTemplate -Path  $tempFile  
17.         write-host -ForegroundColor Magenta "Page Created with name of  " $targetpage    
18.      
19. }   
20. catch {  
21.     Write-Host - ForegroundColor Red 'Error ', ':'  
22.     $Error[0].ToString(); 

Save and run this script.

OutPut Steps 

 

Applying template to client side pages

 

Export-PnPClientSidePage Cmdlets applying the PnP Provisioning template and export ".xml" file into shared locaiton. Cmdlets referece can be found here 

Creation of client side pages 

 

Apply-PnPProvisioningTemplate cmdlets will create a new page within same library from download or exported ".xml" file with provided name i.e. pagename _ duplicate

Cmdlets referece can be found here

 

 Final Duplicate Page outcome

 

Browse the url with suffix as _duplicate in the url. New Client Side Page will be available with all configuration and controls.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.