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

May 24, 2018 at 7:24 pm | Posted in Administration, Functionality, Add-on, Customisation, Information, Configuration | 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.

Advertisements

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

May 21, 2018 at 12:01 pm | Posted in Administration, Functionality, Add-on, Customisation, Information, Configuration | 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 time phased data rollup for #OData reporting note #PPM #PMOT #BI

May 14, 2018 at 11:06 am | Posted in Administration, Configuration, Functionality, Information, Reporting | Leave a comment
Tags: , , ,

Just a quick post to highlight a feature in Project Online when changing the rollup of timephased reporting data in Project Online as posted here:

https://pwmather.wordpress.com/2017/11/17/projectonline-time-phased-data-rollup-for-odata-reporting-ppm-pmot-bi-excel-powerbi/

As per the Microsoft support article below:

https://support.office.com/en-us/article/Configure-rollup-of-timephased-reporting-data-in-Project-Online-da8487fe-899e-4510-a264-e2ebc948928c

This mentions only the following endpoints in relation to this change:

image

You will also find that the ResourceDemandTimephasedDataSet endpoint is also impacted by this reporting setting if your projects are set to calculate the resource utilisation from the Project Plan / Project Plan Until. For example, if you have the timephased data setting set to Never as seen below and your projects resource utilisation is set to the Project Plan, the resource demand for those projects will not appear in the ResourceDemandTimephasedDataSet endpoint.

image

Just something to be aware of.

Change required for #SharePoint Online / #ProjectOnline REST API calls when using WebRequest #PowerShell #dotnet #office365dev

May 9, 2018 at 7:00 am | Posted in .Net, Administration, Customisation, Functionality, Information, Issue, PowerShell | Leave a comment
Tags: , , , ,

Just a quick blog post to highlight a change the is required when querying Project Online / SharePoint Online REST APIs in code when using the WebRequest class. Previously the PowerShell code sample below would work and authenticate with no issues:

#add SharePoint Online DLL - update the location if required
$programFiles = [environment]::getfolderpath("programfiles")
add-type -Path $programFiles'\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll'

#set the environment details
$PWAInstanceURL = "https://PWAURL"
$username = "username" 
$password = "password"
$securePass = ConvertTo-SecureString $password -AsPlainText -Force

#set the Odata URL with the correct project fields needed,
$url = $PWAInstanceURL + "/_api/ProjectData/Projects()?`$Filter=ProjectType ne 7&`$Select=ProjectId,ProjectName,ProjectPercentCompleted,ProjectOwnerName"

#get all of the data from the OData URL
[Microsoft.SharePoint.Client.SharePointOnlineCredentials]$spocreds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $securePass)  
$webrequest = [System.Net.WebRequest]::Create($url)
$webrequest.Credentials = $spocreds
$webrequest.Accept = "application/json;odata=verbose"
$webrequest.Headers.Add("X-FORMS_BASED_AUTH_ACCEPTED", "f")
$response = $webrequest.GetResponse()
$reader = New-Object System.IO.StreamReader $response.GetResponseStream()
$data = $reader.ReadToEnd()
$results = ConvertFrom-Json -InputObject $data
$results.d.results 

There has been a change in Office365 and this would now generate a 401 unauthorized error as seen below:

image

It is now required to use the authentication cookie, not sure if this is a permanent change or a temporary issue. Adding the line below resolves the issue:

$webrequest.Headers["Cookie"] = $spocreds.GetAuthenticationCookie($url)

#get all of the data from the OData URL
[Microsoft.SharePoint.Client.SharePointOnlineCredentials]$spocreds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $securePass)  
$webrequest = [System.Net.WebRequest]::Create($url)
$webrequest.Credentials = $spocreds
$webrequest.Accept = "application/json;odata=verbose"
$webrequest.Headers["Cookie"] = $spocreds.GetAuthenticationCookie($url)
$webrequest.Headers.Add("X-FORMS_BASED_AUTH_ACCEPTED", "f")
$response = $webrequest.GetResponse()

This change would be applicable to all of my PowerShell code samples that query the Project Online OData API found here: https://gallery.technet.microsoft.com/site/search?f%5B0%5D.Type=User&f%5B0%5D.Value=PWMather&sortBy=Date

Hope that helps

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

April 26, 2018 at 10:01 pm | Posted in Add-on, Administration, Configuration, Functionality, Information | Leave a comment
Tags: , , , ,

In part three of this series of blog posts we will look at using the CreateProject 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/ and part 2: https://pwmather.wordpress.com/2018/04/11/projectonline-powerapps-using-the-project-online-connector-ppm-apps-msproject-o365-part2/

The CreateProject action is: ProjectOnline.CreateProject({“PWASiteURL”}, {“ProjectName”},{Optional parameters}). As you can see, there is the PWA Site as one required parameter and the Project Name as the other. There are also optional parameters for description and start date as documented here. In this post we will add a new page to our example PowerApp to provide inputs to the parameters for the CreateProject action. Add a new blank screen to the PowerApp, in this example I called the new page NewProject:

image

Next I added a label to the page to add “Create a new project:” then two text input boxes, one for the Project Name and one for the Project Description. The two text input box properties were updated to remove the default text and add hint text as seen below for the Project Name input box:

image

Next a date picker was added to select the project start date along with two buttons, one to create the project and one to cancel / navigate back to the homepage. The button text was updated as required and the back button OnSelect property updated to navigate to the Projects page:

image

The create button action for OnSelect would be ProjectOnline.CreateProject(“PWAURL”, TextInput1.Text,{Description: TextInput2.Text, Start: DatePicker1.SelectedDate}) as seen below:

SNAGHTML1164f9e

Update the control references such as TextInput1 as required. That is the minimum needed to create a new project but really there should be checks to ensure the name is set as that is a required parameter and also do things like clear the inputs once the project is created / navigate back the homepage automatically. Below is a simple example to ensure the project name input is not blank. Firstly add a new label with the text “Project Name is empty” then add a X icon:

image

Now select both of those elements from the left menu and group them together:

image

Now set the group visible property to Off:

image

Select the X icon and update the OnSelect action to UpdateContext({alert:false}):

image

Select the grouping then select the Visible property and change the value from false to alert:

image

Now click the Create button as the OnSelect action needs to be updated to If(IsBlank(TextInput1.Text),UpdateContext({alert:true}),ProjectOnline.CreateProject(“PWAURL”, TextInput1.Text,{Description: TextInput2.Text, Start: DatePicker1.SelectedDate})) as seen below:

SNAGHTML12b8166

Update the control references such as TextInput1 as required. Now if the Project Name input, in my example TextInput1, is empty the alert will be displayed with the X to close the alert:

image

The final part of this app is to add a button / icon from the home screen to be able to create a new project by navigating to the NewProject screen:

image

That’s it for now but hopefully enough to get you started with the Project Online Connector for PowerApps, there are more actions available for this connector and so much more you can do with PowerApps! Look out for more Project Online related PowerApps blog posts in the future.

#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 | 1 Comment
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 | Leave a comment
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 »

Blog at WordPress.com.
Entries and comments feeds.