Single Part App Page In SharePoint Online

What is a Single Part App Page?

A single part app page is nothing but a SharePoint Framework web part with a locked layout. This means when you make your web part as a single part app page, then the users cannot modify the page layout using the browser.

Make your existing web part as Single Part App Page

You can choose any of your existing web parts to make it as a single part app page, but you’ll have to decide when to use it as a single part app page.

In this example, I’ll use my previous code on "Creating a single page app in SPFx" which you can find here.

Step 1

Download the zipped source code and extract files.

Single Part App Page in SharePoint Online

Or you can also use your own web part code.

Step 2

Open the extracted folder in the code editor and navigate to the SinglePageAppWebPart.manifest.json file inside the “src” folder.

Step 3

In the “supportedHosts”, add “SharePointFullPage”

"supportedHosts": ["SharePointWebPart", "SharePointFullPage"],

Now, your manifest.json will look like this.

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "2d3e8aa0-cc9c-405e-8f74-b74c03566a06",
"alias": "SinglePageAppWebPart",
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart", "SharePointFullPage"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": { "default": "Other" },
"title": { "default": "SinglePageAPP" },
"description": { "default": "SinglePageAPP description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "SinglePageAPP"
}
}]
}

Step 4

Go to your package-solution.json file and change

"isDomainIsolated": false,

This is to ensure that we don’t face “Refused to execute inline script” error after deployment.

Step 5

That’s it -- build and package your solution and upload it to the app catalog in your SharePoint.

Build - “gulp bundle”

Package - “gulp package-solution --ship”

Step 6

Insert the web part on a fresh modern page of your SharePoint.

You can see that we can still edit the page layout.

Step 7

As a final step, single part app pages will have a locked layout. Let's run a simple PowerShell command.

Open SharePoint online management shell and execute the following script.

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

Step 8

Refresh the page after executing the script and you should see that the page layout is no longer editable.

NOTE
The Edit option above is for editing the web part properties and not the page layout.

Cool, we have created our Single Part App Page. Let’s explore much more interesting stuff on SharePoint in my future articles. 😊