This content has been archived.

Table of Contents

How to override the default tab order of input fields on forms

Summary

When completing work object forms and flow action forms, user inputs by default follow the natural tab order of left-to-right and top-to-bottom.

In special situations, a different tab order is desirable. To change the tab order, you can place a section within a section (Section Include) and the tabs follow the normal order within the first section, then advance to the section that is included. For example, in the layout below, if Section A is the original Section and Section B is the included Section, then the tab order goes from top to bottom in Section A, and then onto Section B.

In addition, to change the tab order for a particular field, create an HTML property rule and assign it the highest tab order within the HTML code.

 

Suggested Approach

In the following examples the default left-to-right and/or top-to-bottom tab order is not necessary.

In this example, the developer wants to include shipping information on the same form as credit card information, on the right, but still have the tab order advance through the credit-card fields before continuing to the shipping address fields.

Using Section Include

  1. Open the Section you wish to tab through first (in this case, Credit Card Information).

    To change the tab order, you can include a Section within a Section, and the tabbing will originate in the original section, after which it will advance to the included Section.

  2. Using Section Include, add the Section you wish to tab through second. Add a Section, click the magnifying glass and in Cell Properties specify which Section to include in Use Section. Click OK. The Section included below is Shipping Information.
  3. Because Shipping Information is the section that is included, tabbing begins at the Credit Card Information section, then proceeds to Shipping Information.

Using the HTML Properties method

  1. Create an HTML Property for the Property you wish to tab to first (if this is not already done).
  2. Click the magnifying glass next to the field you that is to be first in the tab order.
  3. At the Cell Properties dialog, locate the HTML property next to Display As.
  4. Open the HTML Property rule.
  5. Click the HTMLtab.

     

  6. To specify tab order within a particular field, add the HTML tabindex attribute to the field that you wish to tab to first.
    tabindex uses numerical values specifying the order of tabbing – 1 indicates the first tab, 2 the second, and so on.
  7. In this example, the Credit Card field is tabbed first , and the code tabindex="1" is added to the <input> tag.
    .

You can use this procedure to impose the tab order that will make the most sense to users and provide the best accessibility to the form for those who rely on tabbing.

Suggest Edit

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.