Design properties of a control

Define the tab index, height, width, style and other design properties for a control.

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, the user presses tab twice to select the control.

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

Note 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 in Percentage (relative to the browser window).

Note

The default width mode for a control is Percentage. However, you can switch the width mode from percentage to fixed width and vice versa.
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, Hyperlink, File upload, Language selector, Job action button, Activity action button, Summary and Resource tree.	40
Radio button list	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
Chart and Image	50
All other controls, including the Capture controls	100

When upgrading or importing a form from a previous version with form width mode set as 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.
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 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 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.

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 picture.

Note

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

Height

The height of the control.

Note This property is not available for the Label, Text box (single line), Dropdown list, Check box, Calendar, Hyperlink, File upload, 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.)

Note

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.

Theme: Use a predefined theme.

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.
Note For a Toolbar control, you can only define the background color as 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.
Note This property only applies to File upload, Language selector, Resource tree, and all general controls.

Property specific to a Button, Job action button, Activity action button and Custom action button controls.

Primary button

If selected, the button becomes the primary button. The primary button is visually different from all other buttons and indicates the most used, or main action on a form. For example, when you build a manual logon form, the Logon button is set as the primary button.

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.

Alternative 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.

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.

Note 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: A border with regular square edges.
Without border (default): Regular square edges without a border.
Rounded corner without border: Rounded corners with no border.

Property specific to List and Capture controls

Expand to fit

Allows the control to expand so the control takes up the remaining browser window height.

Note This property is only available if the "Expand last row to fit" property on a form is enabled. See Form properties > Settings.

Your search for returned results.

Search tips

Design properties of a control