Skip Ribbon Commands
Skip to main content

Dynamic Page Layouts in SharePoint 2013 - Part 3

Enabling Content Editors to Manage the Grid Layout with a Bootstrap Modal Form

James Strugnell

22/09/2016

​​​​​​This is the 3rd article in our series covering a solution we delivered for a client, enabling Dynamic Bootstrap grid layouts in SharePoint 2013 page layouts. You can find the previous articles in the series here:

  1. ​​Introduction
  2. How we persist the page configuration

In this article we're going to outline how we enabled the custom dialog form that appears within the editable page and enables you to modify existing or add new rows. Here's a screenshot to help picture what it is we'll be building.​


What are we talking about?

When a page is rendered in "edit mode" we add an "Edit" button to each row. Clicking the button will open a Modal Dialog window containing a form that represents the values for that Row. We also add another button at the bottom of the page that opens an empty form allowing the user to create a new Row.

When a user has completed making changes to the available fields they can click Save. This then serializes the form values to a JSON object, updates the Page level JSON object that represents all of the Rows on that page, then stores that JSON object as a string in the SharePoint Field and then Saves and reloads the page. When the page loads it re-loads the Page Level JSON object (which now includes the changes made) and renders each Row accordingly.​

How this w​orks

There's a fair bit going on here. First of all, we need to cover some background details…

Each Row is built using a User Control that follows a known structure. This structure consists of a number of ASP.Net Panel Controls that follow a specific naming convention. The User Control also inherits from a Base Control (called BaseWebPartZoneLayout) which then manipulates these Panels accordingly. Each row User Control contains

  1. One parent Panel control with an ID of "pnlEditorPanel". This Panel is where we add the Edit button for opening the Form. For those unaware a Panel renders as a standard Div.
  2. Inside that Panel is another Panel called "pnlRow". This Panel contains the actual Grid HTML structure. It is also this Panel to which we add style attributes to create the padding, margin and background colour effects.

Here is a screenshot of the code in the "4 Column" row:

​You can see the two panels I've described and then a standard 4 column Bootstrap row. In this scenario we've configured the Row to display 4 columns on medium screen sizes and above, 2 columns (i.e. 2 rows of 2 columns) on "extra small" screens, and just one column on anything smaller than that. In each Grid column we have added a Web Part Zone that has no hard coded ID value. We will cover this in a later post but these IDs must be unique on a page so these need to be set at run time, in case the same Row is added to a page more than once.

As mentioned earlier these User Controls inherit from a base control that then processes the required configuration for that Row (as specified by a Content Manager). The Configuration for the Row is passed in when the Control is instantiated and stored in a variable called "Config". The Config property is of type "WebPartZoneRowConfiguration" which takes the following form:

​The first part of the code in the Base Control checks to see if we are in "Edit Mode" and, if we are, adds in the Button to open the Configuration Editor form. See below:​

​ ​

In that code we create the required HTML structure for the button to appear. Within the button we set a Data attribute to include the current "Row ID". The Row ID comes from the Config object for the current Row. The Button also includes a Data attribute for "Target" which is set to "rowLayoutConfigModal". This is the ID of the HTML Div that represents the Dialog that needs to be displayed. So when a user clicks the Button, the Modal is opened and receives the ID for the current Row.

Initialising the Form

As mentioned above, when the form first loads, it receives the ID for the selected Row. This enables us to populate the form fields with the current Row's configuration. The first thing we need to do is get a hold of the Page Level JSON configuration. If you've been following along you'll know this represents the complete configuration object for all of the Rows on the current page. Here's the JavaScript code:​

​In the above code we simply parse the value in the hidden SharePoint field. If nothing is found in that field this is likely a new (empty) page, thus we just initialise an empty configuration object.

Next we attach some code to the "Show" event for the Modal Dialog.  In the following code we establish which Button was clicked, and then get the Row ID from that button. We then use the Row ID to pull out the Row configuration from the Page Level JSON object (dynamicPageWPZoneConfig). If that value is null, we must be creating a new Row. If we have a Config object we set each of the fields with the corresponding values:

​Saving the Changes

The Form includes buttons to "Save" the current config, "Delete" the current Row and "Cancel" (Close) the Form. The Cancel button doesn't really need an explanation but here's what we do on Save.

First of all, we use a bit of jQuery to attach to the click event on the Save button. We then use the jQuery "closest" function to grab the form structure as a complete DOM element. We then create a new JSON object (in the required format) and set the values for each of the fields from the form. ​

​Next we have code to handle if the Row is new and hence generate a new ID for that row. Otherwise the existing Row in the Page Level structure needs updating and we also handle the scenario where the User has changed the Order Sequence of the current Row.​ Eventually, we persist the Page Level JSON object, now including the User’s changes, back to the SharePoint field. The last step is to Save the current page so that the user's changes are persisted. For this we have a custom function which leverages built-in SharePoint code for saving (but continue editing) a page:

​Deleting a row

The code exists for deleting a row but this article is already long enough. You can view the code in the Github Repo to see how this part works.

Summary

So that is how we enabled our content managers to configure each Row. Sometimes it's just easier to read the code so please take a look at the Github repo. We're always keen to hear other people's thoughts and suggestions so please give us your feedback.

In the next post we'll wrap up the series and explain how we actually consume the JSON object on the server and render out the Rows on to the page.

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