Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Hierarchical View. Show all posts
Showing posts with label Hierarchical View. Show all posts

Thursday 19 May 2016

Traverse POJO based ADF treeTable, Get Child nodes of selected parent


Previosuly I have posted about populating af:treeTable programmatically and getting selected records from POJO based treeTable

This post is next in that series and here I am extending same sample application that show a tree of Seasons and it's characters
First we will see How to traverse a POJO based treeTable (Iterate through all nodes of treeTable)

Basic idea is to get treeTable Collection Model and iterate over it to get all nodes value, To get CollectionModel created treeTable component binding in managed bean

Friday 13 May 2016

Get Selected records (Child/Parent) from POJO based ADF treeTable

Hello All
Previously I have posted about creating af:treeTable programmatically using POJO and this the next post in series

In this post I am talking about a very common requirement while using POJO based treeTable
How can we get selected records (child/parent) from POJO based treeTable ?

For this post I am extending same sample application, Till now we have seen that how can we create POJO based treeTable
Now we'll see that how to get it's selected records


Wednesday 3 February 2016

ADF UI: Using dvt:sunburst to show hierarchical data in ADF

<dvt:sunburst> is one of fancy components to show multi level hierarchical data in form of circular rings in ADF application

It supports drilling up to n-level , consist of dvt:sunburstNode as it's child tag to show level wise detail . Sunburst supports multiple type of animations that makes a better UI
See What docs says -

Sunbursts are used to display hierarchical data across two dimensions, represented by the size and color of the sunburst nodes. The sunburst displays multiple levels of its hierarchy at once, with each ring corresponding to a level of the hierarchy

Thursday 16 April 2015

Build selectOneChoice to show hierarchical (tree style) data programmatically in ADF

This post is based on an old article from Frank Nimphius How - to build a select one choice displaying hierarchical selection data

This article is about showing tree structure data in af:selectOneChoice component using ADF BC , it makes use of tree binding and af:forEach
Same concept i have used to populate data from managed bean using List data structure

Let's see the implementation part - how to populate tree style selectOneChoice programatically ?

First we have to design a Java Bean class in such a way that it can hold  master -detail type of data

A class that represents a List for Parent Values
                          ======> A list of same type to hold Child Values

See bean class code-

import java.util.ArrayList;
import java.util.List;

public class Seasons {
    public Seasons(String name) {
        this.name = name; // To Store Header Values (Storing Seasons Name :))
    }
    // Season and Charater Name
    private String name;
    // To Store Detail Values (Storing Season's Charatcers)
    private List<Seasons> characters = new <Seasons>ArrayList();

    public void setCharacters(List<Seasons> empDet) {
        this.characters = empDet;
    }

    public List<Seasons> getCharacters() {
        return characters;
    }


    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
    // This methods directly add characters value in list
    public void addCharaters(Seasons employee) {
        characters.add(employee);
    }
}

Now how to use this bean in managed bean to add records, i have written code in constructor to populate values on class load




    // Master List to populate data in selectOnce choice
    List<Seasons> seasonList = new ArrayList<Seasons>();

    public void setSeasonList(List<Seasons> seasonList) {
        this.seasonList = seasonList;
    }

    public List<Seasons> getSeasonList() {
        return seasonList;
    }
    //Constructor of Managed Bean to populate data on page load (you can move this code )
    public TreeStyleLovBean() {
        super();
        // Creating tree for Seasons and Characters details
        // Adding Master Values (seasons)
        Seasons season1 = new Seasons("Game of Thrones");

        // Adding Detail Values (Child Node-Characters)
        Seasons character = new Seasons("Tywin Lannister");
        season1.addCharaters(character);
        character = new Seasons("Tyrion Lannister");
        season1.addCharaters(character);
        character = new Seasons("Jaime Lannister");
        season1.addCharaters(character);
        character = new Seasons("Cersie Lannister");
        season1.addCharaters(character);
        character = new Seasons("Ned Stark");
        season1.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season2 = new Seasons("Arrow");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Oliver Queen");
        season2.addCharaters(character);
        character = new Seasons("Moira Queen");
        season2.addCharaters(character);
        character = new Seasons("Laurel Lance");
        season2.addCharaters(character);
        character = new Seasons("Sara Lance");
        season2.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season3 = new Seasons("Vikings");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Ragnar Lothrak");
        season3.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season4 = new Seasons("The Flash");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Barry Allen");
        season4.addCharaters(character);
        character = new Seasons("Harisson Wells");
        season4.addCharaters(character);
        character = new Seasons("Iris West");
        season4.addCharaters(character);
        character = new Seasons("Joe");
        season4.addCharaters(character);

        // Adding all list to topList
        seasonList.add(season1);
        seasonList.add(season2);
        seasonList.add(season3);
        seasonList.add(season4);

    }
how to bind this managed bean to selectOneChoice ? i have used same concept as described in Frank's article using af:forEach


<af:selectOneChoice id="selectBox" label="Choose Character" valuePassThru="true"
                                        styleClass="employeeSelectBox" contentStyle="width:150px;"
                                        binding="#{viewScope.TreeStyleLovBean.selectOneValueBind}">
                        <af:forEach items="#{viewScope.TreeStyleLovBean.seasonList}" var="seasonNm">
                            <af:selectItem label="#{seasonNm.name}" disabled="true" id="si1"/>
                            <af:forEach items="#{seasonNm.characters}" var="characterNm">
                                <af:selectItem label="#{characterNm.name}" value="#{characterNm.name}" id="si2"/>
                            </af:forEach>
                        </af:forEach>
                    </af:selectOneChoice>

you can see here that first forEach is populated from master list and iterates over list of seasons and first selectItem show season's name
the inner forEach makes used of character list that is defined in Java Bean class and stores season wise character's name
Rest is same - a CSS is used to differentiate color and alignment of parent and child records (same as Frank's article)


<f:facet name="metaContainer">
                <af:group>
                    <![CDATA[
<style>
.employeeSelectBox option{text-indent:15px;color:darkgreen;}
.employeeSelectBox option[disabled]{color:red; background-color:#dddddd; 
font-weight: bold; text-indent:0px}
</style>
]]>
                </af:group>
            </f:facet>

Now run this application - see how it appears on page



It looks quite good :) to get selected value in bean just use componentBinding.getValue();

Sample ADF Application-Download (Jdev 12.1.3)
Cheers , Happy Learning 

Wednesday 23 July 2014

Search on (Filtering) child nodes of af:treeTable using viewCriteria in Oracle ADF (11g,12c)

Hello all
this post is about filtering treeTable on basis of child nodes in Oracle ADF
in this tutorial i have used Departments and Employees table of HR schema to create treeTable
see how to create treeTable-
http://www.awasthiashish.com/2012/11/tree-table-component-in-oracle.html
http://www.awasthiashish.com/2013/08/tree-table-component-with-declarative.html

treeTable look like this-


now next is to search on Employee Names



  • i have dropped a input text for search string and a button to search on page , here i am searching on first name of employees 


  • now created a view Criteria in Employee viewObject to search on first name


  • This viewCriteria doesn't work directly on Employee viewObject, to search in treeTable we have to override createViewLinkAccessorRS method in Departments (master vo) VOImpl class, and in this method we have to call Employees ViewCriteria explicitly , this will filter Employee Vo Rowset as per bind-variable value when a node is disclosed at runtime

  •     /**
         * @param associationDefImpl
         * @param viewObjectImpl
         * @param row
         * @param object
         * @return
         */
        protected ViewRowSetImpl createViewLinkAccessorRS(AssociationDefImpl associationDefImpl,
                                                          ViewObjectImpl viewObjectImpl, Row row, Object[] object) {
    
    
            ViewRowSetImpl viewRowSetImpl = super.createViewLinkAccessorRS(associationDefImpl, viewObjectImpl, row, object);
    
            String firstName = getFirstNm();
            ViewCriteriaManager vcm = viewObjectImpl.getViewCriteriaManager();
            ViewCriteria vc = vcm.getViewCriteria("EmployeesVOCriteria");
            VariableValueManager vvm = vc.ensureVariableManager();
            vvm.setVariableValue("BindFirstNm", firstName);
            viewObjectImpl.applyViewCriteria(vc);
            return viewRowSetImpl;
    
    
            // return super.createViewLinkAccessorRS(associationDefImpl, viewObjectImpl, row, object);
        }
    

  • to pass bind-variable value i have created a variable and it's accessors in VoImpl and exposed set method to client that is further used by managed bean

  •     private String firstNm;
        public void setFirstNm(String firstNm) {
            this.firstNm = firstNm;
        }
    
        public String getFirstNm() {
            return firstNm;
        }
    

  • now this setter method is called in managed bean search button action to set bind variable value

  •     /**Method to search in treeTable childs
         * @param actionEvent
         */
        public void searchAction(ActionEvent actionEvent) {
            if (firstNmBind.getValue() != null) {
                OperationBinding ob = executeOperation("setFirstNm");
                // firstNmBind is binding of inputText
                ob.getParamsMap().put("firstNm", firstNmBind.getValue().toString());
                ob.execute();
                /* Method Expand treeTable after Search see- 
                 http://www.awasthiashish.com/2013/10/expand-and-collapse-aftreetable.html*/
                expandTreeTable();
                AdfFacesContext.getCurrentInstance().addPartialTarget(treeTabBind);
    
            }
        }
    

  • Run your application and see-
    Cheers- Happy Learning
    Download Sample ADF Application

Saturday 5 July 2014

Populate af:treeTable programatically using POJO in Oracle ADF (11g & 12c)

Hello All
This post is about creating & populating af:treeTable programmatically in ADF 11g and 12c
treeTable is basically a hierarchical representation of data, using ADF model layer we can create treeTable very easily by defining master-detail relation between viewObjects
see my previous posts on treeTable-
Tree Table Component in Oracle ADF(Hierarchical Representation)
Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener
Expand and Collapse an af:treeTable programmatically in ADF Faces (Oracle ADF)
Refreshing Child Nodes of an af:treeTable / af:tree in Oracle ADF



to populate treeTable programmatically we need to configure data set that fits to tree hierarchy
thanks to Chris Muir's post about programmatic creation of treeTable
http://one-size-doesnt-fit-all.blogspot.in/2007/05/back-to-programming-programmatic-adf.html

there is 4-5 simple steps to do-
  • Create a fusion web application and drop a af:treeTable on page , in treeTable creation wizard select "bind later" 


  • now create managed bean to populate data in treeTable, create a simple List in managed bean of type POJO class (a java class that contains attributes and their accessor  )
  • so in this app i am going to Tv Serial and respective character names in treeTable, for that i have created a class that contains POJO for treeTable

  • import java.util.ArrayList;
    import java.util.List;
    
    
    public class Seasons {
        public Seasons(String name) {
            this.name = name; // To Store Header Values (Storing Seasons Name :))
            characters = new ArrayList<Seasons>(); // To Store Detail Values (Storing Season's Charatcers)
        }
    
        public void setCharacters(List<Seasons> empDet) {
            this.characters = empDet;
        }
    
        public List<Seasons> getCharacters() {
            return characters;
        }
        private String name;
        private List<Seasons> characters;
    
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getName() {
            return name;
        }
    // This methods directly add characters value in list
        public void addEmp(Seasons employee) {
            characters.add(employee);
        }
    
    }
    

  • In this class the characters list behaves as child of seasons, so in managed bean define a top-level list (that contains both master and detail) and add values

  • See managed Bean Code-
    import java.util.ArrayList;
    import java.util.List;
    
    import org.apache.myfaces.trinidad.model.ChildPropertyTreeModel;
    
    public class ProgrammaticTreeTabBean {
        List<Seasons> seasonList = new ArrayList<Seasons>();
    
        ChildPropertyTreeModel charatcerVal;
    
        public ProgrammaticTreeTabBean() {
            super();
            // Creating tree for Seasons and Characters details
            // Adding Master Values (seasons)
            Seasons season1 = new Seasons("Game of Thrones");
           // Adding Detail Values (Child Node-Characters)
            Seasons character = new Seasons("Tywin Lannister");
            season1.addCharaters(character);
            character = new Seasons("Tyrion Lannister");
            season1.addCharaters(character);
            character = new Seasons("Jaime Lannister");
            season1.addCharaters(character);
            character = new Seasons("Cersie Lannister");
            season1.addCharaters(character);
            character = new Seasons("Ned Stark");
            season1.addCharaters(character);
    
            // Adding Master Values (seasons)
            Seasons season2 = new Seasons("Arrow");
            // Adding Detail Values (Child Node-Characters)
            character = new Seasons("Oliver Queen");
            season2.addCharaters(character);
            character = new Seasons("Moira Queen");
            season2.addCharaters(character);
            character = new Seasons("Laurel Lance");
            season2.addCharaters(character);
            character = new Seasons("Sara Lance");
            season2.addCharaters(character);
    
            // Adding Master Values (seasons)
            Seasons season3 = new Seasons("Vikings");
          // Adding Detail Values (Child Node-Characters)
            character = new Seasons("Ragnar Lothrak");
            season3.addCharaters(character);
    
            // Adding all list to topList
            seasonList.add(season1);
            seasonList.add(season2);
            seasonList.add(season3);
            // Filtering Child Data, ChildPropertyTreeModel creates a TreeModel from a List of beans, see
            // https://myfaces.apache.org/trinidad/trinidad-api/apidocs/org/apache/myfaces/trinidad/model/ChildPropertyTreeModel.html
            charatcerVal = new ChildPropertyTreeModel(seasonList, "characters");
        }
    
        public ChildPropertyTreeModel getCharatcerVal() {
            return charatcerVal;
        }
    }
    

  • Now code part is complete, now configure your treeTable to show data, see XML source of af:treeTable

  • <af:treeTable rowBandingInterval="0" id="tt1"
                                  value="#{pageFlowScope.ProgrammaticTreeTabBean.charatcerVal}" var="node"
                                  rowSelection="single" initiallyExpanded="true">
                        <f:facet name="nodeStamp">
                            <af:column headerText="Node Stamp" id="c1" width="250">
                                <af:outputText value="#{node.name}" id="ot1" inlineStyle="font-weight:bold;"/>
                            </af:column>
                        </f:facet>
                    </af:treeTable>
    

  • Now run your application and check , what you have done ;)
Happy Learning :) Sample ADF Application (12.1.3)

Monday 16 June 2014

Creating and Exporting hierarchical data to excel using dvt:pivotTable & dvt:exportPivotTableData in Oracle ADF

Hello All,
This post is about exporting tree structured(hierarchical ) data to an excel file.
suppose we have export department wise detail of employees , we can achieve this in ADF using pivot table (<dvt:pivotTable>)

What is pivot tabel (oracle docs)- 
 
UIComponent class: oracle.adf.view.faces.bi.component.pivotTable.UIPivotTable
Component type: oracle.dss.adf.pivotTable.PivotTable
The Pivot Table supports the display of multiple nested attributes on a row and column header. In addition, the Pivot Table supports the ability to dynamically change the layout of the attributes displayed in the row or column headers via drag and drop pivoting.
now see the implementation part -



  • Create a Fusion Web Application using HRSchema , for this sample app i have created a view (Department Wise Employees) to export data

  • CREATE OR REPLACE FORCE EDITIONABLE VIEW "APP_USR"."DEPT_EMP" ("DEPARTMENT_NAME", "EMPLOYEE_NAME", "SALARY") AS 
      SELECT A.DEPARTMENT_NAME, B.FIRST_NAME,B.SALARY FROM DEPARTMENTS A, EMPLOYEES B WHERE A.DEPARTMENT_ID=B.DEPARTMENT_ID (+);
    

  • Prepare model using this view


  • Create a page and drop this view as pivot table (ADF Faces component) from data control


  • Now configure pivot table (set row & column attributes, insert appropriate drilling) - see the snaps




  • Now run your page and see working pivot table - here pivot table is created successfully 


  • Drop a button  and a <dvt:exportPivotTableData> under button to export pivot table

  • <af:commandButton text="Export" id="b1">
                        <dvt:exportPivotTableData type="excelHTML" exportedId="pt1" filename="Dep_Empl.xls"
                                                  title="PivotTable export"/>
                    </af:commandButton>
    

  • Run your page and click on export button and see your tree structured data in exported excel file


Cheers :) Happy Learning Sample ADF Application

Monday 26 August 2013

Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener

Hello all,
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table Component in Oracle ADF(Hierarchical Representation)

In this post i am going to explain how to
  • use multiple detail column in treeTable
  • design better UI
  • manage child rows
  • use link,image,checkbox in treeTable conditionally
so i assume that you all know about creating treeTable, i am using default HR Schema (Employees ,Departments table) to master detail relation in tree and i have to show detail of Employee under Department node
  • I have created a treeTable using following details of Employees VO
  • Now on running my page it is looking like this, very odd and complex view
        xml source-

  <af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1" width="500">
                            <af:outputText value="#{node}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                </af:treeTable>

  • It shows that all details of employees are clubbed in one column that is nodestamp, now to show details in different columns i have added 5 columns in treeTable, and seperate detail in each column as Email, FirstName,LastName etc
    To add column right click on treeTable and insert-
 In column drop an input text and set its value taking node reference




  •  Now run page and see, there is now 5 column with different details but still that clubbed value is shown.
  • Now to remove that clubbed detail, go to nodestamp facet of treeTable and see value of output text inside column, it is set to #{node} ,due to this all values available in node are clubbed and displayed in page, now we have to set its value to any of Master table's (Departments) attribute



  •  Now run page , only department name is displayed on header, and corresponding value for detail is blank
  •  We are done with this part, now try to make its UI somewhat better using some styles, so i have used different background color for header and detail part of treeTable conditionally
  • To do this i have set inline style property conditionally , because i have to change color of same column according to master and detail data, see condition

  • #{node.DepartmentName!=null ? 'background-color:darkgreen' :  'background-color:rgb(239,255,213);'  }
    

  • Now see how to get selected child row without over-riding treeTable's selection listener, to do this i have added a image link in treeTable and created a action listener on that to show current selected detail row
  • Bind tree table to managed bean and create two methods to get selected RowIterator and node Key

  •     /**Tree Table Binding in managed bean*/
        private RichTreeTable treeTabBind;
    
        public void setTreeTabBind(RichTreeTable treeTabBind) {
            this.treeTabBind = treeTabBind;
        }
    
        public RichTreeTable getTreeTabBind() {
            return treeTabBind;
        }
    
        /**Method to get Iterator*/
        public RowIterator getSelectedNodeIterator() {
            if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
                for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                    getTreeTabBind().setRowKey(rKey);
                    return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowIterator();
                }
            }
            return null;
        }
    
        /**Method to get Node Key*/
        public Key getSelectedNodeKey() {
            if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
                for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                    getTreeTabBind().setRowKey(rKey);
                    return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowKey();
                }
            }
            return null;
        }
    

  • Now to get currently selected node and row pass Iterator and Node key in this method- see

  •     public void showCurRowDetail(RowIterator ri, Key selectedNodeKey) {
            Row[] rows = ri.findByKey(selectedNodeKey, 1);
    
            FacesMessage msg = new FacesMessage(rows[0].getAttribute("FirstName") + "'s data available in this row");
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    

  • Now Run application and click on link to see selected row -


Monday 26 November 2012

Tree Table Component in Oracle ADF(Hierarchical Representation)


Hello All

This post is about ADF Faces Tree Table component (about designing component and get selected value from tree table)

We have a simple sample application that shows how can we use tree table component in Oracle ADF.
Tree Table component represents  Hierarchical view of Master Deatil form of data
Here we take example from HR schema using Employees and Department table
Follow these steps -

  • Create EOs,VOs of Employees and Department table in HR Schema and create association and viewlink between Department To Employees considering Department Id
  • Now go to data control and select Department table and drop it on page as Tree table 

Drop ViewObject as ADF Tree Table
  •  Now we have to edit its bindings, it means you have to select attributes that you want to display in page, and below Department table you should add Employees table using "add" button on top, and select appropriate Iterator in EL picker
Edit tree binding in pageDef
  • Now go to page and select treetable in Structure window of Jdeveloper and Go to its selection listener and copy default value
Override default selection listener
  • And change selection listener set it to bean, click on edit and create new selection listener in Bean




Create custom selection listener in managed bean for af:treeTable
  •  Now go to Selection Listener and Use this code to get Value of selected node in treetable, if you will get value of node you can perform any operation on Tree Table
    public void treeTableSelectionListener(SelectionEvent selectionEvent) {
        String adfSelectionListener = "#{bindings.Department1.treeModel.makeCurrent}";

        FacesContext fctx = FacesContext.getCurrentInstance();
        Application application = fctx.getApplication();
        ELContext elCtx = fctx.getELContext();
        ExpressionFactory exprFactory = application.getExpressionFactory();
        MethodExpression me = null;
        me =
 exprFactory.createMethodExpression(elCtx, adfSelectionListener, Object.class, new Class[] { SelectionEvent.class });
        me.invoke(elCtx, new Object[] { selectionEvent });
       
        RichTreeTable tree = (RichTreeTable)selectionEvent.getSource();
        TreeModel model = (TreeModel)tree.getValue();
        //get selected nodes
        RowKeySet rowKeySet = selectionEvent.getAddedSet();
        Iterator rksIterator = rowKeySet.iterator();
        while (rksIterator.hasNext()) {
            List key = (List)rksIterator.next();
            JUCtrlHierBinding treeBinding = null;
            treeBinding = (JUCtrlHierBinding)((CollectionModel)tree.getValue()).getWrappedData();
            JUCtrlHierNodeBinding nodeBinding = treeBinding.findNodeByKeyPath(key);
            Row rw = nodeBinding.getRow();
            System.out.println("row: " + rw.getAttribute(0)); // You can get any attribute
            System.out.println("View Object name---->" + nodeBinding.getViewObject().getName());

        }
    }
  •  Now run your page and when you will click on any node you will find its value on Console---Cheers Happy Coding!
Sample ADF Application