SOLVED

Custom Page Layouts with Modern Pages in SharePoint 2019

%3CLINGO-SUB%20id%3D%22lingo-sub-412411%22%20slang%3D%22en-US%22%3ECustom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-412411%22%20slang%3D%22en-US%22%3E%3CP%3EHello%3C%2FP%3E%3CP%3EIs%20there%20any%20way%20to%20provision%20custom%20page%20layouts%20associated%20with%20content%20types%20with%20modern%20pages%20in%20SharePoint%202019%3F%20For%20example%20in%20an%20intranet%20scenario%26nbsp%3Bwe%20have%20various%20custom%20content%20types%20that%20are%20associated%20with%20news%2C%20events%2C%20office%20locations%2C%20and%20other%20publications.%20We%20want%20to%20be%20able%20to%20still%20do%20what%20we%20once%20used%20to%20be%20able%20to%3A%26nbsp%3Bhave%26nbsp%3Bpre-defined%20page%20layouts%20that%20make%20life%20easier%20for%26nbsp%3Bcontent%20authors.%20We%20don't%20want%20the%20content%20author%20to%20configure%20a%20blank%20modern%20page%20from%20scratch%26nbsp%3Bto%20author%20a%20standard%20news%20piece%2C%20etc.%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-415025%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-415025%22%20slang%3D%22en-US%22%3EUnfortunately%20the%20answer%20is%20No%2C%20even%20we%20don't%20have%20yet%20custom%20page%20layouts%20in%20SPO%20(they%20are%20coming)%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-419539%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-419539%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3B%20Thanks%3C%2FP%3E%3CP%3EIs%20there%20any%20way%20to%20implement%20a%20custom%20extension%20that%20would%20add%20sections%20with%20the%20desired%20section%20layout%20and%20perhaps%20add%20some%20webparts%20onto%20the%20page%20once%20the%20page%20is%20created%3F%20From%20a%20content%20author's%20workflow%20perspective%20this%20could%20look%20like%20this%3A%20create%20a%20new%20page%2C%20apply%20custom%20news%20%22layout%22%20and%20start%20authoring.%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-419580%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-419580%22%20slang%3D%22en-US%22%3ENo%20to%20my%20knowledge%2C%20the%20thing%20here%20is%20that%20you%20cannot%20create%20custom%20layouts...but%20you%20could%20%22simulate%22%20it%20by%20adding%20WebParts%20to%20existing%20layouts%20and%20here%20the%20extension%20idea%20could%20work%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-420731%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-420731%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%3BThank%20you!%20Is%20there%20a%20way%20to%20create%20a%20drop%20down%20menu%20on%20the%20page%20mini%20ribbon%20to%20allow%20you%20to%20chose%20a%20%22layout%22.%20Once%20the%20layout%20is%20chosen%20the%20PnPJS%20code%20you%20suggested%20would%20run%20to%20reconfigure%20the%20current%20page%20in%20view%20(in%20edit%20mode)%3F%20See%20attachment.%20Appreciated%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-419994%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-419994%22%20slang%3D%22en-US%22%3E%3CP%3EAre%20you%20aware%20of%20any%20code%20that%20you%20could%20point%20me%20to%20that%20allows%20you%20do%20add%20a%20section%20to%20a%20page%2C%20configure%20the%20section's%20layout%20(like%20one%20column%2C%202%20column%2C%20etc%26nbsp%3B)%20and%20code%20that%20allows%20you%20to%20add%20webparts%20to%20pages%20and%20sections%20in%20the%20right%20columns%3F%20Thanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-420261%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-420261%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F306384%22%20target%3D%22_blank%22%3E%40bogdan_p%3C%2FA%3E%26nbsp%3BYou%20can%20use%20CSOM%20for%20this.%20I%20personally%20use%20PnP%20to%20do%20this%20kind%20of%20work.%20They%20have%20libraries%20for%20PowerShell%20and%20for%20C%23%20to%20help%20you%20do%20this.%3CBR%20%2F%3E%3CBR%20%2F%3EHere%20is%20a%20great%20video%20from%20a%20while%20back%20on%20how%20to%20do%20this.%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Foffice%2Fblogs%2Fprogramming-modern-pages-with-zones-sections-news-and-home-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Foffice%2Fblogs%2Fprogramming-modern-pages-with-zones-sections-news-and-home-pages%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-446632%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-446632%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F306384%22%20target%3D%22_blank%22%3E%40bogdan_p%3C%2FA%3E%26nbsp%3BUnfortunately%2C%20not%20that%20isn't%20something%20you%20can%20do%20currently.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-420422%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-420422%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%3BThanks%20for%20the%20suggestion.%20Could%20all%20that%20code%20be%20done%20client%20side%20somehow%20and%20available%20to%20content%20users%20via%20GUI%3F%20Obviously%26nbsp%3Bcontent%20authors%20don't%20have%20access%20to%20C%23%20%2F%20CSOM%20and%20so%20on.%20They%20want%20an%20easy%20workflow.%20Create%20a%20new%20page%2C%20click%20a%20button%20to%20change%20layout%20and%20start%20content%20authoring.%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-420447%22%20slang%3D%22en-US%22%3ERe%3A%20Custom%20Page%20Layouts%20with%20Modern%20Pages%20in%20SharePoint%202019%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-420447%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F306384%22%20target%3D%22_blank%22%3E%40bogdan_p%3C%2FA%3E%26nbsp%3BLook%20into%20PnPJs%2C%20they%20have%20some%20functionality%20to%20make%20it%20easier%20to%20work%20with%20pages.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Visitor

Hello

Is there any way to provision custom page layouts associated with content types with modern pages in SharePoint 2019? For example in an intranet scenario we have various custom content types that are associated with news, events, office locations, and other publications. We want to be able to still do what we once used to be able to: have pre-defined page layouts that make life easier for content authors. We don't want the content author to configure a blank modern page from scratch to author a standard news piece, etc.

Thanks

9 Replies
Highlighted
Best Response confirmed by Beau Cameron (MVP)
Solution
Unfortunately the answer is No, even we don't have yet custom page layouts in SPO (they are coming)
Highlighted

@Juan Carlos González Martín  Thanks

Is there any way to implement a custom extension that would add sections with the desired section layout and perhaps add some webparts onto the page once the page is created? From a content author's workflow perspective this could look like this: create a new page, apply custom news "layout" and start authoring.

Thanks

Highlighted
No to my knowledge, the thing here is that you cannot create custom layouts...but you could "simulate" it by adding WebParts to existing layouts and here the extension idea could work
Highlighted

Are you aware of any code that you could point me to that allows you do add a section to a page, configure the section's layout (like one column, 2 column, etc ) and code that allows you to add webparts to pages and sections in the right columns? Thanks

Highlighted

@Deleted You can use CSOM for this. I personally use PnP to do this kind of work. They have libraries for PowerShell and for C# to help you do this.

Here is a great video from a while back on how to do this.

https://developer.microsoft.com/en-us/office/blogs/programming-modern-pages-with-zones-sections-news-and-home-pages/

Highlighted

@Beau Cameron Thanks for the suggestion. Could all that code be done client side somehow and available to content users via GUI? Obviously content authors don't have access to C# / CSOM and so on. They want an easy workflow. Create a new page, click a button to change layout and start content authoring.

Thank you

Highlighted

@Deleted Look into PnPJs, they have some functionality to make it easier to work with pages.

https://pnp.github.io/pnpjs/sp/docs/client-side-pages/

Highlighted

@Beau Cameron Thank you! Is there a way to create a drop down menu on the page mini ribbon to allow you to chose a "layout". Once the layout is chosen the PnPJS code you suggested would run to reconfigure the current page in view (in edit mode)? See attachment. Appreciated

Highlighted

@Deleted Unfortunately, not that isn't something you can do currently.