Skip Ribbon Commands
Skip to main content

Dynamic Page Layouts in SharePoint 2013 - Part 4

Rendering the Dynamic Page

James Strugnell

02/11/2016

​This is the 4th (and likely final) part of our series on how we built a dynamic page template in SharePoint 2013, enabl​ing content managers to configure a custom grid layout within the page. You can find the previous articles in the series here:

In this article we're going to cover the code which consumes the current page level configuration and renders out the user-configured rows, including the web part zones, which comprise the page.​

​​Custom Page Layout and Web Control

Firstly, we created a custom Page Layout called "Dynamic Page Template". We then added to that page a custom ASP.Net web control, DynamicWebPartZoneRenderer.cs. The entire page template can be viewed ​here:

https://github.com/jstrugnell/SharePointDynamicPageLayouts/blob/master/DynamicPageLayouts/Common/Branding/PageLayouts/dynamic.aspx

The custom web control can be viewed here:

https://github.com/jstrugnell/SharePointDynamicPageLayouts/blob/master/DynamicPageLayouts/Common/WebControls/DynamicWebPartZoneRenderer.cs

Loading the Current Page Configuration

As established in the previous articles, the page configuration data is stored as a JSON string in a SharePoint field for the current page. For a quick recap, the first action performed by the DynamicWebPartZoneRenderer control is to pull the configuration JSON data out of the page field, and de-serialize into a C# object, of type "PageWebPartZoneConfiguration". This class is essentially a collection of "Row Configurations" each of which represents s single row as configured by the page editor. Each Row has the following available settings (we actually implemented more in the real solution):

  • Id – This is a unique ID (GUID)
  • Order – This number enforces the sequence in which the rows are added to the page
  • BackgroundColour – This is used as the background colour of the entire row
  • MarginTop – This is the gap that should be injected above the current row
  • MarginBottom – This is the gap that should be injected below the current row
  • PaddingTop – This is the gap that should be injected between the content and the top of the row
  • PaddingBottom – This is the gap that should be injected between the content and the bottom of the row
  • Layout – Perhaps the most important setting, this field represents the layout for the row. We have defined a number of pre-defined layouts that content editors can choose from. Each layout is implemented as a "User Control", made up of one or more Web Part Zones, and is loaded dynamically on to the page.

So once we have the configuration data de-serialized, we can then loop over each row and dynamically render the User Control associated with the "Layout" property. Some of the configuration for each Layout is hard coded in the HTML, for example the number of columns that exist. Other aspects, such as the margin, padding and background colour, need to be set at run-time. This is done in the Base Control from which each Layout User Control inherits - BaseWebPartZoneLayout.

BaseWebPartZoneLayout

Each Row Layout User Control inherits from a single base user control called "BaseWebPartZoneLayout". Each User Control is implemented consistently with known conventions. This allows the Base Control to manipulate the layout elements according to the configuration set for the current Row. For example, every Row User Control has an ASP.Net Panel with an ID of pnlRow. We then reference that Panel from the Base Control and configure its background colour, margin and padding according to the applied configuration.

We also implement the "Edit" button from this Base Control. We detect if the page is currently in Edit mode and then render out a link for each Row which enables the logged-in user to open up and manage the settings for each row.

Configuring the Web Part Zones

If you recall from the first article in this series (all those months ago...), the first hurdle we had to overcome was whether we could dynamically add Web Part Zones to a page. We now know that this is indeed possible but we never fully explained quite how. The big issue was that every Web Part Zone needs to have a unique ID. It also needs to maintain that ID through page postbacks and reloads. Each Web Part Zone also needed to maintain the same ID even if its parent Row was repositioned within the page. So how did we ensure all of this?

Each Web Part Zone is statically added in to its parent User Control. They are purposely not assigned an ID at this stage as they need to be unique to the whole page. So how do we assign these IDs uniquely and consistently?

After the Layout Control has been loaded and initialised (e.g. Colour, Padding, Margins assigned) we then pass an instance of the User Control (via a handle on the Base Control) into a method called "ConfigureChildWebPartZones". This method also receives the "ID" (GUID) for the current Row.

We then loop over each "Control" inside the User Control recursively hunting for any Web Part Zones. When we find one, we then set its ID to a concatenated string comprising of the literal string "dynamicZone_" plus the row ID, plus the index of the Web Part Zone (i.e. if it's the first Web Part Zone we hit, this will be number 1).

Once this process has finished every Web Part Zone is assigned a unique ID, and one that persists even when the Row is moved around the page. If the Content Author changes the designated Layout configuration then any Web Parts within will potentially move. This is not a big problem however, and can be resolved by the editing user.

Please review the code on Github for a complete picture of the process outlined above.

Conclusion

That brings us to the end of this series. Hopefully it has served to present a number of useful techniques that have been brought together to build a much-used feature on our custom web platform. The customisable row settings detailed in this series are really just a starting point. Any number of other possible settings could be applied further enhancing the options and opportunities to page editors.

We have placed a cut down working version of this solution on Github which can be found here: https://github.com/jstrugnell/SharePointDynamicPageLayouts

If you have any questions or suggestions for other enhancements or improvements please get in touch.

Thanks.​





 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