Adding Drag and Drop Functionality for collections in page fragments to create insert

Sharing is Caring

Hello All,
This tutorial is based on using Drag and Drop functionality in collections as af:table to create a new row
I have googled about Drag & Drop but was not able to implement in page fragments(.jsff), all samples were based on JSPX page.

This tutorial is based on DEPARTMENTS table (Default HR Schema) and another table with Same Structure DEPARTMENTS_DUPL to implement drag and drop.
my scenario is to add a row in DEPARTMENTS_DUPL from Departments 
 See the steps to implement- 
  •  First, create Departments_dupl table in your HR schema, simply run this script
CREATE TABLE DEPARTMENTS_DUPL
  (
    DEPARTMENT_ID   NUMBER(4, 0) ,
    DEPARTMENT_NAME VARCHAR2(30 BYTE) ,
    MANAGER_ID      NUMBER(6, 0) ,
    LOCATION_ID     NUMBER(4, 0)
  )

 

  • Now create Fusion Web Application and create business components
  • Now create a bounded task flow and a page fragment in it, and drop both tables on page
  • Now drop af:dragSource as a child of Departments table and set properties, here discriminant is to ensure compatibility between drag and drop components, and its value must match for Drag Source and Drop Target

 

 

  • Now drop af:dropTarget as a child of DepartmentsDupl table and set properties as Action etc and create a DropListener for it that handles drop event, set Flavor class to java.lang.Object
Drag and Drop
  • Now select af:dropTarget and goto source and set value for discriminant same as drag source
  <af:dropTarget dropListener="#{pageFlowScope.DragDropSampleBean.deptDropListener}" actions="COPY">
          <af:dataFlavor discriminant="copyDept" flavorClass="java.lang.Object"/>
        </af:dropTarget>

 

  • Now write code to create a new row in DepartmentsDupl and insert data from Departments on Drop Listener

public void dragDropAction() {
ViewObject dept = this.getDepartments1();
ViewObject deptDupl = this.getDepartmentsDupl1();
Row curDept = dept.getCurrentRow();

Row dupl = deptDupl.createRow();
dupl.setAttribute("DepartmentId", curDept.getAttribute("DepartmentId"));
dupl.setAttribute("DepartmentName", curDept.getAttribute("DepartmentName"));
dupl.setAttribute("ManagerId", curDept.getAttribute("ManagerId"));
dupl.setAttribute("LocationId", curDept.getAttribute("LocationId"));
deptDupl.insertRow(dupl);
deptDupl.executeQuery();
this.getDBTransaction().commit();
   }

 

  • Now Run your page and use this cool functionality 🙂

Sample ADF Application- Download

 Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Adding Drag and Drop Functionality for collections in page fragments to create insert”

Leave a Reply

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