Fri. May 7th, 2021

Requirement: I have demo.jspx page. In that page I have a button named Add New Employee. On click of Add New Employee button it will open a popup with the blank form to enter the Employee details

Solution: For solution to the above requirement we will use the Employees table present in the HR schema of the Oracle Database XE 11g Edition. Details steps are shown below:

Step 1: Create an Oracle ADF Fusion Web Application and named it as CreateInsertProgrammatically

Step 2: Create an ADF Business Components for an Employees table. The ADF Business Components should comprise of EmployeesEO, EmployeesVO, and AppModule as shown below:

Step 3: Create a demo.jspx in the ViewController project of our application. Inside the demo.jspx page drag and drop an af:button from the component palette. Set the text of the af:button as text=”Add New Employee”.

Now, drag and drop af:popup below the af:button. Inside the af:popup drag and drop an af:dialog.

Now, expand Data Control à AppModuleDataControl à Select EmployeesVO1 and drag and drop inside the af:dialog as ADF Form as shown below:

Step 4: Drag and drop af:showPopupBehavior inside the “Add New Employeeaf:button. Set popupId=”p1″ triggerType=”click” for the af:showPopupBehavior.

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

Click on Add New Employee, thus we will get the below popup. We can see that the form inside the popup is already loaded with values, but our requirement want blank form where we can enter our new Employee details.

Hence, to achieve our requirement we need to write some custom Java code which I will discuss now.

Step 6: Select the af:popup and create popupFetchListener=”#{pageFlowScope.MyBean.popupFetchListener}”.

Now, go to the popupFetchListener inside the MyBean.java and write the below code:

Thus the complete MyBean.java is shown below:

package com.susanto.beans;

import oracle.adf.model.BindingContext;
import oracle.adf.view.rich.event.PopupFetchEvent;

import oracle.binding.BindingContainer;
import oracle.binding.OperationBinding;

public class MyBean {
	public MyBean() {
	}

	public BindingContainer getBindings() {
		return BindingContext.getCurrent().getCurrentBindingsEntry();
	}

	public void popupFetchListener(PopupFetchEvent popupFetchEvent) {
		BindingContainer bindings = getBindings();
		OperationBinding operationBinding = bindings.getOperationBinding("CreateInsert");
		Object result = operationBinding.execute();
	}
}

Step 7: Open demo.jspx page. Go to Bindings and add CreateInsert action bindings as shown below:

Thus, CreateInsert is added in the Bindings as shown below:

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:messages id="m1"/>
            <af:form id="f1">
                <af:button text="Add New Employee" id="b1">
                    <af:showPopupBehavior popupId="p1" triggerType="click"/>
                </af:button>
                <af:popup childCreation="deferred" autoCancel="disabled" id="p1"
                          popupFetchListener="#{pageFlowScope.MyBean.popupFetchListener}">
                    <af:dialog id="d2">
                        <af:panelFormLayout id="pfl1">
                            <af:inputText value="#{bindings.EmployeeId.inputValue}"
                                          label="#{bindings.EmployeeId.hints.label}"
                                          required="#{bindings.EmployeeId.hints.mandatory}"
                                          columns="#{bindings.EmployeeId.hints.displayWidth}"
                                          maximumLength="#{bindings.EmployeeId.hints.precision}"
                                          shortDesc="#{bindings.EmployeeId.hints.tooltip}" id="it1">
                                <f:validator binding="#{bindings.EmployeeId.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.EmployeeId.format}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.FirstName.inputValue}"
                                          label="#{bindings.FirstName.hints.label}"
                                          required="#{bindings.FirstName.hints.mandatory}"
                                          columns="#{bindings.FirstName.hints.displayWidth}"
                                          maximumLength="#{bindings.FirstName.hints.precision}"
                                          shortDesc="#{bindings.FirstName.hints.tooltip}" id="it2">
                                <f:validator binding="#{bindings.FirstName.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.LastName.inputValue}"
                                          label="#{bindings.LastName.hints.label}"
                                          required="#{bindings.LastName.hints.mandatory}"
                                          columns="#{bindings.LastName.hints.displayWidth}"
                                          maximumLength="#{bindings.LastName.hints.precision}"
                                          shortDesc="#{bindings.LastName.hints.tooltip}" id="it3">
                                <f:validator binding="#{bindings.LastName.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.Email.inputValue}" label="#{bindings.Email.hints.label}"
                                          required="#{bindings.Email.hints.mandatory}"
                                          columns="#{bindings.Email.hints.displayWidth}"
                                          maximumLength="#{bindings.Email.hints.precision}"
                                          shortDesc="#{bindings.Email.hints.tooltip}" id="it4">
                                <f:validator binding="#{bindings.Email.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.PhoneNumber.inputValue}"
                                          label="#{bindings.PhoneNumber.hints.label}"
                                          required="#{bindings.PhoneNumber.hints.mandatory}"
                                          columns="#{bindings.PhoneNumber.hints.displayWidth}"
                                          maximumLength="#{bindings.PhoneNumber.hints.precision}"
                                          shortDesc="#{bindings.PhoneNumber.hints.tooltip}" id="it5">
                                <f:validator binding="#{bindings.PhoneNumber.validator}"/>
                            </af:inputText>
                            <af:inputDate value="#{bindings.HireDate.inputValue}"
                                          label="#{bindings.HireDate.hints.label}"
                                          required="#{bindings.HireDate.hints.mandatory}"
                                          columns="#{bindings.HireDate.hints.displayWidth}"
                                          shortDesc="#{bindings.HireDate.hints.tooltip}" id="id1">
                                <f:validator binding="#{bindings.HireDate.validator}"/>
                                <af:convertDateTime pattern="#{bindings.HireDate.format}"/>
                            </af:inputDate>
                            <af:inputText value="#{bindings.JobId.inputValue}" label="#{bindings.JobId.hints.label}"
                                          required="#{bindings.JobId.hints.mandatory}"
                                          columns="#{bindings.JobId.hints.displayWidth}"
                                          maximumLength="#{bindings.JobId.hints.precision}"
                                          shortDesc="#{bindings.JobId.hints.tooltip}" id="it6">
                                <f:validator binding="#{bindings.JobId.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.Salary.inputValue}" label="#{bindings.Salary.hints.label}"
                                          required="#{bindings.Salary.hints.mandatory}"
                                          columns="#{bindings.Salary.hints.displayWidth}"
                                          maximumLength="#{bindings.Salary.hints.precision}"
                                          shortDesc="#{bindings.Salary.hints.tooltip}" id="it7">
                                <f:validator binding="#{bindings.Salary.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.Salary.format}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.CommissionPct.inputValue}"
                                          label="#{bindings.CommissionPct.hints.label}"
                                          required="#{bindings.CommissionPct.hints.mandatory}"
                                          columns="#{bindings.CommissionPct.hints.displayWidth}"
                                          maximumLength="#{bindings.CommissionPct.hints.precision}"
                                          shortDesc="#{bindings.CommissionPct.hints.tooltip}" id="it8">
                                <f:validator binding="#{bindings.CommissionPct.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.CommissionPct.format}"/>
                            </af:inputText>
                            <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="it9">
                                <f:validator binding="#{bindings.ManagerId.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.ManagerId.format}"/>
                            </af:inputText>
                            <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="it10">
                                <f:validator binding="#{bindings.DepartmentId.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>
                            </af:inputText>
                        </af:panelFormLayout>
                        <f:facet name="buttonBar"/>
                    </af:dialog>
                </af:popup>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

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

Click on Add New Employee, thus we will get the below popup with the blank form to enter new Employee details

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

 429 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 *