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. There is a connector in preview but it doesn’t return the properties I needed for this example. 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:
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:
Access PowerApps from the Office 365 app launcher:
This will launch PowerApps:
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:
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:
Or there is an App available in the Microsoft Store:
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:
Or create a new one, click the New button:
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:
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:
Type the URL of the site that contains the list:
Press Go then select the correct list and press Connect, in this example it is ProjectData:
PowerApps will then build a working app for you based on the data in your SharePoint list:
Once finished, home / browse screen is displayed:
Clicking the chevron for a project loads the detail screen:
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:
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:
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”:
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:
I will also change the Body1 property to display the Project Start and Finish Dates:
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:
The browse screen should look something like this now:
With the ability to search and sort on Project Name:
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.