Intent

The purpose of this functionality is to allow configuration in the UIF for enter key behavior.

Design

Participants

All components will have a new property for configuring the enter key action.

Component

String enterKeyActionId - Id of the action that should be triggered when the enter key (key up) event is triggered on the component.

CollectionGroup

String addLineEnterKeyActionId - Id of the action that should be triggered when the enter key if invoked on a field in the add line (note if the enter key is specified for a zone in the line it will override).

String lineEnterKeyActionId - Id of the action that should be triggered when the enter key if invoked on a field within an existing collection line (note if the enter key is specified for a zone in the line it will override).

Collaboration

Each component with a configured enter key action creates a zone. When the enter key event occurs on the view, its zone will be found to determine what action should be invoked. This zone if found by finding the nearest ancestor element that has a configured enter key action.

 

<div id="Uif-Page" data-enterkey="save"> <!-- zone 1 -->
 
  <div id="TravelInfoSection data-enterkey="details"> <!-- zone 2 -->
     <input type="text" name="travelerFirstName"/>
     <input type="text" name="travelerLastName"/>
 
     <button id="details" type="button">Details</button>
  </div>
 
  <div id="TravelAccounts">
     <input type="text" name="travelAccount"/>
     <input type="text" name="travelSubAccount"/>
 
     <button id="add" type="button">Add</button>
  </div>
 
  <button id="save" type="button">Save</button>
 
</div>

In the above example, if focus is on the input field with name travelerFirstName, travelerLastName, or the button with id 'details', the action (button) with id 'details' will be triggered. When focus is anywhere outside these elements, the action (button) with id 'save' will be triggered.

There is no limit to the zone nesting level.

Configuration

<bean id="TravelView" parent="Uif-View" p:headerText="Travel View" p:enterKeyActionId="save">
...
</bean>
<bean id="TravelAccountInfo" parent="Uif-VerticalBoxSection" p:enterKeyActionId="details">
...
</bean>

For triggering custom script or other actions on the enter key, add custom script for the key events.

Issues

 

  1. Should we set any defaults? What about actions that are part of collection lines (like the add or delete buttons)?
  2. When focus is on an action (button, link, image), or link, should the default enter key action be to trigger that action and ignore zones (this is default browser behavior for most actions and links, although inputs of type image seem to not get triggered)?
  3. What accessibility concerns need to be addressed? My assumption is this functionality would have no impact on AT devices.

Implementation Notes