Fri. Apr 23rd, 2021

Requirement: I have an inputListOfValues component. Now when the user double-click on the inputListOfValues component it will open the inputListOfValues.

Solution: For the solution of the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application.

Create an ADF Business Components from Tables for the DEPARTMENTS table, present in the HR schema of the Oracle Database.

Create an LOV on the DepartmentName attribute.

Make sure the Default List Type is Input Text with List of Values.

Step 2: Create a demo.jspx page in the ViewController project.

Drag and drop DepartmentsVO1 from the DataControl palette as an ADF Form in the demo.jspx page.

Drag and drop af:resource inside the af:document

Write the below JavaScript inside the af:resource

function openLovOnDblclick(event) {
	var lovComponent = event.getSource();
	if (lovComponent instanceof AdfRichInputListOfValues && lovComponent.getReadOnly() == false) {
		AdfLaunchPopupEvent.queue(lovComponent, true);
	}
}

Drag and drop af:clientListener inside the DepartmentName field and set method=”openLovOnDblclick” type=”dblClick”

Thus, the complete demo.jspx page is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:resource type="javascript">
              function openLovOnDblclick(event) {
                  var lovComponent = event.getSource();
                  if (lovComponent instanceof AdfRichInputListOfValues &amp;&amp; lovComponent.getReadOnly() == false) {
                      AdfLaunchPopupEvent.queue(lovComponent, true);
                  }
              }
            </af:resource>
            <af:messages id="m1"/>
            <af:form id="f1">
                <af:panelFormLayout id="pfl1">
                    <af:inputText value="#{bindings.DepartmentId.inputValue}"
                                  label="#{bindings.DepartmentId.hints.label}"
                                  required="#{bindings.DepartmentId.hints.mandatory}"
                                  columns="#{bindings.DepartmentId.hints.displayWidth}"
                                  maximumLength="#{bindings.DepartmentId.hints.precision}"
                                  shortDesc="#{bindings.DepartmentId.hints.tooltip}" id="it1">
                        <f:validator binding="#{bindings.DepartmentId.validator}"/>
                        <af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>
                    </af:inputText>
                    <af:inputListOfValues id="departmentNameId"
                                          popupTitle="Search and Select: #{bindings.DepartmentName.hints.label}"
                                          value="#{bindings.DepartmentName.inputValue}"
                                          label="#{bindings.DepartmentName.hints.label}"
                                          model="#{bindings.DepartmentName.listOfValuesModel}"
                                          required="#{bindings.DepartmentName.hints.mandatory}"
                                          columns="#{bindings.DepartmentName.hints.displayWidth}"
                                          shortDesc="#{bindings.DepartmentName.hints.tooltip}">
                        <af:clientListener method="openLovOnDblclick" type="dblClick"/>
                        <f:validator binding="#{bindings.DepartmentName.validator}"/>
                    </af:inputListOfValues>
                    <af:inputText value="#{bindings.ManagerId.inputValue}" label="#{bindings.ManagerId.hints.label}"
                                  required="#{bindings.ManagerId.hints.mandatory}"
                                  columns="#{bindings.ManagerId.hints.displayWidth}"
                                  maximumLength="#{bindings.ManagerId.hints.precision}"
                                  shortDesc="#{bindings.ManagerId.hints.tooltip}" id="it2">
                        <f:validator binding="#{bindings.ManagerId.validator}"/>
                        <af:convertNumber groupingUsed="false" pattern="#{bindings.ManagerId.format}"/>
                    </af:inputText>
                    <af:inputText value="#{bindings.LocationId.inputValue}" label="#{bindings.LocationId.hints.label}"
                                  required="#{bindings.LocationId.hints.mandatory}"
                                  columns="#{bindings.LocationId.hints.displayWidth}"
                                  maximumLength="#{bindings.LocationId.hints.precision}"
                                  shortDesc="#{bindings.LocationId.hints.tooltip}" id="it3">
                        <f:validator binding="#{bindings.LocationId.validator}"/>
                        <af:convertNumber groupingUsed="false" pattern="#{bindings.LocationId.format}"/>
                    </af:inputText>
                </af:panelFormLayout>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Save all and run the application. Thus, the ran application is shown below:

Double click on the DepartmentName field and this will load the inputListOfValues component.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 75 total views,  1 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *