Recently, some people asked me how to develop full custom SharePoint Online pages with SPFx. This is possible with the single part app page which provide a great way to host SharePoint Framework (SPFx) web parts or Microsoft Teams apps into single web pages without user configuration available. Let’s have a look at this deeper now for my first article of 2021!
Single part app page
Before starting, you need to know existing limitations about this feature:
- Single Part App Pages cannot be edited by end users using a browser.
- Currently supports hosting only single web part or Microsoft Teams application.
- End users can create new app pages using the New > Page experience available in modern sites.
- Developers can change page layout programatically from normal page layout to a Single Page App Page (PnP PowerShell/CLI for Microsoft 365).
- There’s no New experience in a Single Page App Page. End users can create new Article pages or Single Page App pages by using the New/page experience present in the ribbon of any modern article pages.
And now, let’s create our app page…
Expose a web part as an app page
To expose a web part as an app page, it’s pretty simple. You need to update supportedHosts value of your component manifest file as following:
"supportedHosts": ["SharePointWebPart", "SharePointFullPage"]
Then package your solution, upload it to your tenant App Catalog and deploy it. And it’s done!
After this, when your create a new page on a site where the feature is deployed, you should see a new tab named Apps with your web part available as a single part app page when you select it.
When your new page is created, you can see the web part hosted in a full page experience.
Users can’t edit page settings but only web part settings inside the property pan like a standard web part.
Common use case
The common use case is when you want to provide a better user experience for web parts using multiple sections and controls inside them or simply to provide a full page experience when you develop a brand new feature for your site. I think this feature is a really good way to customize your SharePoint Online sites and should be considerated more often to alternate between web part and full page experiences.
Happy coding everyone!