- Getting Started
- Before You Begin
- How To
- 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: 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: 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
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Application Lifecycle Management (ALM)
- Basic Troubleshooting 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
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.
When enabled, the Allow wrapping property gets applied if 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.
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.
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 are 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).
Choosing units of measurement
Units of measurement can be chosen either by selecting from the units dropdown or by typing in the units directly using the 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).
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.
You can switch between RGB, HEX, and HSL color by clicking on the arrows next to the color value.
The border section has three properties:
- Border Thickness
- Border Color
- Corner Radius.
Pixels are the unit of measurement for these attributes.
Circular Buttons using Corner Radius
Circular buttons can be made by modifying the Corner Radius property.
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.
