#ProjectOnline PWA Stats with Snapshot #JavaScript #jQuery #PPM #Office365 #PMOT #MSProject

July 2, 2018 at 10:55 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information, Reporting | Comments Off on #ProjectOnline PWA Stats with Snapshot #JavaScript #jQuery #PPM #Office365 #PMOT #MSProject
Tags: , , , ,

Want to view simple PWA stats and capture the data to then build simple trend reports? This simple JavaScript and jQuery solution starter might be a good starting point. The output can be seen below:

image

Each PWA entity can be expanded to see the stats:

image

image

Then each week or month etc. you can take a snapshot of the data using the Snapshot button, this creates an item on the snapshot list:

image

The solution starter code has been published for download. The code expects the SharePoint list to already exist but that is covered in this blog post. The solution starter code can be downloaded from the Microsoft Gallery using the link here: https://gallery.technet.microsoft.com/Online-PWA-Stats-and-eb56e6bb

The code does make use of jQuery and jQuery UI, these are loaded from the jQuery CDN but you might want to download them and store them locally etc.:

image

The code expects a list called PWASnapshot in the root PWA site collection:

image

This can be updated to a different target list in the root PWA site collection, just change the listTitle variable as seen above. The following columns are required to already exist on the target SharePoint list in the PWA site collection:

image

They’re all default column settings apart from DateCaptured, this defaults to Today’s Date. If you do not need the snapshot capability, you could just comment out / remove the snapshot button from the code.

Create a new page on the PWA site to display the PWA Stats data, I created a new web part page in a library called “Pauls” in the root PWA site – this is on my test PWA site, hence a library called Pauls!

image

Download and update the solution starter as required – remember it is a solution starter so it could do with some code optimisations and better error handling etc. Upload the solution starter JavaScript code to the PWA site, in this example I uploaded it to the same library as the new PWAStats page. Edit the new page and add a Content Editor Web Part, update the Content Link to add the relative URL path for the JavaScript code as seen below in this example:

image

Update other web part settings as required then click Apply then click OK and stop editing the page.

As the data is loaded, the SharePoint modal dialog will appear:

image

This will close once all the projects are loaded as on my PWA dataset, the projects data is the largest.

Clicking the snapshot button will also load the SharePoint modal dialog:

image

This will close when the item is added to the list, then a message will display below the button to state the item has been added:

image

Trend reports could easily be created using Power BI consuming the snapshot list data to see how the data changes over time.

This could easily be extended to bring in additional PWA stats. I will probably write a blog post in the future to extend this to capture additional PWA stats.

The solution starter file contains HTML, CSS and JavaScript in the same file, for production you might want to split out the HTML, CSS and JavaScript into the separate files, reference the JavaScript and CSS files in the HTML file and link to the HTML file in the content editor web part but as this is so small having one file will be fine and is easier to manage.

Fully test on a DEV / TEST PWA instance first before using in Production. The script is provided "As is" with no warranties etc.

I hope you find it useful Smile

Advertisements

#ProjectOnline : Add related projects to a custom field #JavaScript #jQuery #PPM #Office365 #PMOT #MSProject

May 24, 2018 at 7:24 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | 1 Comment
Tags: , , ,

This blog post follows on from my earlier blog post on updating Project Online project level custom fields from JavaScript using the REST API: https://pwmather.wordpress.com/2018/05/21/using-rest-in-javascript-to-update-projectonline-project-custom-fields-ppm-pmot-jquery-office365/

As mentioned in that post, I have published example code sample / solution starter that demonstrates updating a project level custom field using the REST API. This simple code sample runs from a Project Detail Page in the Project Web App site collection, it enables the user to add related projects to a project level custom field. As mentioned, it is a solution start to demonstrate the use of the Project Online REST APIs from JavaScript, so it wouldn’t be fit for production use as it would need some tweaks to manage things like displaying projects already added to the custom field pre-loaded in the related project list etc. The solution starter functionality can be seen below:

image

The solution starter code can be downloaded from the Microsoft Gallery here: https://gallery.technet.microsoft.com/Online-Add-Related-e6a69a02

Once downloaded, open the file to edit in your chosen editor (notepad will do if you have nothing else, I use Visual Studio Code or Notepad++). To get the solution starter code to work, you will need to update the custom field internal name for your target project level custom field, the code sample also assumes this target custom field is a text field. If the target field is a different type you will need to update the value type as mentioned in the first post.

Firstly, get the correct internal name for the custom field as seen below in this example:

image

This information is available using the CustomField API: {PWAUrl}/_api/ProjectServer/CustomFields

Now in the solution starter code, update the projectCFInternalName variable on line 61 as seen below with the correct guid:

image

Save the file and upload to a library in the PWA Site, for example mine is uploaded to the Site Assets library. Then add a Content Editor Web Part to the target Project Detail Page in PWA, edit that new web part:

image

In the content link, put a link into the JavaScript file, in my example the link is /sites/pwa/SiteAssets/PWARelatedProject.js. Expand Appearance, give it a title and change the Chrome Type to None. Click Apply then click OK and stop editing the page. Your page will then display the following (assuming you edited the web part from PWA Settings > Project Details Pages:

image

When accessed from a PDP linked to a project the following will display:

image

The list of projects are filtered to the list of projects the current user can access. Use the buttons to add the related project/s:

image

Then click Save:

image

Once the publish job has been sent to the queue for processing the modal will close. Viewing the custom field in the PDP will show the the projects added:

image

This is just a simple example to demonstrate updating project level custom fields using the REST API from a Project Detail Page. Update the solution starter to ensure the code is production ready and fully test on a DEV / TEST PWA instance first before using in Production. The script is provided "As is" with no warranties etc.

Using #REST in #JavaScript to update #ProjectOnline project custom fields #PPM #PMOT #jQuery #Office365

May 21, 2018 at 12:01 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | 1 Comment
Tags: , , ,

This blog post provides example code for updating Project Online project level custom fields using the REST API ({PWASite}/_api/ProjectServer) in JavaScript on a PWA page. Following this blog post later this week will be a full working code sample that will be available for download.

When updating a project programmatically you will still need to following the same steps you do when updating a project manually, check out, update, publish and check in. The code snippets below demonstrate these actions using the REST API in JavaScript for updating a project level custom field.

Firstly check out the project:

image

Here we are passing in the project GUID into the URL that we will call to check out the project using the jQuery ajax HTTP request. The check out method is detailed here: https://msdn.microsoft.com/en-us/office/project/api/publishedproject#CheckOut__ If successful we then call the updateProjectCF function:

image

Again, in here we are passing in the same project GUID into the URL to update the custom fields using the jQuery ajax HTTP request. This call is slightly more involved as we have to inform the API call what is being changed. This is done by passing that data to the API in the HTTP call. To update custom fields you have to specify the key, the value and value type. The key is the internal custom field name, an example seen below:

image

This information is available using the CustomField API: {PWAUrl}/_api/ProjectServer/CustomFields

The value is the data you want to add to the custom field, this example is just updating a free text (single line of text) field. The value type specifies the custom field data type that you are updating. These are all prefixed with Edm (Entity Data Model) then the the type such as String, Int32 or DataTime etc. The update custom field method is detailed here: https://msdn.microsoft.com/en-us/office/project/api/draftproject#UpdateCustomFields_Collection_SP.KeyValue__customFieldDictionary_ If successful we then call the publishcheckInProject function:

image

Similar to the first API call, we just pass in the same project GUID to the URL used then call to publish and check in the project using the jQuery ajax HTTP call. Specifying true with the publish call will check in the project. The publish method is detailed here: https://msdn.microsoft.com/en-us/office/project/api/draftproject#Publish_Boolean_checkIn_

As mentioned earlier on in the post, there will be a full working example / solution started published later this week.

#ProjectOnline / #ProjectServer display Project Detail Page web parts using tabs #PPM #MSProject #JavaScript #jQuery

March 4, 2018 at 4:40 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | Comments Off on #ProjectOnline / #ProjectServer display Project Detail Page web parts using tabs #PPM #MSProject #JavaScript #jQuery
Tags: , , , , ,

Got lots of web parts on a Project Detail Page in Project Online? Lots of fields that you want to group or display in a better way without navigating between pages? If so, this might be your answer, a simple JavaScript and jQuery solution to add tabs to your Project Detail Pages as seen below:

image

image

The solution starter code has been published for download but it will need updating to work on your PWA configuration but it is very simple and this blog post covers the changes needed. The download will just save a lot of typing and includes the full source code. The solution starter code can be downloaded from the Microsoft Gallery using the link here: https://gallery.technet.microsoft.com/Online-Server-PDP-tabs-c8012555 

Once downloaded, open the file to edit in your chosen editor (notepad will do if you have nothing else, I use Visual Studio Code or Notepad++). This solution starter is set to work with two web parts, the web parts seen below in my Project Online DEV instance.

image

In this post we will walkthrough adding in a 3rd web part to the script as that will provide the steps needed to get the correct web part references to update the script:

image

Firstly we need the web part div ID, to do this, when on the Project Detail Page in PWA press F12 and this will load the browser dev tools:

image

Using the element selector:

image

Select the web part, one at a time like below and click:

image

The DOM Explorer will then update and show you the web part div. You need to copy the div id as outlined in red below:

image

Repeat this for all the web parts on that page with you wish to move to use tabs then the browser dev tools can be closed.

In this example I just need to update the JavaScript file to add another item to the HTML list, add another div, move the web part to my new div, update the functions and add another function for my new list item. These changes can all be found in the screen shots below. The before images are the base script as downloaded. Before:

image

After:

image

Now I need to update the JavaScript in the file. Before:

image

After:

image

Save the file and upload to a library in the PWA Site, for example mine is uploaded to the Shared Documents library. Then add a Content Editor Web Part to the target Project Detail Page in PWA at the top of the page and edit that new web part:

image

In the content link, put a link into the JavaScript file, expand Appearance, give it a title and change the Chrome Type to None. Click Apply then click OK and stop editing the page. Your page will then display the web parts on the tabs:

image

Simple! This can easily be extended to add icons to the tabs etc. This simple example uses jQuery UI tabs: http://jqueryui.com/tabs/ that provides may options. In this example I also use the base jQuery UI theme CSS file but there are a few to choose from: https://code.jquery.com/ui/ I load the jQuery files in from the jQuery CDN but you might want to download them and store them locally etc. Also, the solution starter file contains HTML and JavaScript, for production you might want to split out the HTML and JavaScript into the separate files, reference the JavaScript file in the HTML file and link to the HTML file in the content editor web part but as this is so small having one file will be fine and is easier!

Fully test on a DEV / TEST PWA instance first before using in Production. The script is provided "As is" with no warranties etc.

Enjoy Smile

Update for script to report across #ProjectOnline Project Sites for #SharePoint list data #PPM #JavaScript #Office365 #REST #OData

June 3, 2017 at 8:58 pm | Posted in Configuration, Customisation, Fixes, Functionality, Information, Reporting | Comments Off on Update for script to report across #ProjectOnline Project Sites for #SharePoint list data #PPM #JavaScript #Office365 #REST #OData
Tags: , , , ,

I have made a quick change to the example solution starter script to fix a common encoding issue with the EPT names. For example, if your EPT name is “R & D”, the original example solution starter script wouldn’t handle this when querying the Project OData API. It would pass in R & D when querying the OData API but the OData API call fails as it should use R %26 D. I have updated the solution starter code to handle this and encode the EPT name before querying the Project OData API. The solution starter code can be downloaded here:

https://gallery.technet.microsoft.com/Report-on-Online-list-data-f5cbf73f

If you didn’t seen the original post or solution start script before, see the post below:

https://pwmather.wordpress.com/2017/05/05/want-to-report-across-projectonline-project-sites-for-sharepoint-list-data-ppm-javascript-office365-rest-odata/

This script is still a solution starter and should be updated for production use to include the correct data you want, improve error handling, support the REST API pagination, split out HTML, CSS and JavaScript etc.

Want to report across #ProjectOnline Project Sites for #SharePoint list data? #PPM #JavaScript #Office365 #REST #OData

May 5, 2017 at 5:13 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information, Reporting | 5 Comments
Tags: , , , ,

For those of you that are familiar with Project Server or Project Online, only the default lists and default columns from those lists are synchronised to the database reporting schema. So Project API’s like the OData API (_api/ProjectData) only have data for Risks / Issues and the default columns etc. I have published an example solution starter script that will allow data from any list on the project site to be used.

This is a supporting blog post for the JavaScript solution starter I have published to the Microsoft Gallery, it can be downloaded here:

https://gallery.technet.microsoft.com/Report-on-Online-list-data-f5cbf73f

This solution starter should be updated before production use to include the correct data you want, improve error handling, support the REST API pagination etc. This example uses the Issues list and some example default columns from the Issues list but it can easily be updated to use a custom list on the Project Sites.

There are comments in the script to help update the script for your target Project Site list and columns. Once the script is updated, upload it to a library on the target PWA site. Create a new page on the PWA site to host the JavaScript file. Then add a content editor web part on the new page and reference the JavaScript file, for example:

image

Once added it will look like this (this in on one of my MOD demo tenants):

image

The select menu will contain a list of EPTs:

image

Changing the selection to another EPT will load a SharePoint modal pop up whilst the data loads:

image

If an EPT is selected that doesn’t contain any list items the following will be displayed:

image

There is example conditional formatting on the table:

image

The list item title is a clickable hyper link that will open the list item in a new window:

image

Fully test this on a non-production PWA instance before using in Production, the script is provided As Is with no warranties etc. Try it out and let me know what you think.

Want to capture the last logon time for the #ProjectOnline PWA users? #PPM #JavaScript #Office365 #SharePoint

September 30, 2016 at 2:19 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information, Reporting | 2 Comments
Tags: , , , ,

This is a supporting blog post for a new JavaScript file I have published to the Microsoft Gallery, it can be downloaded here:

https://gallery.technet.microsoft.com/Capture-Online-user-last-43621a21

Microsoft recently removed the Last Logon details from the Manage Users page in PWA settings for Project Online – Microsoft’s PPM tool. This simple script is an alternative solution that will capture the last logon for the Project Web App users. It wont capture the last logon from Project Professional or if a user accesses the API’s etc., it will only capture the last logon from the page the script is added to. In this example I have added the script to the homepage, so if a user has the Project Center saved as a favourite link and bypasses the PWA homepage then their logon would not be captured. You could add the script to multiple PWA pages if required.

When a user accesses the PWA homepage for the first time that day, an item is created on the SharePoint list in the PWA site, it only captures the logon once per day. See an example on my demo instance:

image

It captures the user name, the logon data and the browser that was used. This list will need to be created manually with the following details:

List Name: PWAUsageList

Columns:

image

The LogonDate column setting defaults to Today:

image

Once the list is set up, upload the JavaScript file to a library on the PWA site then the script can be added to the PWA homepage using a content editor web part:

image

Reference the location of the PWAUsage.js file – in this example I added the JavaScript file to the Shared Document library in the PWA site, also notice the Chrome Type is set to None so nothing is visible on the PWA homepage.

That is it, it will now capture the users who access the PWA homepage. Once you have the data on the list you can then create a report for that data. I will publish a blog post in the next week or so that details this but for now here is an example report screen shot in Power BI:

image

Fully test this on a non-production PWA instance before rolling out to Production, the script is provided As Is with no warranties etc. Try it out and let me know what you think.

#ProjectOnline Project Ideas list view with Project GUID #Office365 #SharePoint #JavaScript #jQuery

July 22, 2016 at 9:14 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information, Reporting | Comments Off on #ProjectOnline Project Ideas list view with Project GUID #Office365 #SharePoint #JavaScript #jQuery
Tags: , , , , , ,

For those of you that are familiar with the project ideas lists in Microsoft’s PPM PWA application you might want to skip this first paragraph. Any list you create in the PWA site collection at the top level you will see a button Create Projects, if you are not familiar with this feature take a look at this blog post: https://pwmather.wordpress.com/2012/12/13/creating-and-adding-projects-to-projectserver-2013-ps2013-sp2013-office365-part-1/.

The purpose of this post isn’t to revisit that feature, this post covers getting access to some of the data on that list that is hidden from the views and creating an enhanced view for the Project Ideas type list.

If you look at the view details, you can see below the columns I can add to this view:

image

Yet if I look at the columns available on this list using the REST API I see a few more, a key one being MSPWAPROJUID as seen below:

image

This column gets updated with the Project GUID when you create a project from the list. As this is a hidden column it can’t be added to any views which is a shame as that would be very useful. I thought ok, simple, I will just update the field hidden property false then add it to the view. Whilst that change is very simple with a few lines of code this appears to break the column getting updated with the Project GUID so I don’t recommend doing that currently. If I found a way to get this working I will create a post. So as that didn’t work that lead me on to the next idea, lets build my own view on a page. This can be seen below:

image

I have made the Item Title clickable to open the list item in a new window and where an idea item has been converted into a project, the Project GUID is a clickable link to the view the project. This opens the schedule Project Detail Page. The columns are sortable, by default it is sorted by Item ID, to change this use the arrows in the table column heading. As you can see, I don’t have much data on my test system and only one idea has been created into a project.

I have made the code available on the Microsoft code gallery, it can be downloaded here: https://gallery.technet.microsoft.com/Display-Online-ideas-list-c59c8cc7

To get the script to work for your PWA instance in Project Online you will need to update the listName variable to set the correct list title for your project ideas list:

image

Replace ProjectIdeas with the correct title. Save the JavaScript file in a document library in the PWA site collection then create a web part page in the PWA site collection, for example I created the page and uploaded the script to the Shared Documents library:

image

On the new web page page I added a content editor web part and linked to the JavaScript file:

image

Click Apply then OK and the data should load if the listName variable is correct. You can then add a link to the new page from the PWA quick launch if needed.

A nice simple solution that provides more functionality than the standard SharePoint view.

Want to capture your #Project team / staff morale? #ProjectOnline #ProjectServer / #SharePoint #PPM #JavaScript #jQuery

December 1, 2015 at 8:58 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | Comments Off on Want to capture your #Project team / staff morale? #ProjectOnline #ProjectServer / #SharePoint #PPM #JavaScript #jQuery
Tags: , , , , ,

This is a supporting blog post for a new JavaScript file I have published to the Microsoft Gallery, it can be downloaded here:

https://gallery.technet.microsoft.com/Capture-Morale-in-9702d380 

This script enables you to capture the the team / staff morale each day – your team members just need to click one of the smiley faces:

image

In the example above I am logged in with the tenant admin account called “admin admin”. When a user clicks one of the icons it creates an item in the “ProjectTeamMorale” list in the PWA site:

image

If they click the happy faces it sets the item status to Happy, if they click the sad face it sets the status to Unhappy.

This list will need to be created manually with the following details:

List Name: ProjectTeamMorale

Columns:

image

The Date column setting defaults to Today:

image

Once the list is set up the script can be added to the PWA homepage using a content editor web part:

image

Reference the location of the project_team_morale.js file – in this example I added the JavaScript file to the Shared Document library in the PWA site:

image

That is it. The script can easily be updated to use different images or include more than two statuses etc. In this example I have done this for PWA but this could be added to a SharePoint intranet site to capture the staff members morale rather than just the project team in this example.

You can then generate a report to view the team / staff morale over time.

Try it out 🙂

I am speaking – Project Virtual Conference #ProjectOnline #BI

October 2, 2015 at 12:57 pm | Posted in Information | Comments Off on I am speaking – Project Virtual Conference #ProjectOnline #BI
Tags: , , , , , ,

Quick post to reference my session for the Project Virtual Conference on 22nd October 2015:

http://projectvirtualconference.com/sessions/project-online-bi-made-easy/

See some of the great reporting options for Project Online.

For the full schedule see: http://projectvirtualconference.com/schedule/

To register for this great free event (no travel expenses either!): http://projectvirtualconference.com/register/

Next Page »

Create a free website or blog at WordPress.com.
Entries and comments feeds.