Invoke Project Status reporting, direct from the ribbon
By blurg64
Over the past few weeks I have been working on a number of projects that required the Project Server ribbon to be customised in one way or another. During one of these, I started to wonder how simple it would be to integrate a Reporting Services report into the ribbon, specifically a Project Status Report.
It turns out the answer is very simple, so read on 
Before I get into the nuts and bolts, I should say that for this post I am not going to reinvent the wheel, instead I am going to leverage the Project Status report that ships as part of the Project Server 2010 Demonstration and Evaluation pack.
As you can see, the report is pretty full featured, leveraging all the advanced visualisation features that Reporting Services can provide.
Before we hook the report up to the button, there are two problems that need to be solved:
How to determine which project to run the report for?
The Project Status report requires a ProjectUID in order to determine which project information to display in the report. Luckily Project Server uses ProjectUID as a parameter to tell the various PDP pages which project data should be displayed and passes it through as a query string.
If we access this query string value using some Javascript, we will know the project context to pass to the report.
How to pass the parameter to the report?
In my environment, Reporting Services has been configured to use SharePoint Integrated Mode, which makes it really easy to use a special query string to run the report.
****In my case, the following query will run the report.
There are a couple of things to take note of, the rv:ParamMode=Collapsed makes sure that the parameter area is collapsed in the report, which can take up a large amount of space otherwise. The rp:ProjectUID=’1c7ca65a-3505-4570-9b65-24633063e9ae’ passes the ProjectUID parameter and GUID into the report. There are a few other configuration parameters that can be passed through, outlined in this excellent blog post.
Now that both problems are solved, all that is needed is to crack open Visual Studio 2010 and wire up a SharePoint feature that will create a custom ‘Status Report’ button on the ribbon and then when clicked read the ProjectUID from the query string and use that to kick off the status report.
Customising the Project ribbon
Customising a ribbon in Project Server is pretty simple. Just before Christmas, Jim Corbin posted an excellent article covering the nuts and bolts of this much better than I could and in the last few weeks Andrew Connell has published an article on MSDN covering the ribbon in extreme detail. For this project, we need to customise the ribbon to do a couple of things:
-
Create a new group on the PDP ribbon tab called ‘Reporting’
-
Add a new button to the group called ‘Status Report’
-
Define a custom image to be displayed on the Status Report button
-
Wire the button up to run some JavaScript that will pull in the query string and run the report. The XML below achieves all of this:
[sourcecode lang=”xml” wraplines=”true”]
<CustomAction Id="Ribbon.Library.Actions.Scripts”
Location="ScriptLink”
ScriptSrc="ProjectRibbonStatusReport/ProjectStatusReport.js” />
<CustomAction Id="Ribbon.Tabs.PDP.Home.Reporting”
Location="CommandUI.Ribbon">
<Group Id="Ribbon.Tabs.PDP.Home.Reporting”
Sequence="60”
Description="Reporting Custom Group”
Title="Reporting”
Command="EnableCustomGroup”
Template="Ribbon.Templates.Flexible2">
<Button Id="Ribbon.Tabs.PDP.Home.Reporting.RunStatusReport”
Sequence="40”
Command="RunStatusReport”
LabelText="Status Report”
Alt="Status Report”
ToolTipTitle="Project Status Report”
ToolTipDescription="Run the Project Status report for the current project.”
Image16by16=”/_layouts/images/ProjectRibbonStatusReport/Report_16x16.png”
Image32by32=”/_layouts/images/ProjectRibbonStatusReport/Report_32x32.png”
TemplateAlias="o1” />
<MaxSize
Id="Ribbon.Tabs.PDP.Home.Scaling.Reporting”
Sequence="140”
GroupId="Ribbon.Tabs.PDP.Home.Reporting”
Size="LargeLarge”/>
<CommandUIHandler Command="EnableCustomGroup”
CommandAction="javascript:return true;” />
<CommandUIHandler Command="RunStatusReport”
CommandAction="javascript:runStatusReport();” />
[/sourcecode]
Now there is one final caveat, the button isn’t security trimmed, so if you have access to the PDP, you will have access to the button, bare this in mind if you are planning to implement.
Running the code
As defined in the ribbon XML above, when the button is pressed, the runStatusReport() method will be invoked, which will call the Javascript code below to read the query string value for ‘projuid’, pass it into our URL and then open a popup window containing the Project Status report. Now this JavaScript doesn’t validate the content of the query string being read for potential hacks and you may want to look at that before deploying it to your production environment, but it gives you a pattern for implementation.
[sourcecode lang=”Javascript”]
function getQuerystring(name) {
name = name.replace(/[[]/,"\[").replace(/[]]/,"\]");
var regexS = “[\?&]“+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var url = window.location.href;
var lowercaseurl = url.toLowerCase();
var results = regex.exec(lowercaseurl);
if( results == null ) return “";
else return decodeURIComponent(results1.replace(/+/g, " “)); }
function OpenPopup (c) {
window.open(c, ‘window’, ‘width=800,height=680,scrollbars=yes,status=yes’);
}
function runStatusReport() {
var ProjectUID = getQuerystring(‘projuid’);
var URLString = ‘http://project.contoso.com/PWA/_layouts/ReportServer/RSViewerPage.aspx?rv:RelativeReportUrl=/PWA/Reporting%20Services%20Reports/ProjectStatusReport.rdl&rv:ParamMode=Collapsed&rp:ProjectUID=’ + ProjectUID;
OpenPopup(URLString);
}
[/sourcecode]
In order to deploy this ribbon customisation and JavaScript into PWA, a feature needs to be built that will move the various files into the correct location on the server and activate the feature. Instead of walking through the process of building the feature, I have decided to make the Visual Studio 2010 solution available for download from my Skydrive account by clicking on the icon or link below.
Finally, once installed and activated, a new Reporting group will be added to the Project ribbon with a Status Report button that when clicked will invoke a popup window containing the relevant Project Status Report.
Hopefully this has give you an insight into what is possible and sparked off some ideas of how to integrate other items into the ribbon to bring more value to users.