Get Started Building Your First Automation-Powered App

Introduction

UiPath Apps is the easiest way for automation developers to build great-looking interfaces for their automations. 

Apps is more powerful than ever, and we wanted to share a new tutorial with you highlighting some of the latest Apps capabilities like our integration with UiPath Data Service. 

Let’s explore how to create an automation-powered app that makes it super easy to enter data into a legacy financial system from a modern-looking user interface. 

Follow along with this video using these five steps. 

INSERT VIDEO

Build your first automation-powered app 

Prerequisites 

For this tutorial we'll use a sample “legacy application” Stock Trade Logger, a UiPath Apps template, a simple automation workflow, and a Data Service entity. Download them here. 

Step 1 – Upload your App template 

1.1 Sign in to cloud.uipath.com, and navigate to UiPath Apps using the left nav 

1.2 Click “Build A New App"

1.3 Upload this .uiapp file 

Step 2 – Create your new transaction page

2.1 Add three textbox controls for price, quantity, and fees. Our app will input these into the Stock Trade Logger / legacy system and then extract the unique account and transaction ID associated with that order.

2.2 Value bind these textboxes with their associated process inputs from our automation workflow

2.3 Add three labels so that end users can identify the fields

2.4 Provide a total sum by creating an expression

In the Template Total control, write this expression =“$”&In.Price*In.Quantity+In.Fees

Note that when you type “=” you’ll be able to drag/drop In.Price, In.Quantity, and In.Fees fields 

2.6 Query Data Service 

2.7 Click the Results container Select the data context property to reference the entity’s field Type =Lookup(Trades.[Trades.Id,“=”,Out.Trade.Id]

Note that when you type “=” you’ll be able to drag/drop Trades.Id, Out.Trade.Id

2.8 Now every control within this container can directly use your fields. Select these for the AccountId and Created Time textboxes

Step 3 – Preview the app 

3.1 Run the app

3.2 Enter a price, quantity, and fees

3.7 Submit a few more sample transactions to build up a history

Step 4 – Create your transaction history view 

Note that when you type “=” you’ll be able to drag/drop Filter, Trades, Trades.AccountId, and AccountId

Step 5 – Preview your completed app

5.1 Hit Preview to run the app again

5.2 Now we can see the nav bar and go back and forth between the new and history pages

5.3 Note that the transactions you entered before are now reflected in the Transaction History

5.4 Try searching for the account ID 

Congrats! You’ve built your first app! Want to dive deeper? Dig into UiPath Apps with the dedicated Academy course.