SOLVED

SPFx: Differences between full width page layout, single page app and single web part app page

%3CLINGO-SUB%20id%3D%22lingo-sub-534744%22%20slang%3D%22en-US%22%3ESPFx%3A%20Differences%20between%20full%20width%20page%20layout%2C%20single%20page%20app%20and%20single%20web%20part%20app%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-534744%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3CBR%20%2F%3EI'm%20exploring%20the%20options%20to%20have%20an%20SPFx%20webpart%20be%20displayed%20as%20the%20full%20page%20width.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20found%20out%20about%20three%20different%20kinds%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20full%20width%20page%20layout%20(as%20found%20in%20Communication%20Sites)%3C%2FP%3E%3CP%3E2.%20single%20page%20app%20(as%20per%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DZLx-AvWLV0E%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ethis%3C%2FA%3E%26nbsp%3Bvideo)%3C%2FP%3E%3CP%3E3.%20single%20web%20part%20app%20page%20(as%20per%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8BATz6LD6tA%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ethis%3C%2FA%3E%26nbsp%3Bvideo)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20kind%20of%20confused%20as%20to%20which%20option%20would%20be%20best%20for%20having%20the%20modern%20%22react-script-editor%22%20web%20part%20(%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Festruyf-singleton%2Fsamples%2Freact-script-editor%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Elink%3C%2FA%3E)%20display%20over%20the%20entire%20width%20of%20a%20modern%20page%20of%20layout%20type%20%22Article%22.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20tried%20to%20jQuery%20the%20public%20render%20method%20and%20change%20the%20.CanvasZone%20style%20to%20full-width%20but%20this%20only%20works%20after%20adding%20the%20webpart%20and%20exiting%20edit%20mode.%20Once%20I%20refresh%20the%20page%20the%20style%20is%20removed%20for%20whatever%20reason.%20So%20I'm%20looking%20for%20a%20more%20%22supported%22%20way%20but%20I'm%20confused%20as%20to%20those%20three%20options%20I%20have.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20would%20you%20suggest%3F%20Thanks%20for%20your%20input.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-535119%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%3A%20Differences%20between%20full%20width%20page%20layout%2C%20single%20page%20app%20and%20single%20web%20part%20app%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-535119%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F37813%22%20target%3D%22_blank%22%3E%40Florian%20Hein%3C%2FA%3E%26nbsp%3BI'd%20like%20to%20start%20by%20saying%20that%20injecting%20code%20to%20override%20the%20out%20of%20the%20box%20styles%20is%20not%20supported%20and%20it's%20likely%20going%20to%20break%20in%20the%20future.%20Those%20class%20names%20used%20in%20the%20HTML%20change%20quite%20frequently.%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20DOM%20is%20not%20an%20API%20and%20you%20shouldn't%20try%20to%20override%20it.%20To%20build%20full%20width%20pages%2C%20you'd%20have%20to%20build%20all%20of%20your%20web%20parts%20from%20scratch.%20Your%20options%20as%20below%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EA%20single%20web%20part%20app%20page%3COL%3E%0A%3CLI%3EA%20single%20part%20page%20is%20a%20way%20to%20build%20an%20app%20that%20controls%20the%20entire%20page%20(below%20the%20navigation)%3C%2FLI%3E%0A%3CLI%3ECannot%20be%20edited%20or%20modified%20by%20end%20users%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3C%2FLI%3E%0A%3CLI%3ECustom%20SPFx%20Web%20Parts%20set%20as%20full%20width%3COL%3E%0A%3CLI%3EYou%20can%20create%20SPFx%20web%20parts%20that%20are%20set%20to%20%22full%20width%22%20and%20they%20show%20up%20when%20you%20use%20the%20out%20of%20the%20box%20%22%2B%22%20add%20a%20web%20part%20to%20page%20on%20a%20full%20width%20section%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20your%20primary%20building%20block%20is%20going%20to%20be%20the%20react-script-editor%20web%20part%20(I%20don't%20really%20recommend)%2C%20you%20can%20modify%20the%20*.manifest.json%20file%20in%20the%20SPFx%20solution%20to%20include%20%3CSTRONG%3E%22supportsFullBleed%22%3Atrue%20.%26nbsp%3B%3C%2FSTRONG%3EThis%20will%20allow%20the%20web%20part%20to%20show%20up%20in%20a%20full%20width%20section%20of%20an%20article%20page.%3CBR%20%2F%3E%3CBR%20%2F%3EAs%20noted%2C%20I%20don't%20100%25%20recommend%20using%20the%20script-editor%20web%20part%2C%20while%20functional%2C%20it%20takes%20away%20from%20some%20of%20the%20power%20of%20SPFx%20which%20is%20the%20ability%20have%20centralized%20control%20and%20management%2C%20CI%2FCD%2C%20etc...%20of%20your%20solutions.%20When%20using%20a%20script-editor%20web%20part%2C%20you%20are%20opening%20the%20doors%20to%20ill%20managed%20code%20to%20surface%20across%20your%20entire%20tenant.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-539583%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%3A%20Differences%20between%20full%20width%20page%20layout%2C%20single%20page%20app%20and%20single%20web%20part%20app%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-539583%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F39836%22%20target%3D%22_blank%22%3E%40Beau%20Cameron%3C%2FA%3E%26nbsp%3B%2C%20thanks%20for%20elaborating%20on%20the%20topic.%20You%20confirmed%20what%20I've%20read%20already%20in%20that%20it's%20best%20to%20leave%20the%20DOM%20alone%20and%20not%20apply%20customizations%20of%20that%20kind%20-%20makes%20sense%20to%20me%20but%20as%20I'm%20not%20quite%20good%20at%20SPFx%20yet%20I%20was%20looking%20for%20a%20quick%20solution%20first.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegarding%20a%3CSPAN%3E%26nbsp%3Bsingle%20web%20part%20app%20page.%20Am%20I%20correct%20in%20understanding%20that%20this%20will%20cover%20the%20entire%20page%20width%20without%20having%20to%20instantiate%20it%20on%20a%20page%20that%20supports%20the%20full%20page%20width%20layout%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20understand%20that%20another%20main%20difference%20is%20that%20it%20cannot%20be%20modified%20or%20edited%20by%20end%20users.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnd%20if%20I%20used%20a%26nbsp%3B%3CSPAN%3ECustom%20SPFx%20Web%20Parts%20with%20%3CSTRONG%3E%22supportsFullBleed%22%3Atrue%22%26nbsp%3B%3C%2FSTRONG%3Ewould%20I%20first%20need%20to%20convert%20the%20modern%20page%20so%20that%20it%20supports%20full%20page%20width%20layout%3F%3CBR%20%2F%3EBecause%20as%20far%20as%20I%20can%20tell%2C%20only%20Communication%20Sites%20support%20that%20layout%20type%20at%20the%20moment.%20Article%20pages%20to%20not%20have%20this.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThanks.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-540793%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%3A%20Differences%20between%20full%20width%20page%20layout%2C%20single%20page%20app%20and%20single%20web%20part%20app%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-540793%22%20slang%3D%22en-US%22%3E%3CP%3EAh%20yes.%20Full%20width%20pages%20are%20only%20available%20for%20Communication%20sites%20as%20Team%20Sites%20currently%20have%20the%20left%20navigation.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EYes%20a%20full%20app%20page%20gives%20you%20the%20entire%20page%20layout%20(underneath%20the%20top%20nav%20bar%2Fheadings)%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

Hi,
I'm exploring the options to have an SPFx webpart be displayed as the full page width.

 

I found out about three different kinds:

 

1. full width page layout (as found in Communication Sites)

2. single page app (as per this video)

3. single web part app page (as per this video)

 

I'm kind of confused as to which option would be best for having the modern "react-script-editor" web part (link) display over the entire width of a modern page of layout type "Article".

 

I tried to jQuery the public render method and change the .CanvasZone style to full-width but this only works after adding the webpart and exiting edit mode. Once I refresh the page the style is removed for whatever reason. So I'm looking for a more "supported" way but I'm confused as to those three options I have.

 

What would you suggest? Thanks for your input.

3 Replies
Highlighted

@Florian Hein I'd like to start by saying that injecting code to override the out of the box styles is not supported and it's likely going to break in the future. Those class names used in the HTML change quite frequently.

The DOM is not an API and you shouldn't try to override it. To build full width pages, you'd have to build all of your web parts from scratch. Your options as below:

 

  1. A single web part app page
    1. A single part page is a way to build an app that controls the entire page (below the navigation)
    2. Cannot be edited or modified by end users
  2. Custom SPFx Web Parts set as full width
    1. You can create SPFx web parts that are set to "full width" and they show up when you use the out of the box "+" add a web part to page on a full width section

 

If your primary building block is going to be the react-script-editor web part (I don't really recommend), you can modify the *.manifest.json file in the SPFx solution to include "supportsFullBleed":true . This will allow the web part to show up in a full width section of an article page.

As noted, I don't 100% recommend using the script-editor web part, while functional, it takes away from some of the power of SPFx which is the ability have centralized control and management, CI/CD, etc... of your solutions. When using a script-editor web part, you are opening the doors to ill managed code to surface across your entire tenant.

Highlighted

@Beau Cameron , thanks for elaborating on the topic. You confirmed what I've read already in that it's best to leave the DOM alone and not apply customizations of that kind - makes sense to me but as I'm not quite good at SPFx yet I was looking for a quick solution first.

 

Regarding a single web part app page. Am I correct in understanding that this will cover the entire page width without having to instantiate it on a page that supports the full page width layout?

I understand that another main difference is that it cannot be modified or edited by end users.

 

And if I used a Custom SPFx Web Parts with "supportsFullBleed":true" would I first need to convert the modern page so that it supports full page width layout?
Because as far as I can tell, only Communication Sites support that layout type at the moment. Article pages to not have this.

 

Thanks.

Highlighted
Best Response confirmed by Florian Hein (Regular Contributor)
Solution

Ah yes. Full width pages are only available for Communication sites as Team Sites currently have the left navigation. 

Yes a full app page gives you the entire page layout (underneath the top nav bar/headings)