SharePoint Framework: An Introduction to single part app pages

Article
1/17/2024

Introduction

With the introduction of SPFx version 1.7.0, we have the capability under preview to create Single Page Application in SharePoint Modern Pages using SingleWebPartAppPage layout.

In this article, we will see how we can create Single part App pages, its characteristics and in what scenarios it can be utilized.

Getting Started

Create Single App Part Page Using Powershell

To create a single part app page, we will use PnP Powershell. Open a windows powershell and run the below set of commands. Make sure all the latest PnP Powershell modules are installed in the system before proceeding. To download & install the latest PnP Module, kindly refer the link - Powershell Module

Create Modern Page in SharePoint using PnP Powershell.

Here in Line 3, we are specifying page name of the modern page to be created.

1.Connect-PnPOnline -Url https://ramakrishnan.sharepoint.com/sites/random #Replace your site url
2.$pageName = "SinglePageApplication"  #Page Name
3.Add-PnPClientSidePage -Name $pageName

Change the Page Layout to SingleWebpartAppPage using PnP PowerShell

Here in Line 3, we are changing the Page Layout to SingleWebPartAppPage, which changes the characteristic of Modern Page to Single Part App Page.

1.$pagewithExt = $pageName+".aspx"
2.$item = Get-PnPListItem -List "Site Pages" -Query "<View><Query><Where><Eq><FieldRef Name='FileLeafRef'/><Value Type='Text'>$pagewithExt</Value></Eq></Where></Query></View>"
3.$item["PageLayoutType"] = "SingleWebPartAppPage"
4.$item.Update()
5.Invoke-PnPQuery

Comparison

While comparing the single app part page layout and webpart behaviour side by side with the blank layout type, we get a full width along with the area of page title and banner. Also, we can notice that there are no command bar in single part app pages.

Normal Page with blank page layout	Single App part Page

Characteristics of Single Part App Page

Single Part App page cannot be modified by end user.
Currently Only one webpart can be added.

Conclusion

Single app part page can be a best candidate for single page application development where a single SPFx web part serves & manages application lifecycle.

Share via