Welcome > Form Designer module > Form controls > Configure the design of a control

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 Heath 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: 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. To Use Viewport Height.
    1. Click Yes.
    2. Set the Percentage Height of the control to prevent scrolling of the page, especially for a control designed to take a picture.
    • This property is only available for phone and tablet versions of a form.
    • This property is not available for Case Heath, Drop down, Language Selector and Resource Selector controls.
  5. Set the Height of the control.
    Note This property is not available for Radio Button List and Resource Tree controls.
  6. 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.

  7. 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, font size, alignment and other options.

      Inline style settings override the Default theme.

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