Configure the design of a control

  1. On the Extended Properties page of a control, click the General tab and in the Design group, configure the control properties.
  2. Define the Tab Index to select the order in which controls are selected as the user presses the tab key. For example, if the tab index is set to1, 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 tab index is zero, the control does not receive focus when tabbing through the controls.
    Note This property is not available for Case Health and Process Viewer controls.
  3. To set the Width Mode for a control, select either option:
    • Fixed: Accept the default width or specify a custom width in pixels, in the Width box.
    • Percentage: Set the width of the control in percentage (default: 100%) to display the control relative to the browser window. The percentage option for the control is only available if the form width is set to Percentage mode.
    Note
    • TotalAgility supports percentage width for the following controls only when the form is set to percentage width mode: Row, Cell, Label, Text Box, Calendar, Button, Drop-down List, Radio Button List, Check Box, Table, Image, Web Capture and Hyperlink. The default mode for the control is percentage. However, you can switch the width mode from percentage to fixed width and vice versa.

    • 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 will be cut off.

  4. Set the Width for a control.
  5. To Use Viewport Height:
    1. Click Yes. (Default: No)
    2. Set the Height (%) of the control to prevent scrolling of the page, especially for a control designed to take a picture.
    Note
    • The Use Viewport Height property is only available for phone and tablet versions of a form.

    • The Use Viewport Height and Expand to Fit properties are mutually exclusive. You can enable either properties on a form.

    • This property is not available for Case Health, Drop-down 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 following controls: Label, Text Box (single line), Drop-down List, Check Box, Calendar, Hyperlink, File Upload, Resource Tree, Language selector, Radio Button List, Capture Text field, Capture Check Box and Capture Combo Box.

  6. By default, the control on the last row expands to fit so the remaining browser window height is taken by the control. To specify a fixed height, click No for Expand to Fit and specify the Height.
    Note
    • This setting is only available on a row that has vertical layout.

    • The Expand to Fit property for a control is only available if the Expand Last Row to Fit property on a form is enabled. See Configure the general properties of a form.

    • The Expand to Fit and Use Viewport Height properties are mutually exclusive. You can enable either properties on a form.

    • The Expand to Fit property is only available for the following controls: Table, Tab, Embedded Page, Mobile Capture, Process Viewer, Work Queue, JobList, Checklist, Web Capture, Document Set, Customer Communication, Workload ,List and capture controls (Scan Create New Job, Scan Activity, Document Review, Verification, Validation).

    • The controls within the Tab control will have the Expand To Fit option, but controls within the capture controls (controls inside configure tab) will not have this option.

    • The Expand To Fit option is available for the controls within the Tab control; but not available for controls within the capture controls (that is, controls inside the Configure option on a form).

  7. Set the Height of the control.
    Note This property is not available for the following controls: Label, Text Box (single line), Drop-down List, Check Box, Calendar, Hyperlink, File Upload, Resource Tree, Language selector, Radio Button List, Capture Text field, Capture Check Box and Capture Combo Box.
  8. Set the Margins of the control.

    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.

  9. To set the Style, select one of the following:
    • Theme: Keep the default 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: Define a style for the control by setting 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: Enter the name of the CSS class. This class is applied to the control only when it is available in the style sheet that is associated with the theme. If the class does not exist in the style sheet, then the control uses the default style.

      Note This property appears for File Upload, Language Selector, Resource Tree Control and all the general controls.