Customising PDP Navigation

Despite the best efforts of Microsoft with the UI design of SharePoint / PWA, I frequently get requests from customers to make changes / additions to the standard UI elements such as the ribbon menu, which – if you’re reading Microsoft – people very often still just “don’t get”.

So a small thing I came across while digging around in the internals of the Project Server undocumented JavaScript was an easy way to re-use the standard functions of the ribbons in your own html / JavaScript.

(Note this is not a post about ribbon customisation, see Alex’s great post series here if that’s what you’re after.)

 

Example: ever wanted buttons at the bottom of a long form?

screenbtns

Simple yet effective.

 

Source html

<div id="myFooterBtns"><span>
    <input type="button" value="< Previous Page" onclick="PDPInfrastructure.GotoPreviousPDP();">
    <input type="button" value="Next Page >" onclick="PDPInfrastructure.GotoNextPDP();">
</span>
<span style="float: right;">
    <input type="button" value="Save Project" onclick="PDPButton.SaveData();">
</span></div>

Note the JavaScript function calls which are quite self explanatory: PDPInfrastructure.GotoNextPDP(); etc. As you might guess you can find a similar method for most options (although some are not so simple).

To use: simply save this as a html file somewhere in your site collection and then reference it in a Content Editor Web Part, see here for an example of how to do that.

 

Disclaimer

It may go without saying but I will anyway: This is using undocumented and unsupported internal functions that will undoubtedly change at some point in the future whenever Microsoft feels like it.

You have been warned. But in the meantime keep giving customers what they ask for. :)

 

Create a project site based on a custom field value

One of the nice new features recently released on Project Online that will also be available for on-prem sometime in the future (PS 2016 or maybe if we’re lucky 2013 sp2?) is the ability to create custom fields via workflow using the new API CreateProjectSite. While on its own this may be a rather small change what it opens up is the possibility to completely control the Project Site creation which previously had only the out-of-the-box options i.e.; on or off!

So using this new feature I have created a walk-through here to resolve an often asked customer requirement:

How can we create the Project Site using a name other than the Project Name, e.g. a Project Number?

Solution Overview

Note: This solution can be used today on Project Online, but as of yet will not work on Project Server 2013 on-premises.

In order to fulfill this requirement we will need to create a simple two stage workflow and associated Enterprise Project Type to be the default project type.

Stage 1: Project Registration

Used to collect project details including “Project Number” which will be a required field. Other PDP’s such as the project schedule will not be available.

In this stage no project site is available.

Stage 2: Project Execution

First thing upon entering this stage the project site is created using the details from the previous stage (site URL = “Project Number”), then other PDP’s, etc are shown to allow for the project to continue.

Project Online Configuration

I will go through the configuration of PWA for the workflow in brief, if you are not familiar with creating workflows or need further information then I’d recommend the following MSDN How to: How to: Create a Project Server workflow for Demand Management.

Firstly you will need a custom field called “Project Number” that is configured as a Project entity, type Text and Workflow-controlled enabled, as so:

ECF2

Next create / edit the “New Project” PDP, and add the Project Number field to the PDP.

Optionally leave the field out of the PDP and go and install the Nearbaseline ID App which will set the project number in the background once the project is created (ahem shameless plug).

Now create the required Stages and Phases as follows:

workflowStages

Note that in the Project Registration stage the “Project Number” field must be marked required.

Now create an Enterprise Project Type using the New Project Page created above and for now leaving everything else default / blank as you’ll have to come back and associate the EPT with your workflow after the next steps.

Finally configure the default settings to NOT create project sites automatically from PWA Settings > Connected SharePoint Sites > Settings, as follows:

Setting "Allow users to choose" in PWA settings

With that all setup we’re ready to create our workflow in SharePoint Designer.

Workflow Creation in SharePoint Designer

The workflow creation is based on the steps documented in the MSDN guide: Project Online: Bulk update custom fields and create project sites from a workflow, as such I will skip some of the details and suggest you review that article if you have any problems.

Open SharePoint Designer, create a new SharePoint 2013 Workflow – Project Server workflow and add the following:

  1. Insert two stages Project Registration & Project Execution
  2. Optionally set the stage status in the Project Registration stage to WaitingForInput.
  3. Set the transition to go to the Project Execution stage.
    No additional wait for submit event is really required here as the workflow will automatically wait for all required custom fields to be entered before allowing submit.
  4. Now in the Project Execution stage add a step in which you can add the Create Project Site call as documented in the MSDN article.
  5. Finally terminate the workflow as the final transition.

Your workflow should look something like this:

spdWorkflow

The only change from the steps outlined in the MSDN article is in the forth step where the URL is constructed for the CreateSite call, in our case we want that to reference our “Project Number” custom field in the parameter in CreateProjectSite(parameter), so your URL should look like:

createcall

Note: Don’t try to cut and paste those URLs if you do so you will lose the special [%tags%], use the Add or Change Lookup button to insert the tags.

Once your workflow is done, save, publish and return to PWA and associate it with your EPT that you created then test!

Solution Download

Find attached below the SharePoint Designer Workflow solution created above exported as a Visio diagram, note that I cannot provide any guarantees or support for this downloaded Visio file.

Download: Demo Create Project Site from ECF

Screen shot of the workflow in Visio:

visio

 

Hope this is useful to someone out there!

 

Microsoft Ignite 2015

A week of Ignite in Chicago is coming to an end and I thought it is about time to share some of my thoughts and discoveries over the last week, firstly though it’s been great to see a lot of familiar faces amongst the 23,000 or so people here in Chicago!

I’m not going to do a full write up of every session I’ve seen, the great thing about the blog-o-sphere is I can point you to the great write-up’s done by others (@PWMather‘s posts herehere and here are a great place to start!). What I will do is focus on some of the details that have interested me most.

New Project 2016 features

First up of course is what can we expect from Project 2016 / Project Server 2016 and Project Online in the next release; hmm how do I say this diplomatically? –  Not that much.

 

Write support in MS Project client side API

I really really wish this feature was available six months ago considering the work I have been doing for customers lately! Good riddance VSTO I say! :)

 

Resource Engagement – Request / Review / Approve resource assignments

This is a long awaited feature for Project Server, however for some reason it didn’t get much air-time here at Ignite, fortunately I’ve had a chance to see most of during my day job working with some TAP customers and it goes a long way to addressing the typical need for managing / controlling and monitoring resource usage and over-allocation in a typical organisations.

I have to say though, with a major disclaimer (as I am an employee of TPG – The Project Group), that this new feature doesn’t quite come close to what is available in TPG’s TeamManager App, but then again I think that’s great as it really shows the the benefits of the App Model that Microsoft has created!

 

No more Project Server database – Project database to merge with the Content DB

This is already happening in ProjectOnline, but the interesting thing is what does this mean for reporting directly from the RDB as it is not supported to report from the SP Content DB’s? Well the good news is that according to at least one MS product manager for Project it will still be supported, so allow me to quote @mikemcleanlive; “You will be able to report directly against the new consolidated db if it’s on a dedicated server” (I’m just going to ignore that little “if” in there for now)

 

Other improvements

  • OData limit changes are good to see, specifically for Timephased data the max rows per request has been increased to 2,000, apparently this can improve performance by 10x, but more importantly however it will make it possible to actually report on timephased data via OData. (No sorry 2-3hours to wait until Excel times-out or crashes when loading those datasets in the past was not a viable solution)
  • Zero-downtime patching, this is a great and very well received new feature on the SharePoint side.
  • PowerBI, PowerBI, PowerBI, seems to be a popular topic here this week. Well seriously seeing what can be done using it connected to OData from Project is pretty cool, shiny responsive dashboards are cool (excuse my hint of sarcasm).
  • No more Project Service Application – goodbye one more configuration step – details TBA. :)
  • Small API changes previously announced (but now documented!) include BulkCustomField updates and ProjectCreate methods enabling faster custom field updates and controlled Project site create via workflows.

Final thoughts

I was really hoping to see more cool new features both for Project and SharePoint, much of the latter focused on Delve and Office Graph API which I have yet to see any relevance in the Project space. Additionally the push to be mobile first, cloud first for most of Microsoft seems to have been neglected in parts of SharePoint and especially Project Server, I expect it will be a very long time before we see PWA usable on a mobile phone for instance! :(

Having said that, the good thing about Microsoft’s online story with Office365 and Project Online is that all that hard work MS have put into making the software fast, responsive, stable and fully integrated across the full stack of MS products are all now going to be available on-premises as well, so this might mean Project Server 2016 is not going to be a major release (2003 -> 2007 or 2007 – 2010 for example) but it will be a solid upgrade for existing and new customers.

Update to Bulk Edit Available (v1.0.4.4)

A new version of Bulk Edit is available from the App store, check your site settings for the upgrade link now to install it.

Bug Fixes

  • Updates to multiple fields in a single project failing without error.
  • Update to correct filter issue when values contain special characters.

Installation

Open site contents in PWA to find the update link next to the App Tile.

Finally if you use and love Bulk Edit, please rate it in the App Store!

Updated 21st April: Re-released and updated to build 1.0.4.4.

Project Site Risk List in a PDP Webpart 2013 Version

Back in the days of 2010 there was a Project Site List Viewer WebPart that gave you the ability to show specific lists (Risks, Issues or anything) from a given project’s site in a PDP. While in 2013 on-prem you can still install that solution starter from Fluent-Pro (here), that doesn’t help you with Project Online and not to mention with the dozens of on-prem scenarios where the solution doesn’t work without code modifications. So recently I was asked to solve this problem again and I thought that I’d try to find another way.

Another (simpler) way

Let’s start with a screenshot of the end result:

screen0

Perfect it looks exactly like a typical SharePoint list only in the Project Detail Page for our project – and of course importantly it shows the Risk list from the currently open project.

Reason 9,999 why I love JavaScript

Basically using a small script we can show the actual SharePoint page for the risk list e.g. “/PWA/Project Name/Lists/Risks/AllItems.aspx?isdlg=1” in an iFrame on our PDP. To do that firstly you can see that I’ve added “&isdlg=1” to the URL which tells SharePoint to show the page without the rest of the SharePoint master page and quick launch menu in the frame (which just looks weird), then we need to update the address with the actual project’s name and finally by default the ribbon menu would be shown again in our frame so we need to hide that.

JQuery script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function RenderiFrame (c) {
	document.write('<iframe id="nbDataGridFrame" src="' + c + '" width="100%" height="1400" onload="hideRibbonMnu();">');
	document.write('<p>Your browser does not support iframes.</p>');
	document.write('</iframe>');
}
function runSummaryReport() {
	var projectName = $("[id$=RootAspMenu]").find("[href*=projuid]").first().find(".menu-item-text").text();
		
	var URLString = '/PWA/' + encodeURIComponent(projectName) + '/Lists/Risks/AllItems.aspx?isdlg=1';
	RenderiFrame(URLString);
}
function hideRibbonMnu() {
	var $isFound = $("#nbDataGridFrame").contents().find("#s4-ribbonrow");
	if ($isFound.length > 0 && $isFound.is(":visible")) {	
		$isFound.hide();
	}	
	else {
		setTimeout(hideRibbonMnu, 100);
	}
}
runSummaryReport();
</script>

Okay so I won’t go through it line by line, but in summary what the script needs to do is the following:

  1. Construct the correct URL to the list (Risks in this case) by obtaining the Project Name from the quick launch menu of the current page- Yes I’m assuming the default site naming based on project name!
  2. Passes the encoded URL into a function which renders an iFrame of the specified size.
  3. Finally as a part of the iFrame itself there is an ‘onload’ parameter which calls a function to hide the ribbon menu once the frame is loaded.

Installing the script

If you’ve not used the CEWP much before here are a few reminders on how to create a PDP with this kind of script:

Firstly save the script above to a file named “showListonPDP.html” (note it is .html not .js), then upload that to your PWA site contents where everyone can access it /PWA/SiteAssets/ or /PWA/Site Collection Documents/ etc.

Then create a new PDP as normal and add the Media and Content -> Content Editor web part:

screen1a

 

Now edit the web part properties and paste in the URL of the script:

screen2

Note that the URL must be just the file name, not the full URL, e.g.: “/PWA/SiteAssets/showListonPDP.html”

Now add the PDP to your EPT and go ahead and open a project.

screen0

 

Just one more little thing

Now if you click the new or edit item menus it opens the form in the frame which could be better, fortunately SharePoint lists can be configured to open forms in a dialog, the option can be found from the list settings on the project site itself (obviously you want to do this on your project site template as well), so open your site project, go to the Risks list, and select site settings -> Advanced settings, at the bottom you will find:

screen3

 

Select yes and Ok, now when you go back to the PDP and click New Item this is what you should see:

screen4

 

Neat huh?

 

PWA View Failure with customised Gantt Chart format

I came across this one working with a customer recently, basically the following error comes up whenever you attempt to edit a project schedule in PWA and selecting a view that contains custom gantt chart formatting:

viewfail

Error Message: View Failure: The view failed to load. Press OK to reload this view with the default settings….

In some cases users see the additional message of:

An error occurred while opening your project. Give us a few minutes and try again. …

Cause

While this error is quite generic as it can be caused by a number of things, this specifically only occurs when attempting to edit a project using the view in question, all other views work (view and edit) and these custom views definitely work when only viewing the project data.

For example modifying a view to use the following Gantt Chart with “Custom Duration 1″ selected will result in this error:

customgantt

Finally I have tested this issue on a number of Project Server versions and as far as I can see it exists on all Project Server 2013 SP1 and above – up to the latest Cumulative, as well as Project Online (at the time of writing).

However it does not affect Project Server 2010.

Solution?

Sorry can’t help you here, other than to disable the customisations to the gantt chart! I’ll be logging this one with Microsoft and will update this post if anything comes of that.