With Microsoft Flow, you can easily send out Approvals with the Start an Approval action. After the approver has responded, you can do something with the output, like sending it to the requester or writing it to SharePoint. Unlike the previous task-driven approvals in SharePoint workflows, you can’t get a simple overview of the entire approval history. That is where Microsoft Flow and PowerApps kicks in.

The case

In this example, I will create a process that needs two approvals. The first approval needs to be performed by a department manager (which is different for each selected department). The second approval starts only when the first approval is approved and needs to be performed by a certain person (which is always the same). The process is complete when both approvals have been approved. Each disapproval will stop the process and inform the requester about to correct what’s wrong and restart the process after correcting it.

Storing your data

I will be storing my approval history in the same SharePoint list from where the approval will be triggered. For this, I will create two new multiline (plain text) columns called ‘ManagerApproval’ and ‘FinalApproval’ where I will save the HTML based approval history from Microsoft Flow. I use the plain text option, because I don’t want SharePoint to append all sorts of HTML encoding (like DIV’s, paragraphs, etc.) to the approval history that possibly might screw up the formatting. Because the first approver is dynamic (based on department), I created a list which stores all departments and a lookup list with the following columns:

• Department, which is a lookup field to the Departments list
• Approver, which is a person field

The SharePoint list which triggers the approval will also contain a lookup field to the Departments list. I also created some columns that I can use to start the process and to show the status of the process (with Column Formatting).

The Flow

I will not go into detail of the Approval part of the Flow, because that is pretty forward. For those of you who haven’t done anything with Approvals within Flow: please refer to this article.

Getting the department manager

Because we have defined our first approver in another SharePoint list, we need to get that value first. There are several ways, but the easiest way is to use the Get items action and configure it so that it will query the Approvers list with the following Filter Query:

DepartmentId eq 'Department Id' (from Dynamic Content)

Given the fact that each Department only exists once in the Approvers list, we can safely use Apply to each and add the Set variable action to set the Approver Email output from out Get items action.

Storing the approval outcome in SharePoint

To store the outcome of each approval to the ‘ManagerApproval’ and ‘FinalApproval’ field we’ve just created, we need to compose the output after each approval so that we have the following information:

• Response date
• Outcome
• Comments (if filled in)
• All previous comments

Response date

The Response date is available in the Dynamic content from the Approval action, but this is not in a friendly format so we need to convert this to a friendly format by using the formatDateTime() expression:

formatDateTime(body('Start_an_approval_with_manager')?['responseDate'],'dd-MM-yyyy')

Where ‘dd-MM-yyyy’ will result into the following date format: 20-09-2018

Outcome

You can use the Response option from the Dynamic content of the Approval action, which is ‘Approve’ or ‘Reject’, but this does not fit well into the context of my Approval history, so I just used plain text, which was ‘Approved’ or ‘Declined’. I also wanted to identify the outcome with color (green for Approved and red for Declined), so I put some HTML around it: <font color=’#008000′>Approved</font> or <font color=’#FF0000′>Declined</font>.

Comments

I want to place the comments within round brackets, but since comments are not required there is a risk of having an empty set of round brackets which doesn’t look that nice. Therefor, we need to check if comments have been entered. We can do this with the if() expression in combination with the empty() expression. Inside the true parameter of the if() expression, we need to concatenate the round brackets with the actual comments by using the concat() expression:

if(empty(body('Start_an_approval_with_Manager')?['comments']),'',concat('(',body('Start_an_approval_with_Manager')?['comments'],')'))

Previous comments

We need to add all previous comments as well, because we want to have the entire approval history, not just the latest. This can easily be done by adding the ‘ManagerApproval’ or ‘FinalApproval’ field from the Dynamic content to your Compose action. The entire Compose action should look like this:

@{formatDateTime(body('Start_an_approval_with_Manager')?['responseDate'],'dd-MM-yyyy')}: <font color='#008000'>Approved</font> or <font color='#FF0000'>Declined</font> @{if(empty(body('Start_an_approval_with_Manager')?['comments']),'',concat('(',body('Start_an_approval_with_Manager')?['comments'],')'))}
@{body('Set_Authorisation_to_In_progress_and_Approval_by_manager_to_Pending')?['ManagerApproval']}

To write this output into the request, simply add the Update item action and add the Output from the Compose action to the ManagerApproval field.

After this, you can add the exact same set of actions to do the final approval.

Showing the approval history

If you’ve ran the flow a few times and collected some feedback, you will see that SharePoint does not show the approval history the way you want it. Because we used the plain text option, all history is shown as HTML.

This is where PowerApps comes in! We need to modify the default SharePoint form to make sure the right formatting is used. To do this, click on PowerApps > Customize forms in the action bar.

This will lead you to PowerApps from where you can modify your form.

Changing the data set

You can customize your data set by opening the Fields pane from your Edit pane. Changing the order can be done by dragging fields up and down. Hiding and showing fields can be done by selecting and deselecting fields.

Changing the form

When you are done with your data set, we can start making changes to our form. As you can see, the status and approval history fields are editable. We don’t want this, because there fields are controlled from the Flow. To make modifications to a field, we first have to unlock the corresponding form card by selecting the card and clicking on the Unlock button in the Advanced tab of the Card pane. This needs to be done for every field you want to change.

To make the field read-only, we have to change the DisplayMode property of the field (not the card!) to ‘Disabled’.

After making sure the status fields are read-only, we want the approval history fields to show the correct markup and not the HTML based text. To do this, we first must hide the current text control by selecting the field and changing the Visible property to ‘false’.

After that we must add a new text control to our card by selecting the card. Via Insert > Text > HTML text, we will add the correct text control to our card.

The default value for this text control is “Show your <b><font color=blue>HTML</font></b> text here.”. We obviously don’t want this text to be shown, so we need to change the HtmlText property of the text control to Parent.Default (which is the default value of this cards’ attribute, which is the approval history field).

After making some modifications on position, size and title (Approval history instead of ManagerApproval), we can publish the form by going to File and clicking on Save, followed by Publish. After publishing, we can return to SharePoint and open the item again to view the result:

Looks much better!