X

The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

How-to define a default action for page fragments

Frank Nimphius
Master Principal Product Manager

The af:form
component has a DefaultCommand
property that, when set to the component Id of a command component like af:commandButton
invokes the associated command action when the enter key is pressed anywhere in
this form. However, if the form fields are contained in a page fragment exposed
in a region then using the DefaultCommand
property may not be an option as it is difficult to predict the command button id
and its surrounding naming containers.

A solution to this is to use JavaScript on the UI input components
that, when the Enter key is pressed
virtually press a button within the page fragment (note that the af:form element
belongs to the parent page and that you can only have a single af:form component per
browser page)

Let's assume a page fragment with a single input text component
and a command button to press:

<af:panelFormLayout id="pfl1">
<f:facet name="footer">
<af:commandButton text="Print Field Value" id="cb1" partialSubmit="true"                                            
clientComponent="true" action="#{View1Bean.onButtonPressed}"/>
  </f:facet>
   <af:inputText label="Enter Field" id="it1" binding="#{View1Bean.inputTextField}">
      <af:clientListener method="onFieldEnterKey" type="keyUp"/>
   </af:inputText>  
</af:panelFormLayout>

The command button is bound to a managed bean action method.
By default, the action method is invoked when users press the command button. However,
with the JavaScript shown next, this can be simulated and mapped to the Enter key press in the text field.

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af=http://xmlns.oracle.com/adf/faces/rich
          xmlns:f="http://java.sun.com/jsf/core">
<af:resource type="javaScript">
   //function called by the client listener
  function onFieldEnterKey(inputEvent){
    if (event.getKeyCode() == AdfKeyStroke.ENTER_KEY) {
      //get the input text component from the event           
      var inputTextField = inputEvent.getSource();
      //the button is relative to the input text field so
      //relative search will do with no worrying about naming
      //containers
      var defaultButton = inputTextField.findComponent('cb1');
      //perform a partial submot
   var partialSubmit = true;
      AdfActionEvent.queue(defaultButton,partialSubmit);
      //Enter key does not need to go to server as we
      //queued a new event
       event.cancel();
   }
}
</af:resource>

For JavaScript to work, note the use of the af:clientListener on the input text field and
the use of the clientComponent="true"
configuration on the button.

Join the discussion

Comments ( 1 )
  • Amine KAAOUA Friday, March 9, 2018
    Thank you for the post. so there is an other simple solution.
    The af:subform component has also defaultCommand property. you can use subform in each fragment you want to define a default action.
    Ex:
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.