Skip Ribbon Commands
Skip to main content

Dynamic Page Layouts in SharePoint 2013 - Part 2

Persisting Page Configuration

James Strugnell

05/09/2016

​This is another article in our series explaining how we built a Dynamic Page Layout system in SharePoint 2013. For an introduction please read here​. In this post I'm going to cover how we persist the page level configuration for our Dynamic Page Template. i.e. how each row in our Dynamic Page is configured, and ordered. 

To recap, each row is configurable to use a specific template (i.e. Full Width, 2 columns, 3 columns etc.). In addition to the template used, we also need to store where on the page the row should go (a positional index), if it should have a background colour, top/bottom margin and top/bottom padding and any other required Row-level configuration options. So we needed a place and method to store this configuration as part of every dynamic page. 

Our plan was to use a JSON object for the data and then store it somewhere within each page, as part of that page. We could then enable an editor interface, within the page, that would allow content editors to add, edit and delete rows as needed. Thus when they save the page, they will save the configuration data along with it. We would then be able to read this configuration out on page load, loop over it, and render the required Templates (which are essentially User Controls) and then run some code over each row template to initialise the child Web Part Zones with unique IDs (a problem covered in a later post).

That was the concept, how could we do it.

Where and How to Store the JSON Configuration

Firstly, how could we store the JSON object within the page. My first thought was that we could leverage the Property Bag for the page. If you aren't aware of the Property Bag it is a SharePoint concept where almost every type of object (container) in SharePoint (Farm, Web App, Site collection, Site, List, Item etc.) has an associated "Property Bag" which is a Key/Value pair storage area. It is normally ideal for configuration data, however I had a better idea for this scenario.

Given that we are working with Publishing Pages, we have access to "Fields" within each page. For the project we were working on we had access to a "Base Page" Content Type from which every Publishing Page type inherited. So I added a new field called DynamicPageConfiguration to the Base Page Content Type. This was a multiline text field of type "Note", configured to use 20 rows. As the field was always likely to exceed 255 characters we also had to set the property "UnlimitedLengthInDocumentLibrary" to "TRUE".

So we now had a field available to us on every page in which we could store text (JSON) data. I added this field to the Dynamic Page Template and it showed up on the page as an editable textbox field. You can see in the following code how we wrapp it in an EditModePanel so that it only rendered in the page while in "Edit" mode (funny that). We also set it to be hidden using CSS so that it wasn't actually visible on the page. We didn't want Content Managers to edit the field directly, we would build an interface that then read and wrote to this field in the background.

The beauty of this approach was that SharePoint would save the data in this field for us, without us having to anything. It was just a field on the page. You might notice that the field has an additional CSS Class of "js-DynamicPageConfiguration". This is the selector used from JavaScript when a user edits the page configuration through a popup form. I will go into more detail on that process in my next post.

To help understand the configuration data being stored on each page, here is an example of the JSON stored in this field, as viewed using the ever useful online JSON Viewer tool:

Dynamic Page Config JSON.png

Hopefully the concepts are coming together for you now, and perhaps even making sense (?). Later in this series you will see how we added a control on the Dynamic Page template that iterates over the JSON configuration data above and loads the associated User Controls to render the required columns. Content Managers then interact with this page in edit mode, adding and editing rows of Web Part Zones, and then adding Web Parts into those zones. Here's a sneak preview of how that looks. In the screen grab below I've just clicked to edit an existing Row (using the Cog icon in the top-right of each row). You can also see the option to "Add new dynamic row" along the bottom, which initiates the same form.

Dynamic Page Row Form.png

We'll cover how the above form works in the next post. Until then, 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