Monday, April 30, 2012

ADF: Default cursor/focus to input field using javascript


Sometimes when default properties won't work, we can use JS to set initial focus.
  • jquery is required & can be downloaded from (http://jquery.com/).
  • A dummy <af:clientAttribute> is added for field on which initial focus is required.
  • A <af:clientListener> method is added on "load" type.
<f:view>
    <af:document id="d1">
      <f:facet name="metaContainer">
        <af:resource type="javascript" source="/jquery-1.7.min.js"/>
        <af:resource type="javascript">
          function onLoadFocus() {
              $('input[type="text"]').each(function () {
                  if (isDefaultFocusField(this.name) == 'Y') {
                      this.focus();
                  }
              });
          }

          function isDefaultFocusField(compId) {
              try {
                  var adfComp = AdfPage.PAGE.findComponentByAbsoluteId(compId);
                  return adfComp.getProperty("defaultFocusField");
              }
              catch (err) {
              }
          }
        </af:resource>
      </f:facet>
      <af:form id="f1">
        <af:panelStretchLayout id="psl1">
          <f:facet name="center">
            <af:panelGroupLayout layout="scroll" id="pgl1">
              <af:inputText label="Label 1" id="it1">
                <af:clientAttribute name="defaultFocusField" value="Y"/>
              </af:inputText>
              <af:inputText label="Label 2" id="it2"/>
            </af:panelGroupLayout>
            <!-- id="af_one_column_stretched"   -->
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
      <af:clientListener type="load" method="onLoadFocus"/>
    </af:document>
  </f:view>
Note: http://lspatil25.blogspot.in/2012/05/adf-make-findcomponentbyabsoluteid-js.html

No comments:

Post a Comment