Please disable your adblock and script blockers to view this page

Search this blog

Monday, 23 September 2013

Dynamically enable or disable items of ADF bound List (af:selectOneChoice) -Oracle ADF

Hello All,
This tutorial is about a requirement of conditionally enabling/disabling items (values) of adf bound List (af:selectOneChoice) component
here i am taking reference of default HR Schema (Departments and Location table )

See the steps-
  • Create a Fusion Web Application and business components using both tables
  •  Now create List of Values (Lov) on locationId of departments VO from Location VO
  • Set List Attribute to LocationId and for UI city will be shown
  • Now Drag Departments VO from Data Control on page as a form
  •  Select LocationId list field and delete f:selectItems from it, now drag af:selectItem as child of af:selectOneChoice and surround it with af:forEach 



  • Add tree binding of Location ViewObject to page bindings in order to populate list items using forEach
  •  Now select af:forEach and set its property and variable name, as we have to iterate through Location VO for list items
  •  Again select af:selectItem and set its value and label property using forEach variable's  
  • Now run your application, and see that list box is ready with values
  • Now we have to disable its values as a condition basis, i have written an Expression on af:selectItem's disabled property


  • I have written condition for DepartmentId 100 and 110, see in source of page

  • <af:selectOneChoice value="#{bindings.LocationId.inputValue}" label="#{bindings.LocationId.label}"
                                            required="#{bindings.LocationId.hints.mandatory}"
                                            shortDesc="#{bindings.LocationId.hints.tooltip}" id="soc1"
                                            contentStyle="width:150px;color:red;">
                            <af:forEach items="#{bindings.Locations1.rangeSet}" var="list">
                                <af:selectItem label="#{list.City}" id="si1" value="#{list.LocationId}"
                                               disabled="#{ (bindings.DepartmentId.inputValue==100 and (list.LocationId==1000 || list.LocationId==1300)) || (bindings.DepartmentId.inputValue==110 and (list.LocationId==1500 || list.LocationId==1600 || list.LocationId==1700 || list.LocationId==1800 || list.LocationId==1900))}"/>
                            </af:forEach>
                        </af:selectOneChoice>
    

  • Now value given in Expression for Location Id will be disabled for given Department
  • Run your page and select DepartmentId 100 and 110 to see disabled list items

 Download Sample App Cheers :-)

Thursday, 19 September 2013

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

Hello All,
This tutorial is based on using Drag & 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 was based on JSPX page.

this tutorial is based on DEPARTMENTS table (Default HR Schema) and an other table with Same Structure DEPARTMENTS_DUPL to implement drag and drop.
my scenario is to add 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 taskflow and a page fragment in it, and drop both tables on page

  • Now drop af:dragSource as 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 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





  • 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 :-)
 Download Sample App Cheers :-)

Wednesday, 18 September 2013

Using af:switcher in ADF Faces to dynamically render page components

Hello all,,
Sometimes we need to display page components on a condition basis , this can be achieved in adf using af:switcher component
Normally switcher component is a collection of multiple facets and on a given condition it decides that which facet should be rendered.

How to use af:switcher- see the steps

  • Create a Fusion web application and create business components using Departments and Employees table (HR Schema)
  •  Now create a page in view Controller and drop a switcher component from component palette
  • Switcher is pure server side component so it doesn't have any client representation, so next move is to add facets in af:switcher, to add facets in switcher,
    just right click--insert inside af:switcher-- facet



  • As in this tutorial i am going to show 2 tables(Departments U& Employees) so added 2 facets in af:switcher

  • Now time to drop tables in corresponding facets, Employees Table in Emp, Departments Table in Dept
  •  Now i have created a static List that has values D for Departments and E for Employees, when user selects D the Departments table will be shown and for E Employees table will be shown

  • to do this select af:switcher and go to FacetName property and open expression builder to write conditional expression
  •  Now run this page and select values in list to see- how switcher works

  Download Sample App Cheers :-)