Hello Folks,
Today we are going to see how to add SPFX webpart to full-width column in SharePoint Online. Actually, this is a very simple task but some of us like me don’t know to add SharePoint SPFx webpart to full-width column.
In SharePoint Communication sites, we have a page layout that includes a full-width column. But the thing is that not all custom solutions or web parts are suitable for that full-width column.
Site page full-width column layout
In the Modern site page of SharePoint site, We can see a full-width column see under “Section layout” along with other few options.
Retrieve all users from Site Collection using PowerShell
Developers can not use this section layout as it is not available in the local or SharePoint Online workbench, but we can still test it directly in SharePoint Online Page. When I tried to add one of my custom SPFx webparts, I saw the below screen where it is mentioned that only webparts that support full-width will be listed.
how to make a custom webpart available in the list of full-width webparts
Quick research shows some interesting things with 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 the below location.
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."
}Add 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.
{
...
"id": "2f867fe8-9619-4f55-9c74-f318c979d177",
"alias": "TestFullWidthWebpart",
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportsFullBleed": true,
"supportedHosts": ["SharePointWebPart"],
...
}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.
Conclusion:
We can now add full-width column SPFx webparts and seems that Office 365 team cares about the developers more than ever before adding important features we need to deliver high-quality solutions.
If you thinnk this is a usefull post, Please Share it with your friends. Sharing is Caring
