Welcome > User interface > Forms > Toolbox > General controls > Design properties of a control

Design properties of a control

Configure the design properties for a control such as 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 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.

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). (Default: Percentage)

Note

  • When you select Percentage width mode, the Min width option is available. (Default value: 0)

    1. It allows you to set a minimum size for a control.

    2. This option is available for touch and non-touch controls, input types and headings.

    Note When you view the form at runtime (after setting the min width) and resize the browser, the control resizes proportionally to the window but does not set below the minimum width.

  • 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

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

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

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), Multi-line text, Dropdown list, Checkbox, 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), Multi-line text, 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. (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.

    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.

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.

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 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. To specify fixed height, clear Expand to fit and set the height. (Default: Selected)

Note

  • 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 on a row that has vertical layout.

  • When you add a new cell under the current control, the Expand to fit option is not displayed. To view this option, you must have the control's row as the last row in its column.