How To Create Single Part App Pages Using SPFx In SharePoint Online

Introduction

 

Single part pages enable us to build a modern page in SharePoint online with a locked layout. We get the below benefits while using single part pages for end users,

• It won’t allow you to edit the page.
• It won’t allow  you to configure the webpart.
• It also helps to remove the command bar, so your webpart will stretch and cover the entire page except for the left nav and top title section.

Configuring full page webpart in SPFx webpart

 

SPFx Webparts can be configured to act as a full page webpart by adjusting the supportedHosts value in the manifest file.

 

Go to your Webpart manifest file and look for the keyword supportedHosts which is a string array already with the value “SharePointWebPart”. Additionally, add the value “SharePointFullPage”. Now, your manifest will look like below, 

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "eb7ac2da-d8eb-4118-9f4f-19ce595d3ad3",
  "alias": "AllPlatformsWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart", "SharePointFullPage"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "All Platforms" },
    "description": { "default": "This web part is visible in all platforms" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "allPlatforms"
    }
  }]
}

Once you do this configuration take another package of your SPFx app and add it in SharePoint Appcatalog.

 

Creating Single part app page

 

Go to any article page in the site and click “New” button in the top command bar to create new page.

 

You will be prompted with a panel where you can choose template for your site page. There you can find an additional option called “Apps”. It will list all the webparts that are configured to be Full Page webpart, choose your webpart and click “Create Page” button at the bottom.

 

 

How to provision existing page layout as SingleWebPartPage

 

Use the below commands to convert your existing SharePoint modern pages as SingleWebPartPage, make sure to replace tenant and page name based on your environment.

 

Using PowerShell,

Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/marketing
Set-PnPClientSidePage -Identity "Page" -LayoutType SingleWebPartAppPage

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

Difference between Single Part Page and Full Width webpart

 

Modern SharePoint modern pages allow you to choose different sections and layouts which helps to design an informative site page. SharePoint communication site offers additional layout called Full-width column.

 

This new layout allows webpart to stretch horizontally to cover the entire page. There will be no additional padding or margin between in the horizontal edges of the page.

 

Full-width column is just a layout which you can use along with other layouts, so your page can have both full width webparts and non-full width webparts.

 

But Single Part page is a feature, where SharePoint will allow you to add only one webpart in the page.

 

Enabling Full Width webpart

 

SPFx webparts will not support Full Width feature by default. If there is such requirement, we need to enable it. Go to your webpart *.manifest.json file and add the supportsFullBleed property and set its value as true.

 

Now package your webpart and add it in the AppCatalog. Then, go to your modern page and click the “+” button inside Full-Width column layout you will be able to find your full-width enabled webpart. Only webparts that are configured as suppprotsFullBleed will be displayed in the Full-Width column layout.

 

Conclusion

 

I hope this article helps you to understand what single page app parts and full width webparts are and how to configure and provision them in SharePoint Online. If you have any questions/issues about this article, please let me know in the comments.