 |
| A lightbox-enabled site, before and after a link is clicked |
Lightboxes are commonly used on image sites to produce popup image galleries and used more generally to produce login prompts and dialog boxes. They enhance user experience by keeping focus on the original content and they emphasise the link between the source page and the new content.
I've used JavaScript actions in my SSRS reports to show drill-through content in a new window for a long time (as described here: http://www.sqlchick.com/entries/2010/8/22/opening-a-link-in-ssrs-within-a-new-window.html), but it occurred to me that using a lightbox would make for a more elegant solution.
A technique called Javascript Injection can be used to insert a reference to an external javascript file into an SSRS report. I first read about this technique here: https://blogs.infosupport.com/reporting-services-javascript-injection/. In this case, I've used this technique to load a copy of JQuery, along with a lightbox plugin called Fancybox (http://fancybox.net), into the report page. Once these files are loaded, a second code segment feeds in the URL I want to display and activates the lightbox.
 |
| A demonstration of the lightbox in an SSRS report with closing transition |
Try it Yourself
I've included a link below to a zip file containing all the files required to reproduce this lightbox effect. I've also included a set of instructions detailing how to use them in your own project.Zip file link: https://drive.google.com/file/d/0B0hUyvkAteJkQTJheVZtcTFSNk0
Instructions:
- Unzip the file onto your web server. In this example I'm using a folder called /scripts, sitting at the root level. If you've used a different folder, you'll need to change the JAVASCRIPTPATH and CSSPATH values at the top of the loadpopup.js file.
- Open your RDL file in your editor of choice (I'm using VS2012), add a Go to URL action to a textbox and click the expression button.
- Paste in the following code:
="javascript:scriptelem=document.createElement('script'); scriptelem.id='loadjs'; scriptelem.src='[[path to loadpopup.js]]';"
& " document.getElementsByTagName('head')[0].appendChild(scriptelem); var carryon = function(){pagePopup(document.activeElement, '"
& [[target url]]
& "');}; scriptelem.onreadystatechange = function() {var r = scriptelem.readyState; if (r === 'loaded' || r === 'complete') "
& "{carryon(); scriptelem.onreadystatechange = null;}}; void(scriptelem.onload = carryon);"
- Replace [[path to loadpopup.js]] with the path to your loadpopup.js file (in my case, /scripts/js/loadpopup.js) and replace [[target url]] with the page you would like to display in the popup. This URL can include field values.
NB. The target URL must point to a page on the same server as your RDL. Modern web browsers (at least the ones I've tested) don't allow scripts to use cross-site references.
- Deploy the report to the server (The lightbox links will not work in preview mode.)
- Test it out! If the textbox with the action does not link anywhere, check the expression in the URL action for syntax errors. If it does contain a link but the lightbox still isn't showing, bring up the browser's debugger (by pressing F12, usually) and check the output window for clues as to what the problem might be.
I've tested this technique in IE8 to 11 and Chrome v26 onwards. I'd be interested to hear how you get on implementing this on your own instance. Happy to take any questions below.
