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

 

 

How to use SaaS solutions to identify sensitive data1497<p class="lead">​​​​​​​​​​​This article is going to look specifically at how we implement the use of software (SaaS) to enable your organisation to become ready for the GDPR quickly and easily, without interruption to your end users.</p><p> <strong>The first step in getting ready for the GDPR is to know what data your organisation holds</strong>. At the time of writing this article, the new legislation is only <strong>268 </strong>days away and the four main questions you n​eed to be able to answer to ensure your organisation is ready are&#58;</p><ul><li>What data does your organisation hold?</li><li>Where is the data kept?</li><li>Why do you need to use or keep the data?</li><li>Do you have consent to use the data?​</li></ul><div class="thumbnail"> <img class="img-responsive" alt="A padlock on a background of binary data" src="/ourblog/PublishingImages/Pages/How-to-use-SaaS-solutions-to-identify-your-data,-ensuring-your-organisation-is-ready-for-the-GDPR/shutterstock%20Data%20protection%20GDPR%20blog.jpg" style="max-width&#58;500px;" />​</div>​ <h3>What is defined as sensitive data under the GDPR?</h3><p>In terms of the GDPR, sensitive data is defined as personal data, but goes further than the Data Protection Act and includes online identifiers such as an IP address. The GDPR applies to both automated personal data and manual filing systems. You can be held responsible for breaching the GDPR by allowing personal data to be compromised either by&#58;</p><p>Misuse - using data for purposes other than that defined and recorded&#160;consent given for;</p><p>or </p><p>for data breaches, even if the breach was a malicious act (hacking), if you can't prove you had adequate data security measures and processes.&#160;​</p><div class="row"><div class="col-md-6"><h4>Will my company have GDPR sensitive data?</h4><p>Data that can identify any individual, such as a name, National Insurance number, passport, IP address or even biometric data - a soon as this is recorded in any system, in a file, a database record, or even on paper - that data then falls under the remit of the GDPR. As every organisation has staff records, every company will be affected by GDPR to some extent. </p><p>However, the more individuals you deal with, and the longer you hold that data for, the more prone you are to breaches of the legislation. Companies that perform data processing, even on behalf of other companies, and particularly those that use personal data records for multiple purposes (for example re-marketing) are at most exposure to GDPR.</p></div> <div class="col-md-6"><h4>​Examples of who will be most affected&#58;&#160;</h4><ul><li>Retailers – High street shops and online retailers storing customer profiles</li><li>Health Sector -&#160; Hospitals, doctor’s surgeries, scientific research organisations, pharmaceutical companies, with patient records</li><li>Education sector - Schools, colleges and universities, storing current and past student records</li><li>Financial sector – Banks, mortgage and insurance providers, with customer accounts</li><li>Recruitment companies - candidate records</li><li>Charity organisations - records of donors and recipients</li><li>Estate Agents - vendor and client records </li><li>Legal profession – Solicitors, CPS and courts - client records.</li></ul> ​</div></div><hr />​ <h3>​How to identify data and ensure all your data is GDPR compliant?&#160;</h3><p>There is an easy and quick way to find out what data you hold and you will be relieved to know we work alongside companies that are currently releasing SaaS solutions that are designed purely to scan, discover and analyse your data, to ensure you only hold data that is GDPR compliant.&#160;&#160;<br></p><p>Our Partners have solutions that use metadata to scan and analyse data which has enabled the migration of data to SharePoint for some time. It’s this technology that’s enabled these new solutions to be <strong>created specifically for the use of identifying what data you have and if it is GDPR compliant</strong>. Using NPL (Natural programming language) such as “name”, “address” or “credit card number”) this process can be done in days not months and can easily identify documents in unstructured databases, file shares and SharePoint. </p><p>The discovery phase of the SaaS tool is an important part of the new solutions as they are designed around common datatypes that can be tagged easily e.g. names, addresses, age of document, author of document, credit card numbers, postcodes IP addresses. The solution we use comes with predetermined taxonomies which can be edited easily, to reflect the sector that your organisation works within. Dashboards are then accessed with detailed data analysis which identifies the data that will not be compliant with the GDPR. Additional columns appear alongside your files with a “true” or “false” label showing whether the files are compliant with the GDPR and our team of consultants are experienced in using this technology and can advise you depending on your specific IT infrastructure.</p><hr /><h3>Hype around the GDPR&#160;</h3><p>There is a lot of hype around the new GDPR coming out in May which appears to be fairly negative but instead of viewing it as a tiresome challenge that your organisation must overcome, I would advise viewing it as an excellent opportunity to gain a competitive edge within the market. Whatever your opinion is and I doubt there are many companies that relish the additional resources that will be needed to comply; from a customer’s perspective, it <strong>must </strong>be a good thing. The trust in any business relationship is one of the fundamental reasons why you have a successful company. In an age where we frequently see headlines describing yet another data breach, damage to a business’s brand and reputation is an expensive result of avoiding being compliant with the new regulations.</p><hr /><h3>What to do right now!&#160;</h3><p>The key decision makers in your organisation need to be made aware of the GDPR. They need to know that the first thing they need to do is to find out what data their organisation holds. This is where we come in.</p><p>Although GDPR isn’t an IT issue as it will ultimately fall to the responsibility of who is currently responsible for your Data Protection E.g. Compliance Managers, Data Protection Officers, Data Controllers and Office Managers, the team at Fuse will be able to provide a technical solution to determining what data is held.</p><p>Before any amendments to existing internal procedures, policies or customer facing documentation such as websites and application forms can be changed they must know what is relevant to the GDPR. It may be the case that a lot of the data you hold is ROT and this can simply be deleted. If you have a completely unstructured filing system and want to take the opportunity to improve the efficiency of your business we don't just offer technical expertise, we are experienced in developing proofs of concept, functional and technical specifications. We can either then take responsibility for delivering the project or work alongside your IT departments providing a technical lead.</p><p>It doesn’t matter whether you have an inhouse IT department or not as we can work alongside existing IT managers, Compliance or HR managers. An IT consultancy needs to be your first port of call as they can advise you as to which is the best SaaS solution for your business depending on the size of your business and your budget. Having expert knowledge of your IT infrastructure and how it works is important to ensure that the right solutions are used. The benefits of using SaaS is that your end users are not interrupted and your IT departments are not impacted either. </p><p>You need to weigh up the cost of using an IT consultancy who can implement the right tools against the extra resources it will take to trawl through and analyse your data manually. This can seem daunting, but it’s a great opportunity to get your data in order and have confidence that your organisation can be proud of its commitment to protecting the data of its employees, customers and suppliers.​</p><div class="well well-lg"><p class="lead">If you want further advice or a quote on how we can help you get ready for the GDPR 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></p></div>​l.ozier@fusecollaboration.com | Louise Ozier | 693A30232E777C6675736563735C6C2E6F7A696572 i:0#.w|fusecs\l.ozier28/08/2017 23:00:002017-08-28T23:00:00Z Ensuring your organisation is ready for the GDPR19/09/2017 23:16:251671htmlFalseaspx

 Contact us

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