A great deal of my working life is spent developing custom solution using the SharePoint Framework (SPFx).

For many years I have focused on the development of bespoke solutions where a customer’s specific needs are better served by the development of a custom solution rather than trying to cobble something together using the Power Platform, but recently I have been focusing on turning some of these more useful solution into reusable products released under a free/freemium licensing model and freely downloaded from the Kaboodle Software web site or from the Microsoft Marketplace.

What is a Full Bleed Web Part

A few of the standard SharePoint web parts provide the option to be added to a full-width section of a site page. These include the Image and Hero Web Parts, the Banner Web Part and (rather bizarrely) the Countdown Timer.

When developing a custom web part solution, you can make you solution support what is known as Full-Bleed mode, simply configuring the web part manifest file be ensuring the supportsFullBleed attribute is set to true, as highlighted below:

Setting this flag adds flexibility as it provides users with additional layout options, not available to a standard web part.

This flexibility does come with some limitations though. You need to be mindful that a site page can only have single full-width section which is always the top-most section of the page and unlike other sections it can only contain a single web part.

Still, I have recently developed a new product (called K-News and although it is not, at the time of writing, available for download, it will be released soon – so please do check back soon) which fuses news articles and event list items from multiple sources and presents them into a single unified view or through channel views (accessed by selecting a channel tab).

I have built K-News this to support multiple layout and configuration options including cards, tiles, mini-cards, hero channels, lists, grids, sliders and banners. This last banner layout option I see as being well suited for a full-width section which can rotate news article as a rotating or sliding banner using the full page width like the example shown below:

Now, when developing said web part, it is useful to be able to detect when a web part instance has been added to a full width section or whether it is housed within a standard section.

You would have thought that it would be an easy option to add say a “section type” property to the web part context so that we might easily detect the type of parent container. Being able to do so, might give us options to render the web part differently. For example, when in standard section we might want to add a subtle border which is not needed when in full-bleed mode.

The only problem is, such a property doesn’t exist – bummer!

However, it turns out that fortunately there is an easy to test if out web part is in full width section.

// Returns true if the web part is in a full bleed section

    private get isFullBleed(): boolean {

        return this.domElement.closest(“.CanvasZone–fullWidth”) !== null;

    }

I’ve defined this as a custom property of my web part, but you could equally define it as a method.

This works by ascending the parent DOM tree starting from the domElement that is hosting our web part in search of an element with a matching class name. Fortunately for us, Microsoft provides us with a class name that is unique to full width sections and so the property/method will only return a value if a DOM element with this class name is found in the web parts ancestry and return null otherwise.

This method does rely on Microsoft not changing their class names but so long as you code defensively you should be fine.