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.

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)

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

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

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.

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 correspond 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 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 Chart and Tile 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)

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

Auto

The width mode for a Button control. This property is only available when you add a Button control to a percentage or fixed width form (Desktop). By default, the width mode set for a form is the default width mode for the control.

Auto resize of a Button control is not supported on Mobile and Tablet forms.

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 shown on the form will resize to fit the text contents considering the minimum width set, if any.
  • When you generate a Create new job, or Activity form, the button widths are set to Auto. When you take an activity that does not have an associated form, the form that is automatically generated has the button widths set to Auto.

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.

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: 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. (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 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.