Adding WebParts to custom Wikipagelayout

The other day at work I encountered a challenge and I would like to share the solution I found. I was busy building an application which will provision site collections, based on a custom defined template in XML. For this application I am using the PnP framework available for SharePoint 2013. Now the challenge I encountered was: “placing 4 webparts on a page in the same row using C# code”.”.

Now if you know the PnP framework, you might know that there is a function for adding webparts to a wikipage, called “AddWebPartToWikiPage”. The challenge I faced was that a wikipage has only the following defined layouts:

  • OneColumn;
  • OneColumnSideBar;
  • TwoColumns;
  • TwoColumnsHeader;
  • TwoColumnsHeaderFooter;
  • ThreeColumns;
  • ThreeColumnsHeader;
  • ThreeColumnsHeaderFooter.

The PnP framework also has the following function “AddHtmlToWikiPage”, to add html to a wikipage. So I decided to try setting a 4 columned table as the layout for the wikipage. The html I used is stated below:


However when I started the application the function “AddWebPartToWikiPage”, threw the following error: “Object reference not set to an instance of an object”. */sarcasm* Oh I do like SharePoint 2013 giving me always meaningful errors to Google */sarcasm*.

At some point I was about to give up, but then I decided to take a closer look at the file containing the function “AddLayoutToWikiPage”, to see what it is doing. In that code I noticed the following:


So basically what the function does is inserting html just like the function “AddHtmlToWikiPage”. When you look closer at the html structure the table is formatted in a certain way. Each <td> contains a <div> with another <div> inside. The first thing I tried was adjusting the “WikiPage_ThreeColumns” html and added another <td>. When I then tried my application it worked, however when I manually edited the page, SharePoint 2013 ruined the page.

So then it was back to the drawing board, but I had the feeling I was on the good way. So I decided to try adjusting the html, it took me several tries to get it finally working. The thing that messed up the page when in edit mode was the “id” of the <table> which was set to “layoutsTable”. To make this long story a bit shorter, the html you need to add to the page to get things working is:


When you add a table like this, you can then use the function “AddWebPartToWikiPage” to add a webpart to any place in the table. The most important thing is to include a <div> with another <div> inside an <td> tag. After I started my application with these adjustments the wikipage was successfully created the way I wanted. Also editing the wikipage was possible without SharePoint 2013 ruining my wikipage.

There is just one thing SharePoint 2013 does when you save the page when adjusting it manually. It makes a <table> with 1 <tr> and 1 <td> inside and of course the <div>’s inside the <td>. And as you might guess the “id” of the <table> is set to “layoutsTable”. It’s just something SharePoint 2013 needs I guess.

One Comments

  • Joel

    februari 5, 2016

    Nice article, this really helped me out, thx!


Geef een reactie