Requirement: I have an demo.jspx page. In that page I have a table displaying Student details from STUDENT table. In each row of the Student table in the ADF page I have an Update icon as shown below:

Now, when I click on the Update Icon, it will open a popup which display the details on the row I clicked. Now in the popup the Student_Id field is not updateable. It is read only. Other then Student_id field we can update other attributes. Also in the Popup we will have two buttons: Save and Cancel. On Click of Save button it will commit the changes in the ADF table as well as in the database table . Also it should closed the popup immediately after  Save.

Similarly, on click of Cancel button, it should close the popup and return in the ADF table.

Solution: For solution of the above requirement we will be using the Student table which is created as shown below:

create table student (student_id number(10) primary key, student_name varchar2(20),student_class varchar2(20));

insert into student values (1,'Susanto','MCA');
insert into student values (2,'Moumita','MCA');
insert into student values (3,'Nilesh','BTech');
insert into student values (4,'Veeresh','BTech');
insert into student values (5,'Girish','MTech');

Thus, for solution of the above requirement follow the steps as shown below:

Step1: Create an Oracle ADF Fusion Web Application and named it as ‘UpdateDemo‘.

Step 2: Create an ADF Business Components from table for the Student table. The ADF Business Components should comprise of StudentEO, StudentVO, and ApplicationModule as shown below:

Step 3: Create a demo.jspx page. Now go to the Data Controls and expand AppModuleAMDataControl. Select Student1, and drag and drop Student1 on the demo.jspx page as a ADF Table as shown below:

Check Enable Sorting, Enable Filtering, and Read-Only Table. Also select Single Row radio button as shown below:

Click OK.

Step 4: Drag and drop one column from the Component Palette inside the af:table and name the column as “Update“ . Set the width=”50″ align=”center” for the column. Download the icon for Update as shown:   

Now, drag and drop one af:link inside the Update column. Set the text=” “. Set the icon for the link as icon=”#{resource[‘images:edit.png’]}”.

Step 5: Here we will be descriding the Update functionality. Drag and drop af:popup inside the from and set the launcherVar=”source” contentDelivery=”lazyUncached” eventContext=”launcher” id=”updatePopup”. Create the binding for the af:popup and set the binding as binding=”#{backingBeanScope.MyBean.editPopupBind}”. This is required when we will close the popup immediately after Save action.

Now, drag and drop af:dialog inside the af:popup. Set type=”cancel” title=”Update Student” for the af:dialog.

Drag and drop af:button inside the buttonBar facet and set the text=”Save”. Set the action=”#{backingBeanScope.MyBean.updateStudent}”.

Now, go to the Data Controls and expand AppModuleAMDataControl. Select Student1, and drag and drop Student1 inside the af:dialog of the demo.jspx page as a ADF Form.

Change the Component to use for the StudentId as ADF Output Text with Label as shown below:

Click OK

Step 6: Now we need to pass the selected StudentId, StudentName and StudentClass values inside the af:popup. For this drag and drop three af:clientAttribute inside the Update link. Set the name and value for each  af:clientAttribute. Also drag and drop af:showPopupBehavior inside the af:link and set the popupId=”::updatePopup”as shown below:

<link text="" id="l1" icon="#{resource['images:edit.png']}">
    <clientAttribute name="StudentId" value="#{row.StudentId}"/>
    <clientAttribute name="StudentName " value="#{row.StudentName}"/>
    <clientAttribute name="StudentClass " value="#{row.StudentClass }"/>
    <showPopupBehavior popupId="::updatePopup"/>
</link>

Step 7: Now go to the demo.jspx page and open the Bindings tab. Beside the Bindings section click the green + icon to action action binding as shown below:

Select action and click OK. Expand AppModuleAMDataControl and Expand Operations and select Commit as shown below:

Click OK. This will add the commit action binding in the demo.jspx page as shown below:

Save All the application.

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

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:form id="f1">
                <af:popup launcherVar="source" contentDelivery="lazyUncached" eventContext="launcher" id="updatePopup"
                          binding="#{backingBeanScope.MyBean.editPopupBind}">
                    <af:dialog id="d2" type="cancel" title="Update Student">
                        <af:panelFormLayout id="pfl1">
                            <af:panelLabelAndMessage label="#{bindings.StudentId.hints.label}" id="plam1">
                                <af:outputText value="#{bindings.StudentId.inputValue}"
                                               shortDesc="#{bindings.StudentId.hints.tooltip}" id="ot4">
                                    <af:convertNumber groupingUsed="false" pattern="#{bindings.StudentId.format}"/>
                                </af:outputText>
                            </af:panelLabelAndMessage>
                            <af:inputText value="#{bindings.StudentName.inputValue}"
                                          label="#{bindings.StudentName.hints.label}"
                                          required="#{bindings.StudentName.hints.mandatory}"
                                          columns="#{bindings.StudentName.hints.displayWidth}"
                                          maximumLength="#{bindings.StudentName.hints.precision}"
                                          shortDesc="#{bindings.StudentName.hints.tooltip}" id="it1">
                                <f:validator binding="#{bindings.StudentName.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.StudentClass.inputValue}"
                                          label="#{bindings.StudentClass.hints.label}"
                                          required="#{bindings.StudentClass.hints.mandatory}"
                                          columns="#{bindings.StudentClass.hints.displayWidth}"
                                          maximumLength="#{bindings.StudentClass.hints.precision}"
                                          shortDesc="#{bindings.StudentClass.hints.tooltip}" id="it2">
                                <f:validator binding="#{bindings.StudentClass.validator}"/>
                            </af:inputText>
                        </af:panelFormLayout>
                        <f:facet name="buttonBar">
                            <af:button text="Save" id="b1" action="#{backingBeanScope.MyBean.updateStudent}"/>
                        </f:facet>
                    </af:dialog>
                </af:popup>
                <af:table value="#{bindings.Student1.collectionModel}" var="row" rows="#{bindings.Student1.rangeSize}"
                          emptyText="#{bindings.Student1.viewable ? 'No data to display.' : 'Access Denied.'}"
                          rowBandingInterval="0" selectedRowKeys="#{bindings.Student1.collectionModel.selectedRow}"
                          selectionListener="#{bindings.Student1.collectionModel.makeCurrent}" rowSelection="single"
                          fetchSize="#{bindings.Student1.rangeSize}"
                          filterModel="#{bindings.Student1Query.queryDescriptor}" filterVisible="true"
                          queryListener="#{bindings.Student1Query.processQuery}" varStatus="vs" id="t1">
                    <af:column id="c4" headerText="Update" width="50" align="center">
                        <af:link text="" id="l1" icon="#{resource['images:edit.png']}">
                            <af:clientAttribute name="StudentId" value="#{row.StudentId}"/>
                            <af:clientAttribute name="StudentName " value="#{row.StudentName}"/>
                            <af:clientAttribute name="StudentClass " value="#{row.StudentClass }"/>
                            <af:showPopupBehavior popupId="::updatePopup"/>
                        </af:link>
                    </af:column>
                    <af:column sortProperty="#{bindings.Student1.hints.StudentId.name}" filterable="true"
                               sortable="true" headerText="#{bindings.Student1.hints.StudentId.label}" id="c1">
                        <af:outputText value="#{row.StudentId}" shortDesc="#{bindings.Student1.hints.StudentId.tooltip}"
                                       id="ot1">
                            <af:convertNumber groupingUsed="false"
                                              pattern="#{bindings.Student1.hints.StudentId.format}"/>
                        </af:outputText>
                    </af:column>
                    <af:column sortProperty="#{bindings.Student1.hints.StudentName.name}" filterable="true"
                               sortable="true" headerText="#{bindings.Student1.hints.StudentName.label}" id="c2">
                        <af:outputText value="#{row.StudentName}"
                                       shortDesc="#{bindings.Student1.hints.StudentName.tooltip}" id="ot2"/>
                    </af:column>
                    <af:column sortProperty="#{bindings.Student1.hints.StudentClass.name}" filterable="true"
                               sortable="true" headerText="#{bindings.Student1.hints.StudentClass.label}" id="c3">
                        <af:outputText value="#{row.StudentClass}"
                                       shortDesc="#{bindings.Student1.hints.StudentClass.tooltip}" id="ot3"/>
                    </af:column>
                </af:table>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Step 9: Now go to the MyBean.java class and add the below code inside the updateStudent( ) method

DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding = bindings.getOperationBinding("Commit");
operationBinding.execute();
editPopupBind.hide();
return null;

Thus, the complete MyBean.java class is shown below:

package com.susanto.bean;

import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.view.rich.component.rich.RichPopup;

import oracle.binding.OperationBinding;

public class MyBean {
    private RichPopup editPopupBind;

    public MyBean() {
    }

    public String updateStudent() {
        DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
        OperationBinding operationBinding = bindings.getOperationBinding("Commit");
        operationBinding.execute();
        editPopupBind.hide();
        return null;

    }

    public void setEditPopupBind(RichPopup editPopupBind) {
        this.editPopupBind = editPopupBind;
    }

    public RichPopup getEditPopupBind() {
        return editPopupBind;
    }
}

Step 10: Save all and run the application (demo.jspx). Thus, the ran application is shown below:

When I click on the Update icon of 2nd row that is for row with StudentId as 2, we will get the below popup.

Now, we will update the StudentClass as MBA and click on Save. Thus the popup is closed after saving successfully. The update record is available immediately in the ADF table as shown below:

Now, just for confirmation we will check if the record is updated in the database also. Thus in the below image we can see that the value is updated in the database also.

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

 803 total views,  5 views today