DevelopersFunworld: September 2022

Friday 16 September 2022

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

Sunday 11 September 2022

Visual Studio Code Prettier Extension Set up

Recently I needed to use the Prettier code formatter extension in visual studio code. I thought it would be similar to other extensions. But it is not. We need to set a setting for this extension to work automatically. We will go through that setting for the windows system in this blog.

Prettier Extension Set up

Open visual studio code as an administrator.

From extensions, install “Prettier – code formatter”

Once you have installed it, you can use it with CTRL + CMD + P (macOS) or CTRL + Shift + P (Windows) to manually format a file or a selection of code

Required Settings

We need to enable format on save settings for this extension. By default, it is disabled in visual studio code, and it is a manual setup.

Also, we need to set the Prettier extension as the default formatter.

Windows Machine set up

In windows, we can follow the below steps for the required settings:

Click settings. You will find it in the left bottom corner.

Click on Settings in the menu.

It will open the settings page. In that, click on the text editor.

Scroll down to “Default Formatter” settings.

Here, we need to select Prettier.

After this from the left menu click on “formatting”.

Here, checks the option “Format on save”.

Verify the changes

To verify the settings, click on the new text file from the file menu.

Click on select a language. Then select – HTML

Paste the below code and save the file.

 <html>  
 <head> <title>This is test</title> </head>  
 <body> <p>this is test</p> <p>This is test 2</p> <p>test</p> </body>  
 </html>

When you save the file, it will be automatically formatted.

Final Comments

With Prettier, the life becomes easy, and code becomes readable. However, be aware that this applies to every project now. If you happen to work on a project with a team where the project does not use Prettier, you will format every file once you save it. If not agreed upon with your teammates, this may cause trouble.

Pages