C/D/H Talks Tech

Author:

Doug Brower

I have been in the IT industry for 20+ years and have been a consultant with C/D/H for over 16 years.

I am most excited about using technology that goes beyond best case installation to develop solutions and solve problems for clients. My most exciting projects are developing identity management and single sign on solutions and working with various Microsoft SharePoint technologies.

When I’m not working, I spend a lot of time with my wife and four kids. We enjoy sports and activities, camping and the outdoors. I spend whatever time is left running or reading a good book.

I like to say with my busy career and family, that I’m smack-dab in the middle of my life.

More about Doug
Articles by Doug Brower

I’m involved in a SharePoint Business Reporting project, using SharePoint 2010 and SQL Server Reporting Services 2008 R2.  A number of the reports call for clickable sub-reports, which display information in a different dimension for the user.  There are helpful posts on how to pop up a new browser window for this purpose, but I wanted to add a little nicer interface with LyteBox.

This blog posting is actually version two.  After the first post, I realized that Lytebox breaks SharePoint 2010’s page editing dialog, when adding web parts to the page.  So, this is actually a post with three useful pieces of information: 

1. All versions of Lytebox, Litebox, Lightbox I could get my hands on affect SharePoint in the same way: They break the ability to add web parts to pages, resulting in JavaScript errors.
2. I’ll detail the working solution for SharePoint 2010 to popup dialog boxes similar to Lytebox, using SharePoint’s built-in client-side dialog framework.
3. I’ll leave the Lytebox methods I initially documented here, as they SHOULD work for SharePoint 2007, though I haven’t tested that.

SharePoint 2010 Solution

The following screen shots illustrate the final effect. (They’ve been cleaned of some details)

Here is a report with detail, by date for several production locations:

Clicking on a detail row will display a SharePoint Dialog Framework interface with detail for that production location over the range of days selected:

Configuration for this was actually very simple.  I followed the article here, by vesku for background on popping up a dialog.  His example is quite extensive to use JavaScript within an assembly.  I just grabbed and modified the script and placed it in a CEWP.

As I mention in the SharePoint 2007 solution below, calling the dialog from a JavaScript function in the page is required anyway, due to SSRS’s handling of HREF tags.

Following is the recipe in detail:

1. Create a text file in the site assets library, (/productionreporting/SiteAssets/InitializeSubReports.txt).

This script will call the built-in dialog and will populate it with our passed-in URL to the dimensions we also pass in.

  2.  Create a CEWP on each page necessary, referencing this text file.

  3.  Create a link from a report object. An example link follows:

Notice that the call is using the ‘rv’ syntax for SharePoint integrated SSRS.  The ‘rc’ commands could also be used if SSRS is not integrated.  Also notice that the image objects are contained within the detail tablix group, allowing field values to be passed to the sub-report as parameters.

SharePoint 2007 Solution

As I mentioned, this method should work for SharePoint 2007, but has not been tested.

Notice that the Lytebox solution is very similar to the SharePoint dialog.  Or, I should say, notice that the SharePoint dialog framework looks a lot like Lytebox.

To configure this, I started with Pam Davis’s Blog on installing Lytebox for use with SharePoint.  You basically download Lytebox to a document library, and use Content Editor Web Parts to publish the JavaScript to the calling page.  Jump to Pam’s page for more information.

I ran through some tests with Lytebox and found that there is a compatibility issue with IE8 that needs to be addressed.  I found a solution by Terry Nederveld that entails downloading updated Lytebox source code, which resolved issues on most instances of IE8.  I also had to hard code CSS classes, per this work-around.

Once Lytebox could be called from a SharePoint page and worked with IE8, I attempted to add links from the SSRS report.  What I found was the HREF tag was never handled properly from the SSRS report.   I found a solution for this obstacle by adding code to the calling page, the final piece to the puzzle.  This code wraps the Lytebox call in a JavaScript function, allowing SSRS to call the function to work around the HREF limitations in SSRS.

Following are example code snippets for this solution:

1. Lytebox is installed to the Site Assets library

 2.  There is an InitializeLytebox.txt file also in that library, containing the following:

  3.  There is a hidden CEWP on each reporting page (for now), containing a reference to InitializeLytebox.txt.

  4.  An example link from a report follows:

The Expression syntax follows:

 So, there you have it.  SSRS sub-reports in Lytebox or SharePoint dialog framework boxes.  Hope this helps.