2 Replies Latest reply: Mar 4, 2013 2:17 AM by Frank Nimphius-Oracle RSS

    Tab traversal sequence in panelFormLayout


      How to change tab traversal sequence in panelFormLayout to Left to Right and Top to Bottom Z pattern.
      Currently it is following Top to bottom and then left to right
      using Jdev Version

        • 1. Re: Tab traversal sequence in panelFormLayout
          Sachin Saxena
          Put multiple PanelFormLayout instead of one and inside one panelform layout put all the component in one column only. See the example below :

          PanelGroupLayout - horizontal
          -- PanelFormLayout
          -- inputText
          -- inputText
          -- PanelFormLayout
          -- inputText
          -- inputText

          Code Snippet -

          <af:panelGroupLayout id="pgl1" layout="horizontal">
          <af:panelFormLayout id="pfl1">
          <f:facet name="footer"/>
          <af:inputText label="Label 1" id="it1"/>
          <af:inputText label="Label 1" id="inputText1"/>
          <af:inputText label="Label 1" id="inputText2"/>
          <af:panelFormLayout id="panelFormLayout1">
          <f:facet name="footer"/>
          <af:inputText label="Label 1" id="inputText3"/>
          <af:inputText label="Label 1" id="inputText4"/>
          <af:inputText label="Label 1" id="inputText5"/>
          <af:outputText value="outputText1" id="outputText3"/>
          • 2. Re: Tab traversal sequence in panelFormLayout
            Frank Nimphius-Oracle

            another more complicated approach is to use JavaScript

            1. add an af:clientAttribute to each input component and name it tabIndex. The value of the tabIndex attribute should be the index the filed has in teh tab order
            2. Add a clientListener to all input fields that listens for the keyUp event
            3. In the JS function called from the clientListener, check if the key pressed is the tab key
            4. If tab has been pressed, call cancel() on the event argument
            5. Access the component's clientAttribute to get its index
            6. Access the panelformLayout component to access its child components
            7. Iterate the child components until you find a clientAtrribute with index+1
            8. On the component having the clientAttribute value index+1, call focus();

            I know this is not a declarative solution, but one that allows you to implement any kind of field tab order you want (plus the ability to change it at runtime)