Tab Support and Fields Focus in the Visualizer forms Follow

Keyboard Navigation

• Use Tab to move forward between fields and Shift + Tab to move back.
• Press Enter or Space to interact with a field (e.g., select a checkbox).
• Open the list of options in an LOV with the Down arrow or Enter for a dropdown.
• To select a value, press Enter.

Date picker Navigation

• PAGE UP: Previous month
• PAGE DOWN: Next month
• CTRL + PAGE UP: Previous year
• CTRL + PAGE DOWN: Next year
• CTRL + HOME: Open datepicker
• CTRL/COMMAND + HOME: Current month
• CTRL/COMMAND + LEFT: Previous day
• CTRL/COMMAND + RIGHT: Next day
• CTRL/COMMAND + UP: Previous week
• CTRL/COMMAND + DOWN: Next week
• ENTER: Select focused date
• CTRL/COMMAND + END: Close datepicker and clear date
• ESCAPE: Close datepicker without selecting

Advanced Features

1. Use Fields.focus(<FieldName>) to focus on a specific field.
2. Each time Focus.init() runs, it refreshes the list of focusable elements and defaults to the first visible and enabled field. 
   To change the default behavior, modify the configuration file in the common JavaScript section. The default configuration object is:

app.autoFocusConfig = {

    autoFocusFirstElement: true,

    autoFocusOnServiceCall: true,

    focusElementId: null, // optional, moe relevant at a page level

    autoFocusPagesConfig: {} // optional

};

• autoFocusFirstElement: Determines if Focus.init() forces focus on the first element in the focusable list.
• autoFocusOnServiceCall: Specifies whether to recalculate the focusable elements after a service call without changing the current focus.
• focusElementId: An optional field to specify a unique element for focus.

You can add specific logic for individual pages using the autoFocusPagesConfig field. For example:

app.autoFocusConfig = {

    autoFocusFirstElement: true,

    autoFocusOnServiceCall: true,

    autoFocusPagesConfig: {

        "login": {

            autoFocusFirstElement: false

        },

        "customers": {

            focusElementId: "customerName"

        }

    }

};