SharePoint Single Part App Pages

Recently, SharePoint introduced the “Full page apps” feature in ‘SharePoint Framework v1.7’. Using Single Part App Pages, developers can change the layout of the page which cannot be modified or configured by the end-user. It enables the developer to host SPFX web parts or Team application in SharePoint Online with a locked layout.

This feature can be quite useful for the developers to create a full-page application like traditional SharePoint Add-ins.

Characteristics of Full pages apps are as follows:

1. It is a developer-driven page layout.
2. Any existing normal page can be easily changed to the Single Part App Page.
3. End-users cannot edit it using a browser.

How can we use the Single Part App page in your tenant?

We will need to perform the following steps to enable the Single Part App Page layout in any SharePoint site.

1. Create a new page.
2. Add a web part on the page and configure that as needed.
3. Change the page layout type as “SingleWebPartAppPage”.
4. We can revert to normal layout by setting PageLayoutType as “Article”, anytime.

There are different ways to change a page layout type:

1. Changing page layout using JavaScript in a browser console.

We can change the existing page to use the “SingleWebPartAppPage” layout by using browser developer tools. We can simply enable the developer tools and execute the following code to change an existing page to use a “SingleWebPartAppPage” layout.

var siteUrl = 'https://contoso.sharepoint.com/sites/marketing/';
var pageUrl = 'SitePages/page.aspx'
 
fetch(siteUrl + '_api/contextinfo', {
  method: 'POST',
  headers: {
    accept: 'application/json;odata=nometadata'
  }
})
  .then(function (response) {
    return response.json();
  })
  .then(function (ctx) {
    return fetch(siteUrl + "_api/web/getfilebyurl('" + pageUrl + "')/ListItemAllFields", {
      method: 'POST',
      headers: {
        accept: 'application/json;odata=nometadata',
        'X-HTTP-Method': 'MERGE',
        'IF-MATCH': '*',
        'X-RequestDigest': ctx.FormDigestValue,
        'content-type': 'application/json;odata=nometadata',
      },
      body: JSON.stringify({
        PageLayoutType: "SingleWebPartAppPage"
      })
    })
  })
  .then(function(res) {
    console.log(res.ok ? 'DONE' : 'Error: ' + res.statusText);
  });

2. Changing page layout using PnP PowerShell

Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/marketing
$item2 = Get-PnPListItem -List "Site Pages" -Query "<View><Query><Where><Eq><FieldRef Name='FileLeafRef'/><Value Type='Text'>page.aspx</Value></Eq></Where></Query></View>"
$item2["PageLayoutType"] = "SingleWebPartAppPage"
$item2.Update()
Invoke-PnPQuery

3. Changing page layout using Office 365 CLI

o365 spo login https://contoso.sharepoint.com/sites/marketing
o365 spo listitem set --webUrl https://contoso.sharepoint.com/sites/marketing --listTitle 'Site Pages' --id 3 --PageLayoutType SingleWebPartAppPage