This project is a sample code to create a modern news page.
This sample shows you how to create a modern news page using SPFx.
git clone https://github.com/MickNabewata/spfx-add-news-button-webpart.git
npm i
npm i -g gulp
gulp
This web part provide a button create a news , add a section and webparts in created news page.
Note that this sample does not have the function to publish pages,
so if you are managing a minor version in the library,
be aware that the draft page will be created.
image2:You can find the news in _layouts/15/news.aspx
At first, you should create a Client Side Page.
And then, update properties of the page.
The minimum properties to update are below.
To update page properties, you shold get ListItemEntityTypeFullName first.
- PromotedState
This property should be updated to "2".
This process can be implemented by any other solutions.
(e.x. SPFx, CSOM, REST, ...)
Here is Microsoft Docs page.
Customizing modern site pages
You can use PnP for implement this.
ClientSidePage.addSection() method help you to add sections on your page.
CanvasSection.addColumn(factor : CanvasColumnFactorType) method is used to add columns in a section.
CanvasColumnFactorType is defined as below.
export declare type CanvasColumnFactorType = 0 | 2 | 4 | 6 | 8 | 12;
Note that the total value of CanvasColumnFactorType in one section should be 12.
Otherwise, you can not edit the created section on the web page.
As long as you keep this rule, you can also implement a layout that can not be set using default edit page of sharepoint.
(Eg 4 columns in one section etc)
However, be aware that these layouts can not be set when using the edit page.