Home > Paul Mather, Work > #ProjectOnline #PowerApps example #Office365 #PPM #PMOT #Apps #MSProject Part1

#ProjectOnline #PowerApps example #Office365 #PPM #PMOT #Apps #MSProject Part1

Paul Mather
I am a Project Server and SharePoint consultant but my main focus currently is around Project Server.
I have been working with Project Server for nearly five years since 2007 for a Microsoft Gold Certified Partner in the UK, I have also been awared with the Microsoft Community Contributor Award 2011.
I am also a certified Prince2 Practitioner.

This article has been cross posted from pwmather.wordpress.com (original article)

PowerApps aren’t a new feature in Office 365 but not one that I have blogged about before, mainly due to the lack of native support for Project Online, but I have created apps before using PowerApps  – it’s an awesome application! PowerApps provide a great way for users to create powerful business apps without writing code. You can use the same connectors that have use for Flow etc. so there is great support for SharePoint Online but no so much for Project Online. To get around this, the easiest approach is to have your Project Online data in a SharePoint list, I have covered a few examples with code samples before:

https://pwmather.wordpress.com/2018/01/27/projectonline-project-level-html-fields-to-a-sharepoint-list-powershell-ppm-office365/

https://pwmather.wordpress.com/2016/08/26/projectonline-data-capture-snapshot-capability-with-powershell-sharepoint-office365-ppm-bi/

In this series of posts, we will create a simple navigation type app for Project Online using PowerApps. In part 1 we look at getting started and creating / updating the browse / home screen. To do this we will need the Project Online data in a SharePoint list using a similar process as the examples above. This post assumes you already have your Project Online data available in a SharePoint Online list and a process to keep this updated as your Project Online changes, similar to the list below:

SNAGHTML6eb4d2

Access PowerApps from the Office 365 app launcher:

image

This will launch PowerApps:

image

If you haven’t used SharePoint Online in Flow or PowerApps before, firstly you will need to click Connections > New Connections > Type SharePoint in the Search bar and add the SharePoint connection:

image

Once you have the connection you can create the app. To create the PowerApp you can either use the web based PowerApps Studio that can be accessed on the Apps page:

image

Or there is an App available in the Microsoft Store:

image

For the purpose of this blog post I will be using the Windows 10 App but the steps are the same.

Once the App launches, you can Open existing apps:

image

Or create a new one, click the New button:

image

From here you can create an app starting with your data, start from a blank canvas or start from a template. The templates options will present you with template previews to select from:

image

For the purpose of the this blog post and to keep the blog post shorter, we will start with our SharePoint data, if this is your first PowerApp this might be the best option to start with until you’re familiar with PowerApps:

image

Type the URL of the site that contains the list:

SNAGHTML787fc7

Press Go then select the correct list and press Connect, in this example it is ProjectData:

image

PowerApps will then build a working app for you based on the data in your SharePoint list:

image

Once finished, home / browse screen is displayed:

image

Clicking the chevron for a project loads the detail screen:

image

That might be good enough for some scenarios – pretty awesome given it was a click of a button! As mentioned, we will look to make a navigation type app that displays some high level project information so we will make some minor tweaks to the base app PowerApps kindly created for us.

Clicking on different areas on the canvas will enable different settings or you can click the elements using the left hand tree view. The first item we will change is the ProjectData label which by default takes the source list name. This property is the LblAppName1:

image

Moving down the screen, we want to change the search feature so that the search box and sorting work on the Project Name. To do this, select BrowseGallery1 from the left hand tree view, then click Advanced, finally update the Data items. Replace ComplianceAssetId with Title as seen below in two places:

image

The search box and sort icon will now work on the Project Name – in our case this is Title on the source SharePoint list.

Next up we want to see Project Name and Project Owner on the project summary section. Using the left hand tree view, click Title1 then access the Advanced menu. In the DATA section under the Text property, update this to “ThisItem.Title”:

image

Notice the Project Name now appears. Repeat for Subtitle1 and select a different project property or multiple properties, I will set the Project Owner and % complete:

image

I will also change the Body1 property to display the Project Start and Finish Dates:

image

The final change for the browse screen in part 1 of this blog post is to change the IconNewItem1, this is the + symbol in the top right corner. In the default app, this will load the edit screen to create a new list item, for this example we will point this to load the create project page in Project Online. Select the IconNewItem1 from the left hand tree view, replace the OnSelect “NewForm(EditForm1;Navigate(EditScreen1, None) with Launch(https://PWASiteURL/_layouts/15/PWA/Wizards/CreateProject.aspx) and update the tooltip as seen below:

SNAGHTMLb94801

The browse screen should look something like this now:

image

With the ability to search and sort on Project Name:

image

Worth noting is that this project data will not be security trimmed etc.

We have barely touched the surface of PowerApps but that is it for Part 1. In Part 2 we look at updating the detail view and adding in links to navigate to the project in PWA.

Advertisements
Categories: Paul Mather, Work Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: