Building a simple change request app for #ProjectOnline using the #PowerPlatform #PowerApps and #PowerAutomate #LessCodeMorePower part 1

It’s been a while since I did a post on Project Online due to the release of Project for the web. This is a post I had drafted well over 2 years ago but never got around to finishing. I feel like I’ve neglected Project Online on my blog so this felt like a good post to add.

In this post we will look at building a simple change request app in Power Apps. The components used to build this are:

  • Project Online
  • SharePoint Online
  • Power Apps
  • Power Automate

My example app screens can be seen below. From screen one, see the projects:

Final1

Clicking the arrow displays the tasks for the selected project on the next screen:

Final2

Clicking the + Create Project Change Request button loads a form to create the change request for the selected project:

Final3

Clicking the Create Change Request button submits the change request and displays the submitted success page:

Final4

In part 1 we look at creating the functional app seen above then in part 2 we will look at the Power Automate Flow that runs behind the scenes for the approval and task creation. Firstly set up a new list on the PWA site to hold the change requests, create the columns you need based on your requirements  – in this example I’ve just got the following:

List1

This list will be used to hold the change request items created from the Power App. Navigate to https://make.powerapps.com/ and click Apps > New App > Canvas. Create a blank canvas app either phone layout or tablet layout – I’ve gone with a Tablet layout but either will work. Add a Gallery control onto the canvas:

App1

This needs to be linked to the Project Online data. To do this, select the Gallery control and click Connectors:

App2

This will expand to show the connectors, scroll down to Project Online:

App3

Click Project Online and this will show the connections you already have set up for Project Online – if you do not have any set up click Add a connection.

App4

We now have the Project Online connection added to the app:

App5

With the gallery control selected, click the Advanced option:

App6

Replace the CustomGallerySample in the DATA > Items property with ProjectOnline.ListProjects(“PWASITEURL”).value – replace PWASITEURL with your PWA site URL as seen below:

App7

We now have projects displayed in the gallery – this will be the projects that the account used to set up the Project Online connection can access. The fields aren’t what we want displayed though and the layout of the gallery control needs to be updated. To edit these click the Properties option, firstly change the layout as needed – I went for Title and subtitle:

App8

Now click Edit next to fields:

App9

Then select the fields to use on the gallery labels:

App10

The gallery can easily be updated to add new controls as required but this isn’t covered in the blog post. Now add a new blank screen into the app:

App11

Now add a Data Table control onto the new blank screen and connect it to the Project Online data source:

App12

With the Data Table control selected, click Advanced and update the DATA Items property value to: ProjectOnline.ListTasks(Gallery.Selected.Id,”PWASITEURL”).value – replace PWASITEURL with your PWA site URL and ensure the Gallery name is correct as seen below:

App13

With the Data Table control still selected, click Properties > Edit Fields > Add field:

App14

Add the Task fields as needed – here I added the following:

App15

Now we need to ensure that from the gallery on screen 1, clicking the arrow button transitions the screen to screen 2 with the tasks displayed for that project. Select the arrow on the gallery found in screen1:

App16

This was updated to navigate to screen 2 using the fade transition:

App17

From screen 2 with the tasks displayed we need to ensure users can navigate back to the home screen. With screen 2 selected insert a button / control that will enable the user to return to screen 1:

App18

We now have the ability to load the projects and then see the project tasks then get back to see the project list in the app. Now from screen 2 we want to provide the ability for the user to create a change request. Firstly I’m going to add a new blank screen in like before then from screen 2 add a new control on the page. In this example it is a + icon that provides the link to screen 3 – this formula will need updating once the form is created later on:

App19

Then in screen 3 a Cancel button was added to enable the user to go back to the tasks list:

App20

We have have the simple app that enables the user to navigate between the various screens. Now on screen 3 we need to provide the inputs for the user to raise the change request. To do this add in a new edit form control:

App21

This needs to connect to the Change Request SharePoint list that was set up first. Click connect to data, scroll the list of connectors and select SharePoint Online. Then select the correct SharePoint site, in this case it is my PWA site as that’s where my Change Request list is:

App22

Then select the correct list:

App23

Click Connect. That adds the data source to the app. Using the left menu you can see the data sources available in the app:

App24

With the form control selected, click Advanced and enter the DataSource and also change the Default mode to FormMode.New:

App25

Now click Properties > Edit fields and select the fields to add to the form from the SharePoint list, the example fields I added can be seen below:

App26

Update the field control types as needed. Firstly the ProjectGUID value needs to populate from the selected project and not be editable on the form. To do this firstly unlock the control by clicking the “Unlock to change properties” option on the Advanced menu when selecting the ProjectGUID data card control. Then select the ProjectGUID data card value and update the DATA > Default value to Gallery1.Selected.Id – update for the correct gallery name:

App27

We also want to make this field read-only:

App28

Repeat this for the ProjectName field but instead of using Gallery1.Selected.Id, use Gallery1.Selected.Name to make that read-only and show the Project Name from the gallery.

Now we need a button on the screen to create the change request on the list with the following formula:

App29

We now need to let the user know the change request was raised successfully. For this a new screen was added, this time rather than a blank screen, a success screen was added:

App30

With the form selected, in the Advanced options, set OnSuccess to Navigate(Screen4):

App31

On screen 4 add a button to navigate back home, I added an icon to navigate to screen 1 as well as updating the message on the page:

App32

Now we need to go back to screen 2 and update the formula on the + icon that navigates to the new form to add “NewForm(Form1)” to the OnSelect option:

App33

That gives us the functional app, yes it’s not visually engaging but it does the job – you can improve the UI if required as it is very simple to make great looking apps using Power Apps.

That’s it for part 1, in part 2 we will look at the Power Automate Flow that manages the change request approvals and updates the project plan.

One thought on “Building a simple change request app for #ProjectOnline using the #PowerPlatform #PowerApps and #PowerAutomate #LessCodeMorePower part 1

Comments are closed.

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: