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
Bamba | 29 Nov 2017

Hello, is it possible to add full-width column web part on page of team site ?


Velin Georgiev | 29 Nov 2017

Hi Bamba,

Not yet. That option is not available in a Site Page within a Team Site. It is only available in Communication Sites for now. I do not know if they will make it available for Team sites.


Bamba | 29 Nov 2017

Hello Velin,
Is it a way to get the modern pages ( FullWidth webpart) of a communication site when we have already a collection of site ? Thanks


Eric Schrader | 05 Jan 2018

When I try to save it to a modern page, I get the following error:
Could not save your changes

We're sorry, we encountered an unexpected error. Please try again, if the problem persists please contact your Administrator.


Eric Schraer | 05 Jan 2018

User error, it works fine for me after creating a new web part! FOr some reason the Communication site homepage wont let me use it, but a new page (with a page title section) will. Wonder if I can get it on the homepage somehow


Eric Schraer | 05 Jan 2018

After a lot of troubelshooting the web part was available on the homepage. I downloaded the home.aspx to my desktop, compared it to other pages, navigated to a CDN JS file, then went back to the homepage edit mode and my web part was available. Strange since nothing really changed, must have been caching.


Eric Schrader | 20 Jan 2018

I am getting an error now:
[19:45:57] Error - [write-manifests] Manifest validation error (./src/webparts/slider/SliderWebPart.manifest.json):
(#/) Data does not match any schemas from 'oneOf'
(#/) Missing required property: description
(#/) Missing required property: codePartType
(#/componentType) No enum match for: WebPart
(#/) Additional properties not allowed: supportsFullBleed


Eric Schrader | 20 Jan 2018

Nevermind, the SPFX sample had an old schema at the top:
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

New
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",


Eric Schrader | 26 Jan 2018

Very Strange, so you have to play around with edit mode to get the web part to appear in edit mode on the homepage full width section. A lot of saving as a draft and ctrl+F5 inbetween and going back into edit mode and the web part appears and I can add it.


Eric Schrader | 01 May 2018

The full page width web part hides until you scroll down. is there a way to fix this? div style="visibility: hidden;; visibility: visible; -webkit-transform: translateY(20px) scale(1); opacity: 0;transform: translateY(20px) scale(1); opacity: 0;" data-sr-id="2"