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

 

 

New GDPR Analysis Pricing699<p class="lead">​​​Fuse can ease the challenge you are facing with the GDPR by offering a solution that will analyse your data for you quickly and cost effectively.</p><div></div><p>​My <a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=2b6bb279-9fd6-44bf-b4e7-23100b1f156a">recent blogs​</a> have already mentioned the effect that GDPR is having on UK businesses. The deadline is looming but <strong>don’t panic</strong> if you feel you are running out of time as we have <strong>important news</strong>. </p><p>Our customers are reporting that they are having many calls in response to the GDPR, offering you solutions to help but what you really need is a quick, fixed price solution that you know will do what it claims to. One of our partners has responded to customer and partner feedback by changing their pricing model for their data evaluation kit to be just that. </p><p>This is in response to listening to customers who have allocated budgets for the GDPR project, and it’s amazing to see that most budgets are being spent on the staff time spent on the project and not on solutions that would be more cost effective. Discovering PII (Personal Identifiable Information) is viewed as a <strong>manual process </strong>which costs organisations time and money. </p><p>Discovering personal Identifiable Information and Sensitive Information within documents is one of the first steps you need to complete to become compliant. </p><p>All you need is the answer to one question&#58;</p><p> <strong>Do you know the amount of data your business holds as electronic documents?</strong> Hopefully you do! If not, don’t worry we can help you find out with a <strong>free evaluation </strong>of your data.</p><div>If so, look at the table below for the cost of the solution we can introduce you to. The price includes an annual subscription with unlimited document scans for the 12-month license term, regardless of the size of documents.</div><div></div><ul><li>Up to 1TB = £2,999</li><li>Up to 5TB = £7,999</li><li>Up to 20TB = £14,999</li><li>20TB plus = price on application </li></ul><div>The pricing is based on the size of data in the system where the documents are stored. This pricing includes unlimited users and full product support. This solution can be used across multiple systems which include <strong> <em>Office 365</em></strong>, <strong> <em>Dropbox</em></strong>, <strong> <em>OneDrive</em></strong>, <strong> <em>Google Drive</em></strong> and <strong> <em>SharePoint</em></strong>. The solution then reads Office documents, PDF’s, OCR photocopies etc. It will also reduce the size of your files, removing duplicates and archiving&#160;<span style="text-align&#58;left;color&#58;#302e2f;text-transform&#58;none;text-indent&#58;0px;letter-spacing&#58;normal;font-family&#58;&quot;segoe ui&quot;,tahoma,helvetica,arial,verdana,sans-serif;font-size&#58;14px;font-style&#58;normal;font-variant&#58;normal;font-weight&#58;400;text-decoration&#58;none;word-spacing&#58;0px;display&#58;inline;white-space&#58;normal;orphans&#58;2;float&#58;none;background-color&#58;transparent;">files</span> non-accessed over a period. This solution is also valuable when <strong>migrating </strong>documents from SharePoint and file shares to O365.</div><div>&#160;</div><div class="thumbnail"> <img class="img-responsive" alt="ScanR Process" src="/ourblog/Blog%20Site%20Images/ScanRProcess.png" />&#160;</div><div></div><div class="well well-lg"><h2>Features of the ScanR Solution&#58;</h2><ul class="lead"><li>​Automate the process for discovering PII and Sensitive Information.</li><li>Enable you to quickly respond to “Subject Access Requests “and the “Right to be Forgotten “regulation.</li><li>Comply with over 10 of the required articles within GDPR.</li><li>Reduce data storage requirements, remove duplicates and archive non-accessed files. </li><li>Gain an understanding of who has access to it.</li><li>Gain an understanding of how long it’s being retained.</li><li>Retain personal data for a period of time directly related to the original intended purpose.</li><li>Find risky files and take action.</li><li>Manage a Subject Access Request&#58;</li><ul><li>Request a port of the data</li><li>Request a correction to the data</li><li>Request deletion of the data​</li></ul></ul></div><p></p><div class="thumbnail"> <img class="img-responsive" alt="ScanR overview" src="/ourblog/Blog%20Site%20Images/dashboard-scanr1.png" /> <div class="caption"><h3>The Overview Dashboard</h3><p>Rich dashboards in ScanR allow you to understand where your sensitive data resides, and prioritise where to take action.​</p></div></div><p>To read my previous blogs surrounding GDPR please click on the links below&#58; </p><p><a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=2b6bb279-9fd6-44bf-b4e7-23100b1f156a"><img class="ms-asset-icon ms-rtePosition-4" src="/_layouts/images/icgen.gif" alt="" />How to use SaaS solutions to identify sensitive data</a></p><p>​<a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=38ff9d3b-d9e1-4a22-b57e-04260d2d12b3"><img class="ms-asset-icon ms-rtePosition-4" src="/_layouts/images/icgen.gif" alt="" />Clear out the ROT!​</a></p><div class="well well-lg"> <p class="lead">To <strong>request a demo and free evaluation</strong> on your documents call Fuse today on 01604 797979 or <a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=218eb0be-10f6-490a-82a7-a7fd47c8de90">contact us</a>. We are available to answer any queries you have and our aim is to work alongside your needs and priorities ensuring optimum efficiency of your IT infrastructure.</p></div>l.ozier@fusecollaboration.com | Louise Ozier | 693A30232E777C6675736563735C6C2E6F7A696572 i:0#.w|fusecs\l.ozier22/11/2017 00:00:002017-11-22T00:00:00ZDiscover Personal Identifiable Information & Sensitive information within Documents24/11/2017 00:16:0696htmlFalseaspx

 Contact us

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