Microsoft 365 Community Community Demos, 24 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Change Page Layout Type Command Set Extension

Description

In this 6-minute developer-focused demo, Sudharsan Kesavanarayanan – simplifies changing SPO site page layout for one or multiple site pages from article to home or home to article. The Command targets pages in the Site Pages list. Updates pages with supported layouts and pages not presently checked-out by others. Essentially remove/add page title placeholder on page. With extension installed, select pages to change, change layout dialog comes up, select pages, click Save and done. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: Sudharsan Kesavanarayanan (NTT) | @sudharsank

Supporting materials:
• Sample - Change Page Layout Command Extension | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-change-page-layouttype

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Hi everyone, my name, is sudharsan keson orinon and I am working as a software architect at ntt, I'm also an mvp on office development, and these are my social links which you can connect me on.

A

So today we are going to see about a command extension named change, page layout, so where you can change the layout of the site pages in sharepoint online from article to home or home to article as of now, only two types are supported and you can find the sample at this link, but we have pspfx extensions, so features so, as I mentioned previously, so you can change from article to home and vice versa, and you also have an option to change up multiple pages. So it's not a page.

A

By page you can choose multiple pages and then you can update it, and there is also a validation where you cannot update if the page is checked out by other users, and it also provides to check whether the page is supported, because there are home, page, dashboard, page and other types of news posts and news link which are not support supported, so those will be displayed as unsupported, and this command is the command extension will be displayed only to the site pages list, not to the document, libraries or other list.

A

So this is basically a screenshot of the page where you can, once the pages are selected, you can see the extension and once you click on the command extension, you can see all the pages where it provides the toggle button. You can choose, whichever page you want to change it and then click on save so moving back to the uh code. So let me explain the main things so, after that we will see a demo, so the first is elements.xml where it is targeted to site pages. The registration id is 119 or 850..

A

As I mentioned, this is targeted to the site pages, so these are all the updates uh for the element.xml and the client side uh instance. So there are no properties uh given here moving back to the main methods.

A

So this method get item info. So once the pages are selected, all the pages id will be passing to the function where I'll be getting all these fields. The title page layout type and the author so and based on this I'll return, all those information and after getting all those information I'll be displaying in the model dialog and based on the selection, whether it is article or home, so I'll, be updating the page layout.

A

So this is on changing the launcher on triggering the toggle, so this functions will be executed, so the update page once you click on the save I'll, be passing the selected pages and whichever, whichever the pages are modified, only those pages id will be passed and the page layout will be updated.

A

So it's simple, very uh simple extension and I'm using pnp.js library and I'm also using the batch method so that all the pages are combined and then executed in the batch. So let us move on to the demo.

A

So here I have installed the extension, so let me open a few page, so basically, the main.

A

The main feature of this page is to sometimes you can see the placeholder here and you can see all the content since I am showing it in a large screen. You are able to see all the content. Sometimes if the users are viewing it 15 inch or 13 inch laptop. Sometimes this header will occupy the entire space, but if you want to focus on only to the content, in that case, there are some articles which are available which will use power automate to change it.

A

So, instead of deploying the power automate and then configuring it, so I have just developed an extension. So, for example, here the test news2 and faq page it has a page header where the contents are. You have to drill down to see the content, so once you select the pages so automatically, the extensions are enabled when you click on the change layout, so it will show the pages by the author and it will also show currently whether it is an article or home.

A

So you can choose you want the home play out and then just click save that's it. The pages are updated. So when you refresh back the header is gone, so you can focus on the content so the same way when you try to save it again because I'll be checking for the update. So I don't want to make unnecessary transaction calls to the sharepoint so I'll be uh checking on the update, whether actually the there is an update to save or not. If there is no update, then I won't make any calls to sharepoint okay.

A

So when you, when you are selecting the pages, so if you can see some of the page, because I have enabled viva connection dashboard, which is not supported, so it will show as not supported and some of the pages which are checked out by other users. You cannot change unless it is checked in and published by the users.

A

Okay, uh that's it patrick.

B

Back to you, awesome stuff, uh very cool demo, a neat use of pnpjs nice to see that in there and good uh good practice there to not do updates and not do activity to sharepoint. Unless you really need to so nice work. There.