UiPath Apps

The UiPath Apps Guide

Layout and Styling

App Studio offers extensive customization options in terms of app layout using its different container controls and styling options for each of the controls

Position your controls using Layout & Alignment

Customized page layout can be easily created using Container Layout control.
The positioning of our controls within a page or container can be accomplished using the Alignment & Layout options.

Page and Container controls can dictate the position of controls within them by using the direction (Vertical/Horizontal) and Alignment attributes in the Layout section. By default, controls fit themselves in one line. If the "Allow wrapping" property is set, the controls wrap themselves to multiple lines if needed.

📘

Allow wrapping

"Allow wrapping" property when enabled, gets applied when the controls inside the container cannot fit in a line.

Controls within containers can override the parent alignment by using their own alignment option. To default to Parent's alignment, toggle the selected alignment icons to switch off the specific alignment.

📘

Tip - Layout & Positioning

If you want a group of controls to have a specific positioning, place them inside a container and configure the container's layout and alignment.

Resizing your controls

Controls are automatically sized by default. Auto allows the control to take the size of the content within it. For example, If a button control's width and height is set to 'Auto', the size of the button grows/shrinks based on the text in the button.

Specific height and width can also be set. Min Width/Height and Max Width/Height are available under more (...) in the size section.

The units of measurement are %, px (pixels), and em (relative to the font-size of the element). For example, 3em means 3 times the size of the current font).

📘

Tip - Choosing units of measurment

Units of measurement can be chosen either by selecting from the units dropdown or by typing in the units directly using keyboard and press enter. For example, a 50 % width can be set by simply typing 50%.

If no units of measurement are provided, the system defaults to pixels (px).

Customize the font

You can change the way text appears in your app by adjusting the Font Family, Font Size, Font Color, and Font Style (Bold, Italic, Underline) attributes.

Working with Borders

The border section has three properties:

  • Border Thickness
  • Border Color
  • Corner Radius.

Pixels is the unit of measurement for these attributes.

📘

Tip - Circular Buttons using Corner Radius

Circular buttons can be made by modifying the Corner Radius property.

Spacing out controls using Margins & Paddings

Controls and containers can be spaced out using Margins and Paddings.

Margins provide spacing around the controls.

Paddings provide spacing between the control and the content within it.

Container controls have Margins and Paddings while most other controls only have the Margin section available in them.

Both the Margin and Padding section have the ability to unlink Top/Bottom and Left/Right values to set them independently.

Sample App Layouts

To get you started quickly, there are some sample layout apps that can be downloaded and used. Each of the samples is downloadable and can imported as a starting point for a new app.

Sample 1: Sample Dashboard Layout

[Download sample]

Sample 2: Sample Tab Layout

[Download sample]

Sample 3: Sample Top Menu Bar Layout

[Download sample]

Updated 24 days ago


Layout and Styling


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.