Thursday, 15 May 2008

Opening a new window with javascript from reporting services

Bit of a darn handy one this. Im currently writing an application that is heavliy database driven (arent they all) however most users will enter very little data but view alot.

I knew Reporting Services was the tool to use to layout lots of data quickly but I couldnt figure out how I could use this until now. I did experiment with using the ReportViewer control, but I found this a bit fiddly and it didnt look great. I have also been using GridViews, which while useful are not as flexible as a good old RS report.

So my users use reporting services to jump between reports, and at the critical times open new reports in new windows, in relation to their current screen size.

Read more after the break



To do this simply make your navigate URL on a report item:
="javascript:void(window.open('http://mywebserver/aspxpage.aspx?foo=ABBO01','MyApp','WIDTH=400,HEIGHT=200,Top='+((screen.AvailHeight/2)-200)+',Left='+((screen.AvailWidth/2)-400)+',LOCATION=no,MENUBAR=no,STATUS=no,TOOLBAR=no,SCROLLBARS=no,RESIZABLE=YES'))"
This will evaluate client side and tell the browser to open a new window containing the report, or aspx page, or whatever you want really!

OK so thats a bit nasty looking, lets break it down.

The simple syntax is:
="javascript:void( the javascript you want to run without spaces!)"
="javascript:void(window.open('http://www.google.com')"
Just keep building up that window.open command, and remember no spaces! as these become %20 and bust the report.

Using the users screen size!


This is the cunning part where I insert javascript code into the URL which evaluates client side, not server side. Therefore we can get the users screen.AvailWidth, or screen.AvailHeight. This allows the new window to pop up in the right place on the users screen regardless of their resolution, e.g. right side of a widescreen monitor, or centre of the screen etc etc.

="javascript:void(window.open('http://www.google.com','MyApp','Height='+screen.AvailHeight+'')"
This third argument will resolve to this client side

="javascript:void(window.open('http://www.google.com','MyApp','Height=768')"

Taking it further


To make my life easier I wrote a custom assebly (dll) with a few function such as GetJavascriptCentre(int width, int height) I can then call these from reporting services to give me back the final window.open argument for a centred popup window.

public static string GetJavaScriptForAlignRight(int width)
{
return "'WIDTH=" + width.ToString() + ",HEIGHT='+(screen.AvailHeight-30)+',Top=0,Left='+(screen.AvailWidth-10-" + width.ToString() + ")+',LOCATION=no,MENUBAR=no,STATUS=no,TOOLBAR=no,SCROLLBARS=no,RESIZABLE=YES'";}


I'm pretty darn happy with this one.

How to use it? rather than click through in Reporting services you now have the option to open a new window in the centre of the users screen to show more detail, or a map/chart etc etc.

window.event.clientX - couldnt get this to work, would have been nice to grab the current mouse location when the user clicked, but oh well

No comments: