Requirement: I have an delete.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 a Delete icon as shown below:
Now, when I click on the Delete icon it will show the popup with the message “Are Sure to Delete this Product Id? <StudentId>“. And there will be two buttons : Yes and Cancel. On click of Yes button it will delete the Student record for that particular StudentId and will return to the Student table. Also it should refresh the Student table automatically.
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 ‘DeleteDemo‘.
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 delete.jspx page. Now go to the Data Controls and expand AppModuleAMDataControl. Select Student1, and drag and drop Student1 on the delete.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 Pallete inside the af:table and name the column as “Delete“ . Set the width=”50″ align=”center” headerText=”Delete” for the column. Download the icon for Delete operation as shown:
Now drag and drop one af:link inside the Delete column. Set the text=” “. Set the icon for the link as icon= “#{resource[‘images:delete.png’]}”
Step 5:. Drag and drop af:popup inside the from and set the launcherVar=”source” contentDelivery=”lazyUncached” eventContext=”launcher” id=”deletePopup”. Create the binding for the af:popup and set the binding as binding=”#{backingBeanScope.MyBean.deletePopupBind}”. 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=”Delete Student” for the af:dialog.
Drag and drop af:button inside the buttonBar facet and set the text=”Yes”. Set the action=”#{backingBeanScope.MyBean.deleteStudent}”.
Now go to the Data Controls and expand AppModuleAMDataControl. Select Student1, and drag and drop Student1 inside the af:dialog of the delete.jspx page as a ADF Form. Here we will keep only the StudentId attribute and delete the other attributes as we don‘t want to display the StudentName and StudentClass. Change the Component to use for the StudentId as ADF Output Text with Label as shown below:
Set the af:panelLabelAndMessage as label=”Are Sure to Delete this Product Id?”
Step 6: Now, we need to pass the selected StudentId value inside the popup. For this drag and drop af:clientAttribute inside the Delete icon. Set the name and value for the af:clientAttribute. Also drag and drop af:showPopupBehavior and set popupId=”::deletePopup” as shown below:
<link text="" id="l1" icon="#{resource['images:delete.png']}">
<showPopupBehavior popupId="::deletePopup"/>
<clientAttribute name="StudentId" value="#{row.StudentId}"/>
</link>
Step 7: Now, go to the delete.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 delete.jspx page as shown below:
Save All the application.
Step 8: Thus, the complete delete.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="delete.jspx" id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:popup launcherVar="source" contentDelivery="lazyUncached" eventContext="launcher" id="deletePopup"
binding="#{backingBeanScope.DeleteBean.deletePopupBind}">
<af:dialog id="d2" type="cancel" title="Delete Student">
<af:panelFormLayout id="pfl1">
<af:panelLabelAndMessage label="Are Sure to Delete this Product Id?" 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:panelFormLayout>
<f:facet name="buttonBar">
<af:button text="Yes" id="b1" action="#{backingBeanScope.DeleteBean.deleteStudent}"/>
</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" width="50" align="center" headerText="Delete">
<af:link text="" id="l1" icon="#{resource['images:delete.png']}">
<af:showPopupBehavior popupId="::deletePopup"/>
<af:clientAttribute name="StudentId" value="#{row.StudentId}"/>
</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 DeleteBean.java class and add the below code inside the deleteStudent( ) method
BindingContext bindingctx = BindingContext.getCurrent();
BindingContainer binding = bindingctx.getCurrentBindingsEntry();
DCBindingContainer bindingsImpl = (DCBindingContainer) binding;
DCIteratorBinding dciter = bindingsImpl.findIteratorBinding("Student1Iterator");
ViewObject vo = dciter.getViewObject();
Row r = vo.getCurrentRow();
if (r != null) {
r.remove();
}
DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding = bindings.getOperationBinding("Commit");
operationBinding.execute();
deletePopupBind.hide();
return null;Thus, the complete DeleteBean.java class is shown below:
package com.susanto.beans;
import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.view.rich.component.rich.RichPopup;
import oracle.binding.BindingContainer;
import oracle.binding.OperationBinding;
import oracle.jbo.Row;
import oracle.jbo.ViewObject;
public class DeleteBean {
private RichPopup deletePopupBind;
public DeleteBean() {
}
public void setDeletePopupBind(RichPopup deletePopupBind) {
this.deletePopupBind = deletePopupBind;
}
public RichPopup getDeletePopupBind() {
return deletePopupBind;
}
public String deleteStudent() {
BindingContext bindingctx = BindingContext.getCurrent();
BindingContainer binding = bindingctx.getCurrentBindingsEntry();
DCBindingContainer bindingsImpl = (DCBindingContainer) binding;
DCIteratorBinding dciter = bindingsImpl.findIteratorBinding("Student1Iterator");
ViewObject vo = dciter.getViewObject();
Row r = vo.getCurrentRow();
if (r != null) {
r.remove();
}
DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
OperationBinding operationBinding = bindings.getOperationBinding("Commit");
operationBinding.execute();
deletePopupBind.hide();
return null;
}
}Step 10: Save all and run the application (delete.jpsx). Thus, the ran application is shown below:
When I click on the Delete icon of 2nd row that is for row with StudentId as 2, we will get the below popup.
Now, we will click on Yes the and the Student record with StudentId as 2 get deleted. Thus, the popup is closed after saving successfully. The deleted record is immediately removed from the ADF table as shown below:
Now, just for confirmation we will check if the record is deleted in the database also. Thus, in the below image we can see that the value is deleted 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
538 total views, 3 views today