13 September 2022

Get Started Building Your First Automation-Powered App

13 September 2022

Get Started Building Your First Automation-Powered App

⬅  SEE ALL THE ARTICLES

 

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. 
 
 

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 

    For more on Expressions, check out the documentation portal. 
    2.5 Select the “Submit” button Events and pick the AppsTutorial_TradeLogger process in the Start Process rule
    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.3 Note that our total should now be reflected correctly  
    3.4 Start the process by clicking submit
    3.5 The inputs will be sent to the process, and UiPath Assistant and the Stock Trade Logger open
    3.6 The entity ID will be returned in your app
    3.7 Submit a few more sample transactions to build up a history
Step 4 – Create your transaction history view 
 
    4.1 Go back to App Studio
    4.2 Drag/Drop the Navigation page to the top of your page list. The page at the top is what’s shown to your end users first
    4.3 The Navigation page allows your users to switch between entering a new transaction and seeing the transaction history
    4.4 Go to the Transaction History page, and select the table
    4.5 Write another expression in the Table’s data source. Instead of using a lookup this time, we want to get multiple records. Let’s use a filter with this expression =Filter(Trades,[Trades.AccountId,“contains”,AccountId])
    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

Evan Cohen is a Principal Product Manager, UiPath Apps at UiPath                                                   

by Evan Cohen

TOPICS: UiPath Apps

Show sidebar