Paul's Project Server and Project Online Blog

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

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:

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:

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:

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:

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:

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

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:

Then click Save:

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:

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

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:

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:

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:

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:

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.