Create Full-Width SharePoint WebParts




Team Site vs Communication Site

In SharePoint, Microsoft offers two primary types of site templates: Team Sites and Communication Sites. It’s crucial to know the difference between these two, as it affects the layout options available to you.

Specifically, only on Communication Sites can you add and create web parts that span the full width of the page. In contrast, Team Sites are limited to a maximum width of approximately 1200 pixels. This means if you need to create sections that extend across the entire width of the page, you’ll need to use Communication Sites.

CSS

Once you’ve set up your Communication Site, the next step is to expand the WebPart to full width. To achieve this, we need to modify two key HTML elements within the default Microsoft setup.

Firstly, the #workbenchPageContent – this is the environment visible when you’re developing your webpart using commands like gulp serve.

More importantly, the .CanvasZone, which is the section of your SharePoint site where the webpart will be displayed. To expand these elements to full width, their max-width property needs to be set to 100%.

This can be done by opening the main .scss file, which is included in every SPFx Webpart, and adding the appropriate code to adjust the max-width.

// Full-Width Workbench
:global {
  #workbenchPageContent,
 .CanvasComponent.LCS .CanvasZone {
    max-width: 100% !important;
  }
}

Manifest.json

Besides the CSS modifications mentioned earlier, it’s also necessary to update the manifest.json file of your webpart.

This file is located in the main src/webparts/YOURWEBPARTNAME directory of your webpart.

The specific code addition required can be placed anywhere within the manifest.json file. It’s important to include this to ensure the changes take effect.

// Full-Width Workbench
"supportsFullBleed": true,

Adding the Full-width section

Now on your Communication Site, go to edit at the top right and add a new section, then select Full-width section.

Adding the WebPart

I assume you are already familiar with building and packaging your web part using standard gulp commands. Additionally, you should understand how to deploy the WebPart by adding it to the app catalog and installing it on your site.

Once these steps are completed, your web part will become available for selection in the full-width section that we’ve just configured.

That’s it.

cheers,
Caspar
👻

Post Archive