#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 | Leave a comment
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 Export Capacity Planning data to #Excel issue #PPM #PMOT #Office365 #MSProject

June 30, 2018 at 7:44 am | Posted in Administration, Configuration, Fixes, Functionality, Information, Issue | Leave a comment
Tags: , , ,

Just a quick post to highlight an issue I came across that I thought might be worth posting about in case anyone else runs into the same issue. In Project Online, in PWA you can export most of the grids to Excel. I was testing something in PWA and came across an issue exporting the Capacity Planning grid to Excel, I clicked the button but nothing happened, the details grid would flicker when the button was clicked but nothing after that. Opened the browser debugger and tried again, no console errors but looking at the Network log an error 500 was thrown for the ProjectServer.svc:

SNAGHTML57ccc6b

Looking at the response I could see a general unhandled exception was thrown caused by a key not being present in the dictionary:

image

Looking at the request payload I could see two resource GUIDs were included:

image

Looking at the grid data there was only one resource present:

image

Looking back in the Resource Center, I did have two resources selected:

SNAGHTML586d081

One being a Cost resource, I deselected the Capex resource and tried the Export to Excel from the Capacity Planning page and all worked as expected.

If you do run into the issue with exporting the Capacity Planning grid to Excel, check the resource types you have selected, deselect Cost and Material resources then try again and hopefully that will resolve the issue for you. I will mention this to the Project team at Microsoft to see if this is something they are already aware of.

Getting Starting with #ProjectOnline and #PowerApps #PVC18 presentation links #PPM #PMOT #Apps #Office365 #MSProject

June 14, 2018 at 7:59 pm | Posted in Add-on, Administration, App, Configuration, Customisation, Functionality, Information, Mobile | 1 Comment
Tags: , , ,

Last week I had the pleasure of presenting at the awesome Project Virtual Conference 2018. During my session I referenced existing blog posts and code samples that I had previously published on my blog. As promised in the presentation, here is a blog post containing all of the relevant links to help get you started using PowerApps for Project Online. A link to my session is here: http://projectvirtualconference.com/sessions/getting-started-with-project-online-and-powerapps/

Firstly here is a link to the official PowerApps site: https://powerapps.microsoft.com/en-us/build-powerapps/

The first example app we looked at was a navigation PowerApp for Project Online, this made use of the SharePoint Online connector in PowerApps. As discussed, you would need a process to get the required Project Online data into the target SharePoint list for this approach. Here a link to an example solution starter PowerShell script that will do just that: https://pwmather.wordpress.com/2018/03/01/projectonline-powershell-to-keep-ppm-data-in-sync-on-sharepoint-list-pmot-o365/

Once the data is available, here are the two links that walkthrough creating this example navigation app:

Part 1: https://pwmather.wordpress.com/2018/02/21/projectonline-powerapps-example-office365-ppm-pmot-apps-msproject-part1/

Part 2: https://pwmather.wordpress.com/2018/02/24/projectonline-powerapps-example-office365-ppm-pmot-apps-msproject-sharepoint-part2/

The next example PowerApp we looked at in the presentation made use of the Project Online connector in PowerApps to give examples of using some of the actions available in the connector. This works directly with Project Online so does not require any background process to get data into SharePoint. As mentioned in the presentation, the properties available are fairly limited, hence for the navigation app I had to get the data from Project Online into SharePoint list first as I needed the Project Site URL which is not in the Project data set in the Project Online connector for PowerApps. This example app did make use of the Project Online connector in PowerApps: https://docs.microsoft.com/en-us/connectors/projectonline/

Here are the three links that walkthrough creating this example app:

Part 1: https://pwmather.wordpress.com/2018/03/14/projectonline-powerapps-using-the-project-online-connector-ppm-apps-msproject-o365-part1/

Part 2: https://pwmather.wordpress.com/2018/04/11/projectonline-powerapps-using-the-project-online-connector-ppm-apps-msproject-o365-part2/

Part 3: https://pwmather.wordpress.com/2018/04/26/projectonline-powerapps-using-the-project-online-connector-ppm-apps-msproject-o365-part3/

As mentioned in the presentation, you can create a PowerApp that make use of both the SharePoint connector and Project Online or any number of connectors available for PowerApps – there are lots!

PowerApps are a great way to build business applications without having to write any code!

#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 #PowerApps using the Project Online Connector #PPM #Apps #MSProject #O365 Part2

April 11, 2018 at 12:20 pm | Posted in Add-on, Administration, App, Configuration, Customisation | 2 Comments
Tags: , , , ,

In part two of this series of blog posts we will look at using the ListTasks action from the Project Online PowerApps Connector. For those of you that missed part 1, here is a link: https://pwmather.wordpress.com/2018/03/14/projectonline-powerapps-using-the-project-online-connector-ppm-apps-msproject-o365-part1/

The ListTasks action is: ProjectOnline.ListTasks("{ProjectGUID}","{"PWASiteURL}).value

As you can see we need to pass in two parameters here, the Project GUID and the PWA Site URL. As this requires the Project GUID, we will use the PowerApp we started with in part 1 and pass in the Project GUID from the first screen. Add another screen to your PowerApp, in this example I have just added a blank screen and renamed it to Tasks:

image

Now add a data table to this new screen:

image

With the new data table selected, click the Advanced option in the right pane:

image

Now on the advanced settings pane, in DATA > Items enter:

ProjectOnline.ListTasks(Gallery2.Selected.Id,https://tenant.sharepoint.com/sites/pwa).value

Update the query as required, for example update to the correct gallery name and update to the correct PWA URL.

SNAGHTML2fcefca

Click “Choose the fields you want to add from the customization pane”, in this example I have selected Name and PercentComplete:

SNAGHTML2fefd2e

Now I will add a label at the top of the screen to display the Project Name. With the label added to the screen, select the label and click the advanced setting pane:

image

In DATA > Text starting typing the name of your gallery added to the first screen, select it then type “.” then click selected then “.” then click Name:

image

Now the project name for the first project in the gallery will display:

image

You could look to include an option here to add new tasks if you wanted, the action to use would be: https://docs.microsoft.com/en-us/connectors/projectonline/#creates-new-task

Now we need to add in a control to be able to navigate back to the projects screen, I have just added a left arrow icon then updated the OnSelect property in the advanced settings pane to navigate to the projects screen:

image

Now on the Projects screen we need to update the next icon on the gallery to navigate to the Tasks screen, select the icon and update the OnSelect property on the advanced pane:

image

Now you have an app that will display a list of all projects directly from Project Online, then access the tasks from that selected project.

Next up we will look at create new projects in Project Online using the CreateProject action.

#ProjectOnline #MSProject #Agile updates #Kanban #Scrum #Tasks #PPM #PMOT

March 27, 2018 at 6:48 am | Posted in Administration, Configuration, Customisation, Functionality, Information | Comments Off on #ProjectOnline #MSProject #Agile updates #Kanban #Scrum #Tasks #PPM #PMOT
Tags: , , , ,

There are some updates / improvements to the Agile feature in Project Online Desktop client, these follow on from the first release in October last year: https://pwmather.wordpress.com/2017/10/25/agile-now-available-in-msproject-kanban-scrum-sprints-tasks/ 

These updates are available in the latest release of the Office Insider version of the Office click-to-run client.

Two new features in this release for updating the % complete on boards as you move tasks between a status and the ability to filter tasks on the boards using the summary tasks and resources. These are seen below.

% complete on boards

Opening a board view such as the Backlog Board or the Current Sprint Board you will now see a “Set % Complete” row. As seen on the screenshot below this can also be hidden from the view:

image

Clicking the “Set % Complete” enables you to type the desired % complete for that status:

image

As you move a task into that status column, the task % complete will update as per the % complete value for the column:

image

image

Filters

On the board views you have the ability to filter tasks using the summary tasks and resources:

image

image

You can select multiple values from the two filter menus, the tasks will then filter on the board based on your filters:

image

The filters are not persistent, as you change views the filters will be reset.

A great addition to the agile feature in Project Online Desktop client. If you’re on the Insider version of Office click-to-run, take a look and see what you think.

#ProjectOnline #PowerApps using the Project Online Connector #PPM #Apps #MSProject #O365 Part1

March 14, 2018 at 10:39 pm | Posted in Add-on, Administration, App, Configuration, Customisation | 2 Comments
Tags: , , , ,

I recently published two articles on creating a navigation type app for Project Online using PowerApps, here is a screen shot of the project details screen from that example app:

SNAGHTML28370a07

For those of you that missed those posts, the links are below:

https://pwmather.wordpress.com/2018/02/21/projectonline-powerapps-example-office365-ppm-pmot-apps-msproject-part1/

https://pwmather.wordpress.com/2018/02/24/projectonline-powerapps-example-office365-ppm-pmot-apps-msproject-sharepoint-part2/

That particular example used a SharePoint list as the data source as there were certain properties I needed such as the Project Site URL that are not available in the native Project Online connector for PowerApps. I also stored project images in that source SharePoint list and displayed those in my example app. I used a custom process to populate the SharePoint list with the Project Online data and kept that data in sync. In this series of blog posts we will look at how to use the native Project Online PowerApps connector: https://docs.microsoft.com/en-us/connectors/projectonline/.

This connector allows us to perform certain actions in PowerApps such as read the list of Projects directly from the PWA site collection: https://docs.microsoft.com/en-us/connectors/projectonline/#List_projects or creating a new project: https://docs.microsoft.com/en-us/connectors/projectonline/#Creates_new_project for example.

This series of blog posts wont build a full PowerApp using this connector but it will show snippets on how to use some of the Project Online PowerApps connector functions.

The first one we will look at is displaying a list of projects in PowerApps using the list projects function.

This series of posts assume that you have set up a Project Online Connection to Project Online:

SNAGHTML6a9d36

If you haven’t set up a Project Online connection yet, it is very simple, just click the + New Connection link and find Project Online then add.

Using the PowerApps studio, either desktop or web, we will start with a blank app:

SNAGHTML6d726e

The first thing to do is to add the Project Online data source, click “connect to data”. This will load all of your connections you have added to PowerApps / Flow, select the Project Online connection:

SNAGHTML6edae8

Then close the Data window. Now decide on the visual that you need to display the projects, I inserted a gallery:

image

Then set the layout to just Title as I only will just display the project name for the purpose of this blog post:

image

Click Advanced on the Gallery settings pane and you will notice it states “CustomGallerySample” in the DATA > Items field. Update this to:

ProjectOnline.ListProjects("{PWASiteURL}").value

SNAGHTML7a47c5

Now you can select a property to display on the gallery, in this example I will select Name:

SNAGHTML7d85ba

Now all of your projects will appear in the gallery directly from Project Online:

SNAGHTML9f2a46

In the next post we will look at how to use the ListTasks function in the Project Online PowerApps connector.

#ProjectOnline workaround for Project app link on #O365 waffle app launcher #PPM #PMOT #Office365

March 8, 2018 at 2:42 am | Posted in Administration, App, Configuration, Customisation, Fixes, Functionality, Information | 2 Comments
Tags: , , ,

For organisations that only have one Project Web App (PWA) instance and use /PWA, today using the Project app link on the Office 365 waffle app launcher works as expected. For those organisations that have multiple PWA instances this can be an issue. The link I am talking about can be seen below:

SNAGHTMLc747618

This points to /MyProjects as seen above but when Project Online is present on the tenant it will always redirect to /sites/PWA as seen below:

SNAGHTMLc7422f6

This can be a problem for those customers that either have multiple PWA instances or do not use the default /PWA instance. Unfortunately the Project link on the waffle app launcher is not configurable so one workaround we have done for clients before is to not use the /PWA instance at all apart from using it as a landing page for the other PWA instances in the organisation. If you are in the planning stage for rolling out Project Online and know that you will have multiple PWA instances on the same Office 365 tenant, this might be a good option for you to consider and explore.

Firstly create the following css file that will be used to remove the PWA quick launch menu:

image

Save this on the /PWA site somewhere such as the Style Library:

image

Now edit the PWA homepage and delete the “Track your work” web part and add a content editor web part, in the content editor web part reference the .css file and change the chrome type to None:

SNAGHTMLc73b0f3

Click Apply then click OK and the quick launch will disappear. Add another content editor web part and update the Title to “Project Web App sites” or a more appropriate name as required:

image

Click the new content editor web part where is states click here to add new content then add in the links to all the PWA instances that you have on the tenant using the content editor web part controls – you have lots of options and can make it look as nice as you like. In this example I have just used a simple table:

image

Click Stop editing on the Page tab and you will see the following:

image

Then ensure all users of Project Online have read access to the /PWA site (do not grant higher access as you do not want them incorrectly creating projects here):

image

This way if a user clicks the “Project” app link on the Office 365 waffle app launcher they can at least then easily navigate onto the correct PWA instance.

You could take this even further and have multiple content editor web parts on the page, one for each PWA instance then use SharePoint’s audience targeting feature to show the correct PWA instance/s for the logged on user.

#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

Next Page »

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