How to add SPFx webpart to full-width column


Along with the SharePoint communication sites, we also got updated site page with layouts that include full-width column, but not all custom webparts are fit for that full width layout section.

Site page full-width column layout

So if we create new modern site page, we can see under "section layout" few options including the Full-width column. SharePoint full-width column SPFx web part

It is not yet presented in the local or online workbench provided for the developers to build their custom webpart, but we can still test it directly on the SharePoint page. When I attempted to add one of mine custom SPFx webparts there I ended with the screen below where is stated that only webparts that support full with would be listed.
SharePoint full-with column does not show custom SPFx web parts

Quick investigation on how to make a custom webpart available in the list of full-width webparts

Quick reverse engineering shows interesting stuff in the SharePoint JavaScript files on a site page.

...
e.isFullWidthControl = function(t) {
    if (t && t.controlType === d.default.WebPartZone) {
            var e = t;
            return e.webPartManifest && e.webPartManifest.supportsFullBleed || -1 !== h.indexOf(e.webPartId)
        }
        return !1
    }
...
As we can see it is a setting called "supportsFullBleed" in the webpart manifest so let's open the manifest.

The webpart schema is located at

node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/client-side-web-part-manifest.schema.json
We can find the "supportsFullBleed" setting in there (You might need to update your sp @microsoft node modules to the latest if you do not see it):
"supportsFullBleed": {
          "type": "boolean",
          "title": "Supports full bleed display experience",
          "description": "If set to \"true\", this web part supports and has been tested for full bleed experience."
        }

Let's now add support for full-width column layout in a custom SPFx webpart

- Open the SPFx solution folder
- Navigate to src/webparts/<yourCustomSpfxWebpart>
- Open the webpart manifest YourCustomSpfxWebpart.manifest.json
- Add the "supportsFullBleed": true setting.
Example:


{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "d0645794-bb69-4873-a867-6cb7a3e414b9",
  "alias": "ReactSearchRefinerWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "supportsFullBleed": true

   ....
Package the solution, deploy to SharePoint online, make it available for your site. Create new modern page, add full-width column layout and the custom webpart should be there.
custom SPFx web part listed in the Site Page full-width column section
There is the final result.
custom SPFx web part added to Site Page full-width column

Conclusion

We can now add full-width column SPFx webparts now and seems that Office 365 team cares about the developers more than ever before adding key features we need to deliver high quality products.

Sharing is caring

Posted on

Tags: SharePoint, SPFx, OfficeDevPnP, Communication Sites, SitePage, ClientSidePage, Office365, FullWidth webpart, supportsFullBleed

Comments