Post
Ask Question

Full Width Column SPFx Control

SharePoint Online Modern communication site pages support section layout, named Full-Width column. It helps to span the section without any horizontal margin or padding.
 
In this article, you will learn the following,
  1. Add Full-width Section.
  2. Add Full-width support to SPFx Control.
  3. Add SPFx Control to Full-width Section.
Users can choose from a number of different section layouts such as,
  • one columns 
  • two columns
  • three columns
  • one-third left column
  • one-third right column

Full-Width Section Requirement

 
When we build a regular SPFx control, it doesn’t expand beyond a certain width due to section layouts which don’t support or allow the full width.
 
So, let’s get started
 
Step 1 - Add Full-Width Section
  • Full-width section allows layouts to expand to the full width of the page.
  • Edit the page
  • Click the plus “+” icon parallel to the section layout and select the Full-width section.
Full Width Column SPFX Control
 
Step 2 - Add Full-Width support to SPFx Control
 
SPFx control doesn’t add the full-width column property by default. But SharePoint Framework allows us to add full-width column attributes into the web part manifest file, i.e., GetEmployeeDataWebPart.menifest.json and adds supportsFullBleed property to true.
  1. {  
  2.   "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",  
  3.   "id": "c58ad54b-0b32-4087-8b9b-5b28ded5e375",  
  4.   "alias": "GetEmployeeDataWebPart",  
  5.   "componentType": "WebPart",  
  6.   
  7.   // The "*" signifies that the version should be taken from the package.json  
  8.   "version": "*",  
  9.   "manifestVersion": 2,  
  10.   
  11.   // If true, the component can only be installed on sites where Custom Script is allowed.  
  12.   // Components that allow authors to embed arbitrary script code should set this to true.  
  13.   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  
  14.   "requiresCustomScript": false,  
  15.   "supportsFullBleed": true,  
  16.   
  17.   "preconfiguredEntries": [{  
  18.     "groupId": "5c03119e-3074-46fd-976b-c60198311f70",   
  19.     "group": { "default": "Other" },  
  20.     "title": { "default": "GetEmployeeData" },  
  21.     "description": { "default": "GetEmployeeData description" },  
  22.     "officeFabricIconFontName": "Page",  
  23.     "properties": {  
  24.       "listName": "SPFxList"  
  25.     }  
  26.   }]  
  27. }  
Full Width Column SPFX Control
 
Do the above one line setting. Build the bundle and deploy the solution.
 
Step 3 - Add SPFx Control to Full Width Section 
 
Browse the site and add a full-width section. The custom SPFx control will be available as per the below screenshot.
 
Full Width Column SPFX Control
 
Click and add control. You can see that the custom control will take the full horizontal section and doesn’t allow margin or spaces.
 
Full Width Column SPFX Control
 
Note
As per today, the full-width column section doesn’t work with workbench and Modern Team Sites.
 
I hope you have enjoyed and learned something new in this article. Thanks for reading. Stay tuned for the next article.


Similar Articles