RPA Connect
English
English
  • Form Design
    • Quick Start
      • Login to RPA Connect
      • Creating a Form
      • Workspace Environment
      • Designing a Basic Form
    • Property Assignment
      • General Properties
      • Appearance
      • Validations
        • Advanced Validations
      • Behavior
        • Advanced Behaviors
    • Comprehensive Form Development
      • Text and Numeric Fields
      • Date and Time Fields
      • Option Selection Fields
      • Other Input Fields
      • Tables
    • Using Common Resources
      • Resource Upload
      • Resource Utilization
    • Workflow Configuration
    • Advanced Options
  • Administration
    • Admin App
      • Accessing Admin App
      • User and Group Management
      • Workspaces
      • Roles and Permissions
    • Integration with Microsoft Entra ID
      • Synchronization Authorization
      • AD Group Management
      • Microsoft Teams Notification Configuration
  • BLUEPRISM
    • Connection with BluePrism
      • Creating an Authentication Credential
      • Generating a Public Form Instance
      • Querying Template Instances
      • Other Actions
        • Instance-Linked Actions
        • File-Linked Actions
        • Stage-Linked Actions
      • Additional Information
  • INTERACTION CHANNELS
    • Instance Management in Teams and the Portal
      • Interface and Common Functions
        • Home
        • Submissions
        • Inbox
      • Activity in Microsoft Teams
      • Portal Features
Powered by GitBook
On this page
  • Columns and Static Elements
  • Input Fields
  • Mask
  • Placeholder
  • Prefix
  • Multiline
  1. Form Design
  2. Property Assignment

Appearance

PreviousGeneral PropertiesNextValidations

Last updated 5 months ago

In the Appearance section, you can configure various options related to the visual presentation of fields in the form. Although these types of properties focus on style or formatting choices that do not directly affect the functionality of the components, it is important to note that they can significantly impact their effectiveness: a clear and user-friendly design will facilitate proper management, while an unintuitive design may hinder it.

Let’s take a look at these properties for the different types of form elements. Remember that you can activate the Preview mode while working to review in real-time how your choices affect the design.

Columns and Static Elements

Both columns and static elements like Text and Image have specific properties that define their positioning on the screen. The Vertical align property is common to all of them and refers to the position of the components relative to the top and bottom margins of the section or column containing them. This property can be set to Top (aligned at the top), Center (aligned in the center), or Bottom (aligned at the bottom).

Another property that only affects columns is Spacing, which refers to the vertical space between elements within the same column. The higher this value, the greater the separation between fields.

The Align property, found in both text and image fields, works similarly but defines the horizontal positioning of the content. This can be set to Left, Center, or Right, indicating alignment to the left, center, or right, respectively.

The Text field offers a richer set of options, with the following properties:

Property
Function

Margin

With values ranging from 0 to 10, this allows you to choose the margin of free space around the text. A lower value positions it closer to other components, while a higher value increases the separation.

Weight

Allows you to set the font weight to Light, Regular, or Bold.

Font style

Allows you to select the text style as Italic or Normal.

Text variant

Offers a series of preconfigured variants with different levels for headings, subtitles, body text, and other options.

Input Fields

Although input fields offer a wider range of options depending on their functionality, most of them include the following appearance properties:

Mask

This property defines a structure for the requested data, determining its possible values. To use this property, you need to understand certain parameters that define the type of characters allowed in each position of the string:

  • The character "a" represents any letter, meaning that when included in the mask, the user can only enter an alphabetic character in that position.

  • The character "0" represents any number. When included in the mask, it only allows values from 0 to 9 in that position.

  • If only a specific letter or number is valid in a position of the string, you must enter the corresponding character in the mask.

  • If a character in the string must specifically be "a" or "0" (since these also serve as generic letter or number placeholders), you must precede it with a backslash "\" to ensure only that specific character is accepted.

  • Other characters like periods or hyphens can be added to the mask so that the entered data adopts this format.

Placeholder

Sets a default text displayed to the user in the field, which can be used to provide examples or suggestions for completing it.

Prefix

Adds an expression as a prefix to the data entered in the field, such as the area code before a phone number.

Multiline

You can choose the value True if you want the field to have multiple lines (for a larger text area) or False if it should be displayed in a single line.

Keep in mind that some field types, such as Date or Attachment, will have fewer properties or may not display this section, as they have a predefined format that does not allow variations. Other fields, like Options or Boolean, will have unique properties specific to their type, as we will see later.

Appearance section and location of the Preview button.
Options for the Vertical align property
Options for the Align property
Options for the Text field
Example of a mask that allows four alphabetic characters and four numeric characters
Adding a suggestion text using Placeholder
Setting a prefix for a phone number
Creating additional space by setting the value True for the Multiline property
Example of configuring Mask with different characters