Automate web apps with UI Flows

So UI Flows for Power Automate is now general available! UI Flows is the new Robotic Processing Automation capability for Power Automate. For my talk on UI Flow during Dynamics Saturday Amsterdam I played around with the public preview. In this blog I will write about my experience automating a web app with UI Flows.

Let’s begin with a short explanation what Robotic Process Automation (or RPA) is and how it compares to Power Automate. The concept of RPA is around for some time now. RPA wants to automate user tasks just as Power Automate. However RPA does so by exactly mimicking the input done by the user. You record the mouse clicks and keyboard inputs and the robot replays those. While Power Automate is a Digital Process Automation tool who utilizes API’s wrapped in connectors to automate the tasks.

Power Automate bridges modern systems with legacy systems
Power Automate bridges modern systems with legacy systems

Microsoft bridges the gap between RPA and Power Automate with UI Flows. UI Flows are great for automating tasks on applications where there are no API’s available. So in my company we have one such application, we use it for our time registration. As a consultant I am scheduled to work for different customers. After my working week I register the time I worked for this customer. This is a mundane and simple task which I really want to automate.

Create the UI Flow

So let’s go through the steps to automate this process. You need to install all necessary tools and add-ons, The documentation page guides you through with ease. The first step is to record the actions you want to automate by using the Selenium IDE. Selenium Integrated Development Environment is a record/run tool that a test case developer uses to develop Selenium Test cases. This tool is from the Selenium Test Suite. UI flows uses this open source tool to create automation.

Time Registration for my parental leave
Time Registration for my parental leave

Create a new UI Flow for a web application and enter the address of the webpage. This will bring up the Selenium IDE. The startup screen can be a bit overwhelming, however just start recording by pressing the record button in the top right. This brings up the webpage where I enter a record for time registration, which I normally do at the end of the working week. Switch back to the Selenium IDE and press the stop button.

Selenium Finished Recording
Selenium Finished Recording

As a result in the Selenium overview all the steps are recorded. In this screen we can test if the automation works, add manual steps if needed and change entries to variables. What is very neat is the integration with Power Automate Flow. After I press save it switches back to my flow. The flow immediately recognizes the variable that I add to the UI Flow, so it adds an input option. This is pretty sweet, no need to refresh the Power Automate Flow, you can immediatly continue your work! See the short clip below to see this in action.

Setting a variable in the UI Flow integrates nicely with a Power Automate flow

Integrate the UI Flow into Power Automate Flow

Overview of the Power Autome Flow used for time registration
Overview of the Power Automate Flow used for time registration

Now that the UI Flow is ready, let’s finish up the Power Automate Flow. I want to enter my time registration on a weekly basis so I create a manual trigger with a start date and end date as input. With these input parameters I query my outlook agenda to retrieve all appointments. I filter these appointments based on a type specifically for customer planning. The result of these actions I want to enter in my time registrations, so I loop through them.

Inside this loop is where I call the UI Flow build earlier. However my agenda item only has the customer name and not the specifics for example a project name or activity type. That is why I created an excel file containing this information. From the outlook agenda I am able to calculate the hours I am scheduled to work, using the following expression:

ticks(items('Apply_to_each')?['start'])
Overview of the apply to each agenda item in the Flow
Overview of the apply to each agenda item in the Flow

Now we are ready to call the UI Flow! It is as easy as selecting any other Power Automate Flow action. Choose the “Run a UI Flow for web” action, fill in the required properties and you are good to go! In my example the parameters are mostly results from the retrieve excel action except dayofweek and hours.

Dayofweek is calculated by using the dayOfWeek expression. This integer value I use in my UI Flow to determine which hour field I need to submit my hours worked.

dayOfWeek(items('Apply_to_each')?['start'])

I calculate Hours using the StartTimeTickValue and EndTimeTickValue to enter:

div(div(mul(sub(outputs('EndTimeTickValue'),outputs('StartTimeTickValue')),100),1000000000), 3600)

Use Power Automate Flow as much as possible

In this example you see I use Power Automate Flow for the automation, the trigger and other data sources. This is my advice to you, use Power Automate Flow as much as possible for your automation scenario’s with UI Flows. Only use UI Flow when there are no connectors or APIs available for the application you want to automate.

This concludes my write-up about my experience with UI Flows for web applications. I am pleasantly surprised with how easy it is to start automating apps where no connectors are available. Also UI Flows integrates very nice with Power Automate and updates and bug fixes are coming each month. In my next post I will show you an example of what you can do with UI Flows for desktop applications.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *