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 = '';
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
$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"

3. Changing page layout using Office 365 CLI

o365 spo login
o365 spo listitem set --webUrl --listTitle 'Site Pages' --id 3 --PageLayoutType SingleWebPartAppPage



Related posts

Challenges bring the best out of us. What about you?

We love what we do so much and we're always looking for the next big challenge, the next problem to be solved, the next idea that simply needs the breath of life to become a reality. What's your challenge?