How to create custom create news button in SharePoint Online?

 Recently we were developing a custom news web part using SPFx. The functionality was required the same as the OOTB news web part. The only change was we needed a few more layout options as well we need to showcase a few more column details in the news web part. We build the remaining things as expected but we didn’t have any idea how to provide create a post button as the OOTB news web part provides.

Issue:

So, our first approach was the lazy one. We find out a URL that will create a site page and we will train users to click “Promote as news” once the page is published.
URL – [SiteURL]/_layouts/15/CreateSitePage.aspx

But the issue is, Client didn’t agree to have a 2-click solution.

Solution:

We got a blog from Shantha Kumar (link in description) that provided us an initial idea of the difference between a modern site page and a news post. Microsoft has put a parameter – “Promoted State” to differentiate the page creation.

Promoted State	Page Creation Experience
0 or null	This will create a Modern Site page.
1	This will create a News post in the draft version.
2	This will be the News Post in the published version.

 

In simple terms, if we hit the below URL, it will create the news post:
[SiteURL]/_layouts/15/CreateSitePage.aspx?promotedstate=1

This solved the first half of the issue. But Microsoft has provided different experiences in news post creation. If you are creating news posts from site pages, it will create posts from a basic template directly. But if you are creating it from the home page or any news post, it will showcase template selection.

The client asked us if it is possible to open that pane with a button click. Here we needed to research some more and ultimately our savior stack exchange has an answer for that. The updated URL will look like the below:

[SiteURL]/_layouts/15/CreatePageFromTemplate.aspx

As the information is scattered and hidden, I thought it would be useful to have this in one place. Hope this helps.  

Reference:

• https://docs.microsoft.com/en-us/dotnet/api/officedevpnp.core.pages.promotedstate?view=sharepoint-pnpcoreol-3.2.1810
• https://www.c-sharpcorner.com/blogs/how-the-sharepoint-works-before-creating-news-post-site-page
• https://sharepoint.stackexchange.com/questions/275598/use-template-for-modern-page-set-page-template-for-the-content-type-site-page