SharePoint: Add a web part to a page layout

Ben Prins Office 365

When customizing SharePoint we often create our own page layouts for solutions like news, events or information pages. In some cases I add a web part to the page layout. Adding web parts to a page layout when you use your own editor (not SharePoint Designer) can be a bit difficult if you don’t know all the coding details. To make live a bit more easy I use the following steps.

Solution

The solution consist of two parts creating the required web part and adding it to a page layout, three if you us another editor than SharePoint Designer.

Creating the web part

  • Add the required web part to a test page
  • Configure the web part as required
  • Export the web part to your local computer
  • Upload the web part into the web part (galery), located on the site collection settings

Page layout

  • Open SharePoint Designer and open the site collection where you uploaded the web part
  • Create a new page layout or edit an existing page layout
  • Go to the location where you want to add the web part
  • Click on Insert, then web parts and select the required web part

Another editor

  • Open the page layout in your editor
  • Copy the web part code from SharePoint Designer and paste it into your editor of choice

Display related items within a page layout

benjaminprins Office 365

An intranet resolves around its content and the findability of the content. Providing the user with useful information is vital for a good intranet. An example of providing useful information is to show related new articles besides a news article.

Solution

The solution consist of three parts the content type, page layout and a content query web part (CQWP).

Content type configuration

1. Create a new content type with Article page as parent.
2. Create a term set named news categories.
3. Add a few terms.
4. Add a new column named News Category linked to the news categories term set.

Page layout and CQWP configuration

1. Open the site in SharePoint Designer
2. Create the news page layout
3. Link the news content type to the page layout.
4. Add a web part zone
5. Add a CQWP to a web part zone.
6. Configure the CQWP to show the news items.
7. Configure the Additional filters.


6. Show items when: News catergory is equal to [PageFieldValue: News Category].

[PageFieldValue: News Category]

7. Or Title is not equal to [PageFiedlValue: Title].

[PageFiedlValue: Title]

7. Add the News Catergory column to the page layout.
8. Save the page layout and enjoy the result.

Result