Wednesday, October 9, 2013

JQuery Usage in ADF - Simple Example

I just tried to use JQuery in ADF with simple DatePicker example. Refer following steps to show datepicker using JQuery.

  • Import required JQuery & CSS scripts into page using af:resource tag (In this example, I referred scripts from Google CDN & JQuery CDN):

            <af:resource type="javascript" source=""/>
            <af:resource type="javascript"
            <af:resource type="css" source=""/>

  • Add Java Script function to show datepicker: (Additional properties enabled for datepicker to change month, year etc)

            <af:resource type="javascript">
              function pickdate() {
                  showButtonPanel: true,
                  dateFormat: "DD, d MM, yy",
                  changeMonth: true,
                  changeYear: true

  • Add af:inputText component with af:clientListener to trigger Java Script:

            <af:form id="f1">
                <af:panelStretchLayout id="psl1" styleClass="AFStretchWidth" dimensionsFrom="children">
                    <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" halign="center" layout="horizontal">
                            <af:panelBox text="Test JQuery" id="pb1" showDisclosure="false" type="flow">
                                <f:facet name="toolbar"/>
                                <af:inputText label="Select Date" id="it1">
                                    <af:clientListener method="pickdate" type="mouseOver"/>

  • Run your page and click on Input text field to show Date Picker.


Provide your thoughts !