Skip to content

Modal windows in SharePoint

Last updated on January 12, 2014

I had a chance to work with jQuery in SharePoint 2010 recently which was fun and easy.

The task was to show a select set of users a modal window with text that comes from the legal department. Already having a settings list with key value pairs stored as list columns in SharePoint. It was just a matter of selecting the legal statement from this list and displaying it in a pop up.

Flow of events

Get Current User
Check to see if the user is a member of the special people SharePoint security group.
Check to see if the user had already logged a click event for that day.
If no, then proceed to query the list for the disclaimer text.
Fire off a jQuery append to the hidden div on the page.
Fire off a call to the SP.UI.ModalDialog with handlers for the yes/no actions. (Figure 1).
On yes, write a record to a List that records the user click for tracking purposes.
Dismiss the modal and write out a thank you to the user via the SP.UI.Notify.addNotification method. (Figure 2).
On no, kindly remind the user the site won’t be available until they agree. (Figure 3).

Using a Visual Studio empty SharePoint project and adding a Script module to it; I was able to package up the custom JavaScript functions, the CSS required for the Moda UI and the required jQuery libraries. I used this in order to make deployment across the environments consistent and easier for our administrator. All that remained was using SPD, yeah I know, to add the hidden modal div to the master page and use the script manager to add in the script references as well as the css link.

The whole thing took under 4 hours to roll. It’s definitely stuff that spikes my interest in SharePoint 2013 and it’s heavier reliance on JavaScript for user interface actions. Looking forward to the next project where I get to work with jQuery again. That balance between server and client side processing seems rife with great opportunities to make the user experince surrounding SharePoint better.

Figure 1.

Figure 2.

Figure 3.

Published insharepoint

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.