Design properties of a control

Configure the design properties for a control such as a tab index, height, width, and style.

Name

Description

Tab index

Defines the order in which controls are selected as the user presses the tab key. For example, if the tab index is set to 1, the control is selected when the form opens. If the tab index is set to 2, you need to press the tab twice to select the control.

If the tab index is set to zero, the control does get focus, but the focus is based on the browser tab order. See Form settings.

The Tab index property is not available for Case health and Process viewer controls.

Width mode

The width of a control can be Fixed (in pixels) or Percentage (relative to the browser window). (Default: Percentage)

When using fixed width, the width specified is applied to each part of the control. For example, if the label is set to 100px and the text box is set to 150px, the total width of the control is 250px. When using percentage, the width includes the fixed width label. For example, if the text box is set to 40% with a label of 100px, the label will always take 100px and the text box will take the rest of the space available to the control.

The default width for Label control in a Fixed mode is 150px.

The percentage option for a control is only available if the form width is set to Percentage mode. TotalAgility supports percentage width for the following controls: Row, Cell, Label, Text box, Calendar, Button, Dropdown list, Radio button list, Check box, Table, Image, Web capture, and Hyperlink.

When using percentage widths on a Desktop form, the default width for the controls is as follows:

Controls	Width in %
Label, Text box, Checkbox, Dropdown list, Calendar, Radio button list, Hyperlink, File upload, Job action button, Activity action button, Language selector, Summary and Resource tree	70
Button (When you apply a smaller width for a button control, the text may appear off center. For more information, see Text appearing off center for Button control.	20
Image	50
All other controls, including the Capture controls	100

Min width: This option is available for touch and non-touch controls, input types, and headings when the Percentage width mode is selected. Use this option to set a minimum size for a control (default value: 0). At runtime, when you view the form and resize the browser, the control resizes proportionally to the window but does not go below the specified minimum width.

When configuring a percentage form with a fixed width control, if the screen is too small to accommodate the width, the control is cut off.

When a capture text field is set to 100% width, it loses space for the validation icons. To make the icons visible, you need to set the right margin to greater than 20 pixels.

When upgrading or importing a form from a previous version with form width mode set as a percentage, the width mode for the control defaults to percentage. However, you can change the width mode to fixed width as needed.

When upgrading or importing a form from a previous version with form width mode set as fixed, the width mode for the control defaults to fixed and cannot be changed.

Use viewport height

Use this property to set the percentage height of a control to prevent scrolling of the page, especially for controls designed to take pictures.

This property is not available for Case health, Dropdown list, Language selector, and Resource selector controls.
For forms with width mode set as a percentage, the "Use viewport height" property is not available for the Label, Text box (single line), Multi-line text, Dropdown list, Checkbox, Calendar, Hyperlink, , Resource tree, Language selector, Radio button list, Capture text field, Capture check box and Capture combo box controls.

Height

The height of the control.

This property is not available for the Label, Text box (single line), Multi-line text, Dropdown list, Check box, Calendar, Hyperlink, Resource tree, Language selector, Radio button list, Capture text field, Capture check box, and Capture combo box controls.

Margins

The margins of the control.

For the Desktop, Touch, and Non-touch Mobile and Tablet forms, the default margins for left, right, top and bottom are 0, 2, 2, 2. The default margins for Column, Row, and Cell controls are 0, 0, 0, 0.

Set the right margin to greater than 20 pixels to make the validation icons visible for a capture text field set to 100% width.

When margins are applied to a control, they are applied within the control itself to create extra space within the control. So, if the width of a control is set to take up 50% of a cell, then the control with its margins will take up exactly half the cell. The size of the control itself will be reduced based on the margins applied.

Style

The style of a control can be a predefined theme, an inline style, or a class. At runtime, the style of the controls corresponds to the style property set at design time.

Theme: Use a predefined theme. (Default)

Themes are defined globally (outside of forms and sites) and are then associated with a site. Forms are rendered as part of a site. The theme associated with the site determines the style for the controls.
Inline: Set the font (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucida Grande, Lucida Grande Unicode, Noto Sans, Times New Roman, Trebuchet MS, and Verdana), font size, alignment, and other options.

Inline style settings override the default theme.

For a Toolbar control, you can only define the background color as an inline style.
Class: Specify the CSS class. This class must be available in the style sheet that is associated with the theme. Otherwise, the control uses the default style.

This property only applies to File upload, Language selector, Resource tree, and all general controls except Tile control.

Property specific to Tile and Chart controls

Add Shadow

Use this property to set the grey border and drop shadow on the Tile and Chart controls at both design time and runtime. (Default: Clear)

Animate

Use this property to set animation on the Tile and Chart controls.

If selected, when you view the form, dashboard for any TotalAgility Apps, or Management console (On-premise), the Tile and Chart controls are animated and slide in from the right.

The Animate property only applies to a Chart control for Management console.

Properties specific to a Button, Job action button, Activity action button, Custom action button , Label, and Headings

Auto

The width mode for a Button, Label, and Heading. This property is only available when you add a button, label, or heading to a percentage or fixed width form (Desktop, Tablet, and Phone). By default, the width mode set for a form is the default width mode for the control.

This option is only available to the label control, but not to the label associated with the controls. For example, a label on a text box.

If the width mode is set to Auto:

The Width property is not available.
The Min width property is available and defaults to 0px.
At runtime, the button, label, and heading on the form resize to fit the text depending on the minimum width set if any.
The button widths are set to Auto when you generate a Create new job form, Activity form, or for a form that is automatically generated when you take an activity that does not have an associated form.

Type

The color for the button. Available options are:

Default: The button without any color.
Primary: The button appears as blue. A primary button is visually different from all other buttons. Use this option for the most used, or main action on a form. For example, the Logon button on a manual login form is set as the primary button.
Success: The button appears as green. Use this option, for example, when you want to indicate that the form is successfully uploaded.
Alert: If selected, The button appears as red. For example, when you want to indicate a warning, then the button is set as the Alert button.

The custom "CSS class" selected for Primary, Success, and Alert button in theme configuration overrides the default style. See Create a theme for more information.

This property is specific to Button controls.

Properties specific to a Table control

Default row

The style for the default row. Available options are:

Theme: The default row of the table takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Header design

The style for the table header. Available options are:

Theme: The header takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Alternate row

The style for the alternate row. Available options are:

Theme: The alternate row of the table takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Selected row

The style for the selected row. Available options are:

Theme: The selected row takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Frame

The style for the frame. Available options are:

Theme: The frame takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Background color

The style to set the background color for a table on a form. Available options are:

Theme (default): The table takes the default theme as the background.
Inline: Select the color scheme using the color selector. The background color of the table appears with the selected color at design time.
Class: The name of the class from the CSS file.

At runtime, you can showcase the background color of the table as per the style selected.

Property specific to a Horizontal rule control

Color

The color style for the control. Available options are:

Theme: The color takes the default theme as the background.
Inline: Select the color scheme.
Class: The name of the class from the CSS file.

Property specific to a List, Work queue, and Workload controls

Alternate row color

Allows alternate row colors in the table of activities.

This property is only applied if a style class is set in the theme.

Property specific to an Embedded page control

Border

Allows the embedded page with or without border. Available options are:

With border: Regular square edges with a border.
Without border (default): Regular square edges without a border.
Rounded corner without border: Rounded corners with no border.

Property specific to Chart, Work queue, Workload, List, and Capture controls

Expand to fit

Allows the control to expand so the control takes up the remaining browser window height. (Default: Selected)

This property is only available if the "Expand last row to fit" property on a form is enabled. See Form properties > Settings.
This property is only available for a row with a vertical layout.
When you add a new cell under the current control, the "Expand to fit" option is only available if the control's row is set as the last row in its column.

To specify a fixed height, clear Expand to fit and set the height.