Set the tab order of screen objects

Set the tab order of screen objects to make a screen easier to use from a physical keyboard/keypad rather than from a mouse or touchscreen.

When you press Tab on the keyboard/keypad during project run time, the focus moves to the next object or field on the screen. (This is also known as an object becoming active.) Focus makes it possible to interact with that object or field using only the keyboard/keypad. For example:
  • When the focus is on a button, you may press Return to click/tap that button;
  • When the focus is on a text box, you may type a value into that box and then press Return to enter the value; and
  • When the focus is on list or menu, you may use the arrow keys to navigate the menu and then press Return to make a selection.

If you repeatedly press Tab, then the focus will move through all of the objects in a screen according to the screen’s tab order. By default, the tab order is the same as the layer order, starting with the layer farthest back (ID: 0) and proceeding to the front (ID: n). However, you can draw objects anywhere, rearrange them, and adjust their layers as you develop the screen, so the default tab order of a finished screen may seem to jump around at random rather than move from left to right and/or top to bottom as the user would expect.

You can set the tab order to make it move through the screen exactly how you want it to, independent of the layer order.

To set the tab order:

  1. Open a screen for editing.
  2. Right-click on the screen background, and then click Tab Order on the shortcut menu.
    Note: If Tab Order is not available on the shortcut menu, it may be because you actually right-clicked on a screen object or you have a screen object selected. Make sure you have no screen object selected and you are right-clicking on the screen background.

    The screen enters Tab Order mode, with the order number of each screen object shown in an orange badge at the top-right corner of the object.

    Figure 1. Example of Tab Order mode
    Web Studio Help illus taborder Set the tab order of screen objects

    A group of objects has a single order number for the entire group (e.g., 4), and then the objects within the group have their own sub-order (e.g., 4.1 and 4.2). This continues as deeply as necessary to accomodate nested groups. If you do not see the sub-order numbers, right-click again in the screen and then click Expand All Groups on the shortcut menu.

  3. To quickly set the tab order for all objects, simply click on the objects in the order that you want. The order numbers will update as you click on the objects.
  4. To set the order number for a specific object:
    1. Double-click on the object’s badge. The badge changes to a text input box.
    2. Type the order number for that object. Be sure to included any necessary sub-orders.
    3. Press Return to apply the change.
    Note: You cannot change the sub-order of objects within a Linked Symbol, because it is only a copy of a Master Symbol that is shared across the entire project. Instead, you must edit the Master Symbol itself. For more information, see Save your own project symbols.
  5. When you have finished setting the tab order and want to exit Tab Order mode, right-click on the screen and then click Tab Order on the shortcut menu.

Set the tab order of screen objects