Customizing tab order in AgileАpps Record form

Knowledge base
,
1

Customize tab focus order (tabindex) in AgileApps record form.

The default tab focus order in AgileApps record form section is vertical (Top to bottom). Once all the fields in first column is focused the tab focus will jump to the first item in the second column.

Default behavior (Top to Bottom)

image
image1188×286 7.32 KB

Currently there is no out of the box solution available to configure Left to Right tab focus in the form. However, a similar functionality can be achieved using an “OnLoad” form script for the layout. It will allow users to tab focus horizontally between the columns within the active section.

Modified behavior (Left to Right) with form script

image
image1170×249 7.06 KB

1. Add the following form script to “Reusable Script Functions” section:

function enableL2RTabNavigation() {
   // Parent selector for record detail form (update form only). Modify this selector for other forms, as required.
  const $updateRecordForm = $('aac-record-detail-wip'); 
  // Register click event handler to tab headers. Fields in a section will be available only after activating a tab.
  $updateRecordForm.on('click', '.mat-tab-label', { formContainer: $updateRecordForm }, function (event) {
    applyL2RTabNavigation(event.data.formContainer)
  })
  // initialize the behavior on the first active tab.
  applyL2RTabNavigation($updateRecordForm);
}

function applyL2RTabNavigation(formContainer) {
  const $formContainer = formContainer || null;

  //udpate header tabindex into 1. It ensures the next tab focus will be on the active section's first field
  $('aac-record-form .mat-tab-header .mat-tab-label[tabindex="0"]', $formContainer).attr({ 'tabindex': 1 });

  // Logic to apply left to right column tab focus
  const totalFields = $('aac-record-form aac-rf-fieldset-column aac-dynamic-field', $formContainer);
  const totalFieldsLength = totalFields.length;
  const sectionColumns = $('aac-record-form aac-rf-fieldset-column > .columns-container>div', $formContainer);
  const sectionColumnsLen = sectionColumns.length;
  let currentTabIndex = 2;
  $.each(sectionColumns, function (index, columnItem) {
    const $fieldsinColumn = $('aac-dynamic-field ', columnItem);
    $.each($fieldsinColumn, function (fieldIndex, item) {
      const tabIndexVal = currentTabIndex + (sectionColumnsLen * fieldIndex);
      $('[tabindex="0"]', item).attr({ 'tabindex': tabIndexVal });
    });
    currentTabIndex++;
  })
}

2. Add the following script to “On Load Script”

$(document).ready(function() {
  enableL2RTabNavigation()
});

Solution Approach used

Using jQuery to modify the tabindex attribute value for all the fields present in the record form.

Limitations:
The above code snippet works for most of the field types. However, certain field types would require additional jQuery selector modifications, feel free to customize based on your need.

Disclaimer:
The above code snippet is meant only to demonstrate simple use case, and does not warrant or assure the stability or availability of DOM selectors used in this example.