Skip Ribbon Commands
Skip to main content

Dynamic Page Layouts in SharePoint 2013 - Part 1

Giving content managers ultimate flexibility in creating pages on SharePoint 2013

James Strugnell

21/07/2016

​​​​​​​​​​​​​Introduction

This is going to be a series of articles (not sure how many yet) describing a solution we recently built for a client. The solution was built for SharePoint 2013 and is a full farm solution, i.e. no Office 365 here I'm afraid.

A couple of years ago we started a project for a long-term client which had the goals of building an all-new web platform on a hosted SharePoint 2013 environment. Their existing website was built on SharePoint 2007 and was starting to show its age, not least in the fact that support for that version was running out.

SharePoint 2013, at the time, was fairly new to the market and had shipped with a number of new features targeting the public website market. Our client was looking for a self-managing platform on which they could build any number of "microsites" in addition to hosting their main site. These sites needed to be highly customisable, themeable and include a large suite of web parts that could be configured to work across browsers and devices.

I'm happy to report that we delivered on the above and the client has been very pleased with the capabilities they now have. 

Nee​​d

There was one aspect of our solution that I was never completely satisfied with, and that was the static nature of the supposed "highly configurable" Page Layouts we had provided. Specifically, we had provided a "Landing Page" layout which was intended to be used for home pages and provide fairly unlimited options in terms of layout configuration.

The client wanted to be able to use the Landing Page in any number of ways, and basically not be restricted. We had used Bootstrap 3 and thus were able to use that grid system to set up a number of rows with differing numbers of columns. While this met the needs initially we soon started to hit issues with this approach.

Limitations of SharePoint Page Layouts

While web parts can be added any number of times to web part zones, content managers don't have the ability to easily manage the web part zones themselves (unless they crack open SharePoint Designer, and that's not going to happen on my watch). So we found that we were continuously adding new rows of new or repeated column configurations so that designers and authors could achieve their visual requirements.

This unfortunately meant that, when in "edit mode", the page was full of empty web part zones with only relatively few of them actually being used.

Eventually we hit a limit in the number of web part zones (or it may have been web controls of any kind) allowed on a page. I forget the number but I think by that point we'd topped one hundred.

A short-term workaround for that was to move the web part zones into a "User Control" and then just include a reference to that User Control in the page layout. Not nice, but it worked, and theoretically shouldn't cause any performance issues.

What if?

From the outset of this project I had tried to think of a good way to solve this problem. Giving the content authors complete control of how the page and its components were laid out, with no waste, and only the exact structure they needed. How could this be done?

What if we could code up an interface that would enable content managers to add and edit rows of Web Part Z​ones. What if they could choose the number and layout of those web part zones for each row? What if they could specify the width of that row, so that it could fill the width of the window or just the content area? What if they could specify background colours, images, padding and margin for each row?

Could that be done? Spoiler warning... Yes!

DWPZ_Grid.png

Proof of Concept

In order to achieve all of the above (and potentially more) I went about proving some concepts, to determine if it would be possible.

I've been developing with ASP.Net and SharePoint for a long time now and am familiar with the page model in that anything that you can add to a page in ASP.Net markup at design-time, i.e. web controls, can generally also be added dynamically, using C#, at run-time. But would this be the case with Web Part Zones? After all, they need to be in place and on the page early enough in the page lifecycle for SharePoint to hook into and inject any web parts they contain. They also need to have unique, consistent identifiers so that SharePoint knows which zones the web parts belong to.

Proof of Concept 1 - Can Web Part Zones be added dynamically to a page

So the first challenge was determining if Web Part Zones can be added dynamically to a page. By dynamically I mean using C# code and adding an indefinite number of web part zones.

To establish this, I created an empty Page Layout, and then created a custom web control called DynamicWebPartZoneRenderer.cs. I added the control to the Page Layout and deployed to a local dev SharePoint site. Not exactly step-by-step instructions but this isn't a beginner's guide I'm afraid…

Within that control I then added some code that looped from 1 to 10 and added a new Web Part Zone with no properties configured.​

Here's the code:

 

​​ ...and here's the resulting error:

DWPZ1.png
 

OK, so it looks like Web Part Zones require an ID to be set. That was a simple fix:​

 

​Progress. The page rendered out 10 sequential Web Part Zones. First concept proved, you can add Web Part Zones dynamically to a page.

Proof of Concept 2 – Can Web Parts be added consistently to dynamically added Web Part Zones?

Next up I needed to get Web Parts added in to these dynamic zones At this stage if I tried to add a web part to one of these zones nothing really happened. I suspected the problem was because the zones did not have persistent IDs. The way I'd written the code they were being assigned new random GUIDs on each load.

So I modified that code slightly again: ​

 

This worked. It rendered 10 Web Part Zones and I could add web parts in to those zones, and they would persist through post backs and page saves.

Concept 2 proved!

Proof of Concept 3 – How we can add "Rows" of Web Part zones to the page?

So at this point I knew I could add Web Part Zones to a page, and that they can be used. There's still a long way to go but I hoped that was the major unknown dealt with.

Next up was how to go about adding rows of differing numbers of Web Part Zones. I envisaged and end-goal UI that allowed content managers to specify exactly the configuration they wanted, using a drag and drop approach, or fancy wizard. But achieving that seemed a long way off at this stage. Instead, I took the approach of setting up several user controls which each had a row configuration of Web Part Zones. For example,

  • 1 * Full width
  • 2 * Half width
  • 3 * One-third
  • 4 * One-quarter
  • Etc.

Each user control would be a Bootstrap "row" with the required number of Web Part Zones. The idea being that we (or a content editor) can then add the User Control on to the page which contains the required column configuration. This could eventually also allow for more complex Row configurations, perhaps with nested content.

So we now need to be able to dynamically add User Controls to the page, that contain Web Part Zones. Will this work?

I created a folder in my solution and dropped in a few sample User Controls with Web Part Zones inside. I then wrote some code in the WebPartZoneRenderer that would render each of those User Controls out on to the page. I realise all of this code is hard coded at this stage. The end goal is that the code will read from some page-level configuration data and render the Zones previously configured by a content manager.

The code looked something like this:

​And that worked. Kind of. At this stage I had only used each User Control once. If I tried to add the same User Control to the page twice, it blew up.  We'll solve that problem in the next post...

Still to come…

That's enough for one article. As we complete this series we'll be looking cover the following:

  • How to load multiple User Controls containing the same row configurations, but ensuring each Web Part Zone is instantiated with a persistent, unique ID
  • How to persist the page level configuration data
  • How to read and write to the configuration data as part of the page save and load lifecycle.
  • How to enable an interface for content managers to add, edit, delete and manage rows in a page.
  • Adding additional features to each row (think custom padding, margins, background colours, borders, fonts etc.
  • Going beyond simple Web Part Zone configurations… ​

I'll try to continue this series next week. Thanks for reading.


 


 


 About us

Fuse Collaboration Services is a Cloud Solution Provider and Microsoft Gold Partner specialising in delivering SharePoint, Skype for Business, and Azure cloud-based solutions. Based in Northampton, UK.

Microsoft Gold Partner Logo showing 5 competencies

Read more

 Latest Tweets

 Latest Blog

 

 

Have you forgotten about the WannaCry Cyber Attacks already?373<p style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">The NHS cyber attacks were less than two weeks ago yet it feels like it’s been far longer. So much has happened since and if updating your IT infrastructure was on your agenda but has now been put to one side due to other tasks taking priority read on…..</font></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Nobody in the IT world wants to say “I told you so” following &#160;the recent events but the NHS cyber attack should&#160;have made Managing Directors globally, &#160;sit up and listen to their IT advisors. Everyone knows that technology evolves at an alarming pace and our generation has seen the fastest change in this… at least until we land on Mars. </font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">This means instead of ignoring the IT gurus, we should be taking on board their advice and expertise, particularly around cybersecurity; trust us, it’ll save you money in the long run. Why are we not listening to the experts who thankfully know everything about ransomware, patch management, nibbles, craplets and&#160;DOS attacks? (High five if you know any of that!)</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Put it this way&#58; If a doctor told you that you had a hole in your heart requiring immediate surgery, otherwise it’s game over, you would agree to it being patched up immediately, right? The health of your business is just as critical. The body of your business is reliant on your IT infrastructure for keeping your business profitable whilst also allowing the lunchtime google sessions! Your out of date software, your lack of adequate back up and your ancient operating system are causing holes that are potentially lethal for your business. </font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Hackers are more advanced now than ever before , potentially sitting In your system undetected for, on average, over two hundred&#160;days. You need to be ready with the most up-to-date defences you can. The most frustrating part of what has recently happened is that there will be companies out there who will listen to the news, read it in the papers and yet still take the risk, genuinely believing that it will happen to them. If it hasn’t already been drilled in, take a look at a breakdown of last years’ statistics&#58;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><a href="http&#58;//www.hackmageddon.com/category/security/cyber-attacks-statistics/"><span style="text-decoration&#58;underline;"><font color="#0563c1" face="Calibri" size="3">http&#58;//www.hackmageddon.com/category/security/cyber-attacks-statistics/</font></span></a></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Still don’t think you’re at risk?</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;​</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font face="Calibri"><font size="3"><font color="#000000">If the cost implication of a hack doesn’t shock you in to action (and after reading these five case studies from top corporate losses I think it will - </font><a href="https&#58;//hotforsecurity.bitdefender.com/blog/top-5-corporate-losses-due-to-hacking-1820.html"><span style="text-decoration&#58;underline;"><font color="#0563c1">https&#58;//hotforsecurity.bitdefender.com/blog/top-5-corporate-losses-due-to-hacking-1820.html</font></span></a></font></font><font face="Calibri"><font color="#000000" size="3">), then what about the other crippling effects of a hacking that, ultimately, could have been prevented?</font></font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Your reputation would take a hit, especially if thousands of customer’s valuable data including their full names, logins, passwords, e-mails, home addresses, purchase history, and credit card numbers are stolen. It’s a company’s responsibility and legal requirement to keep this information safe. Your customers may jump ship to another competitor, meaning a further hit on your profitability. </font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">In 2016, two thirds of large UK businesses were hit by a cyber breach or attack. Could this number have been reduced? We know it can.</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Fuse Collaboration are experts in the following&#58;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><ul style="margin-top&#58;0in;"><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Cyber Security</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Patch management</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Back up</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Sharepoint</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Azure</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Office 365</span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">System Center </span></li><li style="margin&#58;0px 0px 0px 3px;color&#58;#000000;font-family&#58;&quot;calibri&quot;,sans-serif;font-size&#58;11pt;font-style&#58;normal;font-weight&#58;normal;"><span lang="EN-GB" style="margin&#58;0px;">Dynamics CRM</span></li></ul><p style="margin&#58;0px 0px 0px 51px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;"><font color="#000000" face="Calibri" size="3">Our services include a bespoke combination of business consulting, </font></span><span lang="EN-GB" style="margin&#58;0px;color&#58;#302e2f;font-family&#58;&quot;segoe ui&quot;,sans-serif;font-size&#58;10.5pt;">infrastructure design, SharePoint development and managed services and as a </span><span lang="EN-GB" style="margin&#58;0px;font-family&#58;&quot;segoe ui&quot;,sans-serif;font-size&#58;10.5pt;"><font color="#000000">certified </font><span style="margin&#58;0px;color&#58;#302e2f;">Microsoft Gold Partner you have that added reassurance that your business is in the right hands</span><font color="#000000">. </font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;font-family&#58;&quot;segoe ui&quot;,sans-serif;font-size&#58;10.5pt;"><font color="#000000">&#160;</font></span></p><p style="margin&#58;0px;"><span lang="EN-GB" style="margin&#58;0px;font-family&#58;&quot;segoe ui&quot;,sans-serif;font-size&#58;10.5pt;"><font color="#000000">Any upgrades to your infrastructure can be phased in over a time suitable to your users, business demands and your budget. Our team are experts in delivering what you want - call us on 01604 797979</font><span style="margin&#58;0px;"></span></span></p><p>​​</p>l.ozier@fusecollaboration.com | Louise Ozier | 693A30232E777C6675736563735C6C2E6F7A696572 i:0#.w|fusecs\l.ozier24/05/2017 23:00:002017-05-24T23:00:00Z25/05/2017 14:27:14http://www.fusecollaboration.com/ourblog/Pages/Forms/AllItems.aspxhtmlFalseaspx

 Contact us

Our address
12-14 Brookfield, Duncan Close
Moulton Park, Northampton
NN3 6WL
P: +44(0)1604 797979
Contact Us