Create Page Layout in Classic Experience with SPFX WebPart

Question

I am building a Classic Publishing Site with SP2019 and would like to create a Page Layout using SPFX WebParts.

The idea is that the layout will consist of an SPFX WebPart in the top with props that admins can configure (works fine if added as a regular webpart) and under it will be a regular text (inside container).

The WebPart works fine if inserted into any page but I want it to be in a page layout.

I cannot put the container in the Master Page because it will affect all WebParts and I don't want that since the banner for instance must occupy the whole page.

Answer 1

Hi @Mohammed Abed ,

In SharePoint 2019, creating a Page Layout using SPFX WebParts can be a bit challenging as the classic publishing site is based on ASP.NET Master Pages and Page Layouts.

However, there is a workaround that you can try to achieve your desired layout. Here's an approach you can follow:

Create a custom Page Layout:

Open SharePoint Designer or any preferred text editor.

Navigate to the site collection where you want to create the custom Page Layout.

In SharePoint Designer, go to "All Files" and then navigate to  folder./_catalogs/masterpage

Create a new Page Layout file (e.g., ).CustomLayout.aspx

In the Page Layout file, define the necessary HTML structure and markup for your layout.

Add a placeholder for the SPFX WebPart and the regular text section.

Configure the Page Layout:

In SharePoint Designer, open the site collection where you want to use the custom Page Layout.

Go to the "Page Layouts" library or the library where you want to store the Page Layout.

Upload the custom Page Layout file () to the library.CustomLayout.aspx

Edit the properties of the Page Layout and ensure that it is associated with the desired content type.

Add SPFX WebPart to the Page Layout:

Open the custom Page Layout file () in a text editor.CustomLayout.aspx

Locate the placeholder for the SPFX WebPart.

Insert the necessary HTML markup and code to include the SPFX WebPart in the desired location.

Save the changes to the Page Layout file.

By following this approach, you can create a custom Page Layout with an SPFX WebPart at the top and a regular text section underneath. The container for the SPFX WebPart will be specific to the Page Layout and won't affect other WebParts.

Please note that this approach involves customizing the Page Layout using SharePoint Designer and modifying the underlying markup. It requires knowledge of HTML, SharePoint Designer, and SharePoint 2019 development. Make sure to backup your site and test the changes in a development or staging environment before applying them to a production site.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng