Set focus on fields using Javascript

When users enter sales order lines with a barcode scanner or need to move rapidly through a fixed sequence of fields, the default tab order in Business Central is often not efficient enough. By embedding a JavaScript control add-in and wiring it to OnAfterValidate triggers on each field, you can build a precise sequential focus chain that keeps the cursor exactly where the user needs it — without them having to reach for the mouse or tab past irrelevant fields. The pattern is especially useful in warehouse and manufacturing entry scenarios where every extra keystroke slows throughput.

The full source is available on GitHub: nocubicles/FieldFocus.

AL code

The page extension adds a hidden usercontrol that hosts the JavaScript add-in. Each OnAfterValidate trigger on the target field calls a JavaScript function on the control to move focus to the next field in the sequence: No. moves to Quantity, Quantity to Unit Price, Unit Price to Qty. to Ship, and Qty. to Ship to Planned Delivery Date.

pageextension 50100"Sales Order Subform Focus" extends"Sales Order Subform"
{
 layout
 {
 addfirst(content)
 {
 usercontrol(FieldFocusControl;"Field Focus Addin")
 {
 ApplicationArea = All;
 Visible = false;
 }
 }
 }

 trigger OnAfterGetCurrRecord()
 begin
 CurrPage.FieldFocusControl.SetVisible(false);
 end;

 var
 FocusFieldName: Text;

 local procedure FocusField(FieldName: Text)
 begin
 FocusFieldName := FieldName;
 CurrPage.FieldFocusControl.FocusField(FieldName);
 end;

 field("No.") // extends existing field
 {
 trigger OnAfterValidate()
 begin
 FocusField('Quantity');
 end;
 }

 field(Quantity)
 {
 trigger OnAfterValidate()
 begin
 FocusField('Unit Price');
 end;
 }

 field("Unit Price")
 {
 trigger OnAfterValidate()
 begin
 FocusField('Qty. to Ship');
 end;
 }

 field("Qty. to Ship")
 {
 trigger OnAfterValidate()
 begin
 FocusField('Planned Delivery Date');
 end;
 }
}

Update — 09/02/2022: mobile compatibility

The original JavaScript implementation does not work correctly on mobile browsers because the Business Central web client renders fields differently on touch devices. An alternative approach that works on both desktop and mobile uses getElementsByTagName to find all anchor elements in the page, locates the one whose label matches the target field name, and then finds and focuses the nearest input element relative to it.

// Mobile-compatible focus function
function focusFieldByName(fieldCaption) {
 var anchors = document.getElementsByTagName('a');
 for (var i = 0; i < anchors.length; i++) {
 if (anchors[i].textContent.trim() === fieldCaption) {
 var container = anchors[i].closest('[data-control-name]');
 if (container) {
 var input = container.querySelector('input, textarea');
 if (input) {
 input.focus();
 input.select();
 return;
 }
 }
 }
 }
}

This approach is more resilient to changes in the BC rendering pipeline and works across the web client, the Windows client, and mobile browsers. The trade-off is that it relies on the field caption text being stable and unique within the page, so ensure your caption strings match exactly what is rendered in the UI.