Invoke Project Status reporting, direct from the ribbon

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.

Project Ribbon with Status report button

It turns out the answer is very simple, so read on Smile

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.

Project Status Report

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.

ProjectUID in 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.Reporting Services integrated mode

In my case, the following query will run the report.

http://project.contoso.com/PWA/_layouts/ReportServer/RSViewerPage.aspx?rv:RelativeReportUrl=/PWA/Reporting%20Services%20Reports/ProjectStatusReport.rdl& rv:ParamMode=Collapsed&rp:ProjectUID=’1c7ca65a-3505-4570-9b65-24633063e9ae’

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:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
	<CustomAction Id="Ribbon.Library.Actions.Scripts"
                Location="ScriptLink"
                ScriptSrc="ProjectRibbonStatusReport/ProjectStatusReport.js" />
	<CustomAction Id="Ribbon.Tabs.PDP.Home.Reporting"
				  Location="CommandUI.Ribbon">
		<CommandUIExtension>
			<CommandUIDefinitions>
				<CommandUIDefinition Location="Ribbon.Tabs.PDP.Home.Groups._children">
					<Group Id="Ribbon.Tabs.PDP.Home.Reporting"
						   Sequence="60"
						   Description="Reporting Custom Group"
						   Title="Reporting"
						   Command="EnableCustomGroup"
						   Template="Ribbon.Templates.Flexible2">
						<Controls Id="Ribbon.Tabs.PDP.Home.Reporting.Controls">
							<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" />
						</Controls>
					</Group>
				</CommandUIDefinition>
				<CommandUIDefinition Location="Ribbon.Tabs.PDP.Home.Scaling._children">
					<MaxSize
						Id="Ribbon.Tabs.PDP.Home.Scaling.Reporting"
						Sequence="140"
						GroupId="Ribbon.Tabs.PDP.Home.Reporting"
						Size="LargeLarge"/>
				</CommandUIDefinition>
			</CommandUIDefinitions>
			<CommandUIHandlers>
				<CommandUIHandler Command="EnableCustomGroup"
								  CommandAction="javascript:return true;" />
				<CommandUIHandler Command="RunStatusReport"
								  CommandAction="javascript:runStatusReport();" />
			</CommandUIHandlers>
		</CommandUIExtension>
	</CustomAction>
</Elements>

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.

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(results[1].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);
}

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.
Project Ribbon Status Report SolutionDownload

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.

The final 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.

Advertisements

5 thoughts on “Invoke Project Status reporting, direct from the ribbon

  1. Pingback: Tweets that mention Invoke Project Status reporting, direct from the ribbon « EPMSource -- Topsy.com

    • Hi Simon,

      It runs in the context of the Project you are editing, hence why it only turns up on the Project ribbon (where we no the ProjectUID), not the Project Center ribbon.

      So just clicking it reads the query string of the current project and passes it though to the report.

      Alex.

  2. Cool, I misread how you got the PUID.

    I can see some consolidated reports on the Project Center Ribbon. Nice post Alex thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s