Using the Tab Editor to Set Tab Order
  • 17 Feb 2022
  • 2 Minutes to read
  • Dark
    Light

Using the Tab Editor to Set Tab Order

  • Dark
    Light

Overview

The Tab Editor in the Forms Designer enables users to set a sequential order between Form controls and their fields.

Proper configuration of the Tab Editor allows quicker movement from field to the next by selecting the Tab key. Supporting this navigational shortcut provides a smoother user experience for end-users as they fill out the Form.


Setting up a Tab Order

  1. In a Designer Folder, create a new Form and populate it with Form control or open a pre-existing Form with controls. Either will suffice this example.
  2. In the Forms Designer, click the Tab Editor tab on the left column below the Explorer tab.

    Opening the Tab Editor shows the default numbered Tab order of the Form Controls. Selecting a Form Control from the list highlights the control in the Form.
  3. Set the Tab order only for the controls to which the Tab key will apply by entering a new number to each control's tab order field.

    To include a Form control in the Tab order, click on CheckBox for the Form control. To remove it from the order, simply un-check the corresponding box.
    Same Tab order number?
    If two or more values are set to the same number, the Tab order for those controls will occur in the order that they were added to the Designer. 

  4. In this example, the Add button will switch Tab order places with the Cancel Button: it will move from 4th in order to 5th,
  5. Select Apply after changing Tab order settings, and then save and close the Form. 

    Debug

    Run the Form in Flow. Selected Form fields are bordered in orange and notice that this selected Form field changes according to the Tab order when hitting Tab.


Tabbing Options 

In addition to the option for setting Tab Order via the Tab Editor, users may dictate whether or not tabbing within a Form stays restricted to that Form or proceed into another Form if embedded in a Page.

  1. From the Form Designer, design a Form and add the desired amount of controls via the Toolbox tab. This example utilizes the prior example Form.
  2. Open the Form's Properties by selecting the checkered space. Under the TABBING category, view the available settings there.

    Setting NameDefaultFunction
    Restrict Tabbing to FormTrueToggles if tabbing out of the Form is permitted if within an embedded Form. 
    Unchecking this box will allow the browser to handle further tabbing outside of the Form.
    Auto Focus First ControlTrueToggles if  tabbing autofocuses on the control with the lowest number in the Tab Order. 



For further information on Forms, visit the Decisions Forum.

Was this article helpful?