- Getting Started
- Demo apps
- How To
- Build Your First App
- Build a Mobile-Friendly App
- General User Experience Guidelines
- Use Master Detail View
- Use Document Viewer
- Use Count With Choice Set Values
- Use Selected Values From a Table
- Embed Apps
- Embed Maps
- Hide Containers Using a Button
- Include MailTo Links
- Include Star Ratings
- Set External Context
- Work With Data Source and Value Bind
- Use the Send Interim Result Activity
- Public Apps
- Notifications
- Using VB Expressions
- Designing your App
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Values
- Rule: Start Process
- Rule: Upload File to Storage Bucket
- Rule: Get File From Storage Bucket
- Rule: Reset Values
- Rule: Create/Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Function: And, Or, Not
- Function: Concat
- Function: Contains
- Function: Count
- Function: EndsWith
- Function: If
- Function: IsBlank
- Function: Guid
- Function: Length
- Function: List
- Function: StartsWith
- Function: Sum
- Function: Sort
- Function: Now
- Function: Today
- Function: Time
- Function: Year
- Function: Month
- Function: Day
- Function: Hour
- Function: Minute
- Function: New
- Function: Lookup
- Function: Filter
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Leveraging Media in your app
- Leveraging Actions in your app
- Leveraging Connections in your apps
- Application Lifecycle Management (ALM)
- UiPath First-Party Apps
- Basic Troubleshooting Guide
Build a Mobile-Friendly App
You can use UiPath Apps to build mobile-friendly apps. The same app can be used on devices with different screen sizes, such as mobile phones, tablets, or computers, without any issues.
To demonstrate this, follow the steps from the Tutorial section.
You can also find a sample app file with more examples at the end of this page.
Use this example to build an app that contains three fields and a submit button. This app behaves differently depending on the screen size.
- Create a new app.
-
Add a Container control to your app.
-
Set the Layout of the container to Horizontal.
-
Check the Allow wrapping property of the container.
-
Configure the Width size of the container as
100 %
.
-
-
Add a Textbox control in the container.
-
Add
Name
in the Label property. -
Change the Label Placement to Top from the Style tab.
-
-
Add a second Textbox control after the first one.
-
Add
Age
in the Label property. -
Change the Label Placement to Top from the Style tab.
-
-
Add a third Textbox control after the second one.
-
Add
Address
in the Label property. -
Change the Label Placement to Top from the Style tab.
-
- Add a second container below the first one with the same Style properties.
-
Add a Button control in the second container.
You can now preview and test your app.
To test your app using the Google Chrome browser, follow the steps below:
- Right-click anywhere on the page.
- Select Inspect from the menu.
- From the menu on the right-hand side, click Toggle device toolbar.
-
Pick the desired dimensions from the dropdown list on the top of the page to test your app.
Note: In the case of the Container layout control, the containers inside are automatically mobile-friendly. If the controls inside the containers need to be reactive as well, use the Allow wrapping property.
For more examples, you can download the sample app file below.