Monday Nov 26, 2012

Restrict number of characters to be typed for af:autoSuggestBehavior

When using AutoSuggestBehavior for a UI Component, the auto suggest list is displayed as soon as the user starts typing in the field. In this article, we will find how to restrict the autosuggest list to be displayed till the user types in couple of characters.

This would be more useful in the low latency networks and also the autosuggest list is bigger. We could display a static message to let the user know that they need to type in more characters to get a list for picking a value from. Final output we would expect is like the below image


Lets see how we can implement this. Assuming we have an input text for the users to enter the country name and an autosuggest behavior is added to it.

<af:inputText label="Country" id="it1">
                    <af:autoSuggestBehavior />
Also, assuming we have a VO (we'll name it as CountryView for this example), with a view criteria to filter out the VO based on the bind variable passed.


Now, we would generate View Impl class from the java node (including bind variables) and then expose the setter method of the bind variable to client interface.

In the View layer, we would create a tree binding for the VO and the method binding for the setter method of the bind variable exposed above, in the pagedef file


As we've already added an input text and an autosuggestbehavior for the test, we would not need to build the suggested items for the autosuggest list.Let us add a method in the backing bean to return us List of select items to be bound to the autosuggest list.

 padding: 5px; background-color: #fbfbfb; min-height: 40px; width: 544px; height: 168px; overflow: auto;">        public List onSuggest(String searchTerm) {
        ArrayList<SelectItem> selectItems = new ArrayList<SelectItem>();
        if(searchTerm.length()>1) {
        //get access to the binding context and binding container at runtime
        BindingContext bctx = BindingContext.getCurrent();
        BindingContainer bindings = bctx.getCurrentBindingsEntry();
        //set the bind variable value that is used to filter the View Object
        //query of the suggest list. The View Object instance has a View
        //Criteria assigned
        OperationBinding setVariable = (OperationBinding) bindings.get("setBind_CountryName");
        setVariable.getParamsMap().put("value", searchTerm);
        //the data in the suggest list is queried by a tree binding.
        JUCtrlHierBinding hierBinding = (JUCtrlHierBinding) bindings.get("CountryView1");
        //re-query the list based on the new bind variable values hierBinding.executeQuery();
        //The rangeSet, the list of queries entries, is of type
        List<JUCtrlValueBindingRef> displayDataList = hierBinding.getRangeSet();
        for (JUCtrlValueBindingRef displayData : displayDataList){
            Row rw = displayData.getRow();
            //populate the SelectItem list
            selectItems.add(new SelectItem(
            SelectItem a = new SelectItem("","Type in two or more characters..","",true);
        return selectItems;

So, what we are doing in the above method is, to check the length of the search term and if it is more than 1 (i.e 2 or more characters), the return the actual suggest list. Otherwise, create a read only select item

new SelectItem("","Type in two or more characters..","",true);

and add it to the list of suggested items to be displayed. The last parameter for the SelectItem (boolean) is to make it as readOnly, so that users would not be able to select this static message from the displayed list.

Finally, bind this method to the input text's autosuggestbehavior's suggestedItems property.

<af:inputText label="Country" id="it1">

Friday Aug 10, 2012

How to create multi level cascading (dependent) list of values using BC4J

There are quite a number of documentations / blogs on creating cascading (dependent) list of values in ADF Application using BC4J as model.

Some examples



However, these entries talk about creating list of values for master-detail attributes. In this article, I would be explaining about creating list of values which have master-detail-grand detail relationship (though the implementation is same, the use case is different).

Assuming that we've our model ready, with an VO for Person (based on Person EO), Country, State and City (read-only VOs).

Now, we'll modify the query of the dependent VOs to include a bind variable in their where clause.

We could then create List of Values for the CountryId, StateId and CityId attributes in the Person VO.

Above image shows an example for creating LOV for the CityId attribute. LOV is created for the CountryId and StateId attributes in the similar fashion.

Now that we've created LOV for all the 3 attributes, we need to pass the required values for the bind variable we created previously (in State and City VOs). That is done from the View Accessors tab of Person VO.

Now we are set to go with the dependent LOV. Before running the Tester, we need to make the CountryId and StateId attributes automatically submit their values upon change (by setting Auto Submit UI Hint to true)

 (Above image shows setting Auto Submit UI Hint to true for CountryId attribute. In the same manner, set the Auto Submit UI Hint to true for the StateId attribute as well).

and add make StateId dependent on CountryId, CityId to depend on CountryId and StateId.

We are set to go now. Run the AppModule tester to verify the values.

When using this in jspx page, set the AutoSubmit properties for the CountryId and StateId components, and add the partialTriggers for StateId and CityId components with the Id of CountryId component, as shown below.

Hint: Right click on the images and select View Image to view it completely if it is cropped.

Thursday Jul 12, 2012

Calculating time since last query in adf using java script

In some scenarios, we would need to calculate the time elapsed since the last query execution, without contacting the server (i.e without using af:poll component). This blog is to give an example for this scenario by using javascript.

OTN question :

Assuming that we have an application with a table in the page, and a commandButton to query the records, we will proceed further to build our usecase.

The logical flow of this implementation would be like,
1. Execute the query
2. When the button clicked, reset the previous time
3. Set the time to 0.
4. Trigger the timer to increment time.

Now, implementation comes.

Lets add an output text to display the time lapsed

<af:outputLabel value="Minutes since last query :" id="ol1"/>
        <af:outputText value="" id="ot9" clientComponent="true"/>

Since we would be accessing the output text from javascript, we would need to make it available to client by setting clientComponent to true.

We now need to add a javascript code to our page, to count the minutes and display in the output text.

        <af:resource type="javascript">

        function updateTimer(){
            var opTxt = AdfPage.PAGE.findComponentByAbsoluteId('ot9');
            var curMins = opTxt.getProperty('value');
            if(curMins == '' || curMins == null)
                opTxt.setProperty('value',parseInt(opTxt.getProperty('value')) + 1);


In the above code, we find the outputText component (with id ot9), get its value. If the value is blank or null, then set it to 0. If it is a non-zero number, then increment it.

Now, we need to call this method every minute to update the output text. For this, we will add another JS function.

        function startTimer(){
            var opTxt = AdfPage.PAGE.findComponentByAbsoluteId('ot9');
            var int=window.setInterval("updateTimer()",60000);

This function finds the outputText (with id ot9), resets its value (i.e set it to blank) and then schedules the function we've created first (updateTimer()) to be called every minute (i.e 60000 milliseconds).

Assuming we have a button to execute the query, we'll add a client listener to the button to execute this function when pressed.

                <af:commandButton actionListener="#{bindings.Execute.execute}" text="Execute"                                       
                                        disabled="#{!bindings.Execute.enabled}"  id="cb1" partialSubmit="true">
                          <af:clientListener method="startTimer" type="action" />

Ouput would be like below.

Thursday Jun 21, 2012

An Epic Question "How to call a method when the page loads"

Quite often, there comes a question in OTN, with different subjects, all meaning "How to call a method when my ADF page loads?". More often, people tend to take the approach of ADF Phase Listener by overriding before/afterPhase methods.

In this blog, we will go through different options in achieving it.

1. Method Call Activity as default activity in Taskflow :

If the application is built with taskflows, then this is the best suited approach to take.

1.a. Calling a Data Control Method :

To call a Data Control method (ex: A method in AMImpl exposed as client interface), simply Drag and Drop the method as Default Method Call Activity, then draw a control flow case from the method to your page.


Once after this, drop the taskflow as region in main page. When we run the main page, the Method Call Activity would be called first, and then the page will be rendered.

1.b. Calling a Method in Backing Bean:

To call a method in the backing bean before pageload, we can follow the similar approach as above. Instead of binding the Method Call Activity to an action/method binding in pagedef, we bind to the method. Insert a Method Call Activity (and make it as default) from the Component Palette. Double click on to select a method to bind.


This approach can also be used, to perform some action in backing bean along with calling a method Data Control (just need to add bindings code in backing bean to execute DC method).

2. Using invokeAction Executable :

If the application is built with pages and no taskflows are involved, then this option can be taken into consideration.

In the page definition of the page, add an invokeAction Executable and bind it to the method needed to be executed.


Using combination of Server and Client Listeners :

If the page does not have any page definition, then to call a method in backing bean, this approach can be taken. In this, a serverListener would be added at the document level, which would be calling the method in backing bean. Along with this, a clientListener would be added with "load" type (i.e will be triggered when the page loads), which would queue a serverEvent to trigger the method.


4. Using Page Phase Listener :

This should be the last resort. Care should be taken when using this approach since the Phase Listener would be called for each request sent by the client.

Zeeshan Baig's blog covers this scenario.

Friday Mar 02, 2012

Refreshing One Column based on the value of Another Column in ADFdi Table

When using ADF Desktop Integration, quite frequently, we get into a situation where we would like to refresh one column based on the value of another column. In ADF Faces, we can achieve this by setting the autoSubmit property and partialTriggers property for the corresponding columns.

However, in ADFdi, we do not have such option. Though we can achieve this by using LOVs and Dependent LOVs. But, in some scenarios we would like to achieve this when using an Input Text Component.

In this article, we will simulate this Auto Refresh functionality in a ADFdi Table.

Note : Since we would be using VBA code to achieve this, we can use this only on the Macro Enabled Excel Workbooks.

Let us assume that we have a View Object based on the Emp table. We could take an example of having a transient attribute in the VO, that gives the sum of Salary and Commission attributes.


In the above example, we've added a new transient attribute (SalPlusComm) to the EmpVO, that would give the sum of Sal and Comm attributes. Since we need this attribute to get refreshed when either Sal or Comm attribute changes, we set the Sal and Comm attributes as Dependencies. Also, we set the AutoSubmit property (under UI Hints tab) for the Sal and Comm attributes.


Now, we are done with the model layer. We can now, create a jspx page and then Drag and Drop EmpView as ADF Table. After this, we create an Excel Workbook (macro enabled), enable ADF Desktop Integration for it, set the required Workbook Properties, and then add a Table based on the EmpView.


As there are no straight forward way in ADFdi to trigger a request to server when a value of a cell is changed, we will now add a DoubleClickActionSet for the Sal and Comm columns. This DoubleClickActionSet will have the Table.RowUpSync and Table.RowDownSync actions.


Above example image shows the DoubleClickActionSet for Sal column. In the same manner, we need to add the DoubleClickActionSet for the Comm column as well.

Now, we have the workbook, that would fetch the SalPlusComm attribute (after recalculation in the model), when we change the Sal / Comm attribute and then double click on that column. To do this automatically when the user tabs out / presses enter key on the cells, we'll write a bit of VBA Code on the Worksheet where we've this table (Go to Developer Tab and Click on Visual Basic).

Private Sub Worksheet_Change(ByVal Target As Range)
  If Target.Column = 14 Or Target.Column = 15 Then
    Application.CommandBars("Cell").Controls("Invoke Action...").Execute
  End If
End Sub
Excel would trigger Worksheet_Change event when a cell in the worksheet is modified. So, we would code our logic in that event. The above code assumes that Sal column is present in the N (14th) column on the worksheet and Comm column is present in O (15th) column. So, we would execute our logic only when the contents in these two columns change.

ADFdi would provide a context menu (Invoke Action...) when a DoubleClickActionSet is added to a particular column. We'll make use of that context menu and invoke it programatically.


We invoke that context menu programatically using the following line of code

Application.CommandBars("Cell").Controls("Invoke Action...").Execute

Now, we run our workbook, modify the value of Sal column for any row and tab out of that field would automatically update the value of SalPlusComm column.


Here, a simple example (Transient Attribute) is taken for the explanation. In the similar fashion, we can also have a DoubleClickActionSet to contain a method in the Impl that would perform this calculation as well.

Tip: If you are not able to view the image fully, right click on the image and choose View Image option to see it completely.

Wednesday Feb 22, 2012

Dynamic Pie Graph Generation by Drag And Drop Rows from ADF Table

In normal scenarios, we display the graph and chart to get graphical representation of data. In this article, we'll see how to create graph dynamically by dragging the contents from ADF table and dropping on the graph.

Environment : JDeveloper PS5 (

Assuming that we have a table that displays the Department's details. We'll build a dynamic pie graph to display the Employee details for the departments that are dragged from the Department's table.


For our usecase, we need to drag the Departments from Table and Drop it on the Pie Chart to get the Employees details corresponding to the Depts selected.

For this, we need to add DragSource in the Dept Table and DropTarget in Emp Chart.

<af:table value="#{bindings.DeptView1.collectionModel}" var="row"
                 emptyText="#{bindings.DeptView1.viewable ? 'No data to display.' : 'Access Denied.'}"
                 rowSelection="multiple" id="t1">
            <af:dragSource discriminant="Dept" 
                  <dvt:pieGraph id="pieGraph1" subType="PIE_MULTI"
                      <af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"

Now that we've added the drag source and drop target, we need to have a method in our AM/VO's impl class, that take the department number as input and return the list of employees under it and their details as ArrayList.

    public ArrayList getEmpDetsForDept(int Deptno) {
        ArrayList empDetsAL = new ArrayList();
        getEmpView1().setWhereClause("Deptno=" + Deptno);
        if(getEmpView1().getRowCount()>0) {

            empDetsAL.add(new Object[]{""+Deptno,
                                        new Double(getEmpView1().getCurrentRow().getAttribute("Sal").toString())}

            while (getEmpView1().hasNext()){
                empDetsAL.add(new Object[]{""+Deptno,
                                            new Double(getEmpView1().getCurrentRow().getAttribute("Sal").toString())}

        return empDetsAL;

Now, the main part comes. Pie Graphs can be based on ArrayList. So, in our backing bean, we'll have an attribute of type ArrayList. Also, we'll have a variable to to bind the graph for triggering PPR.

    private List chartData=new ArrayList();
    private UIGraph empChart;

    public void setChartData(List chartData) {
        this.chartData = chartData;

    public List getChartData() {
        return chartData;

    public void setEmpChart(UIGraph empChart) {
        this.empChart = empChart;

    public UIGraph getEmpChart() {
        return empChart;

As we need to find out the Departments that are dragged from table, we'll have a method in the backing bean to get the list of dragged Departments, iterate through them, pass each to the AM / VO method created to get Emp details and then construct the ArrayList.

    public DnDAction dropDeptInPie(DropEvent dropEvent) {
        RichTable table = (RichTable) dropEvent.getDragComponent(); 
        Transferable t = dropEvent.getTransferable(); 
        DataFlavor<RowKeySet> df = DataFlavor.getDataFlavor(RowKeySet.class, "Dept"); 
        RowKeySet rks = t.getData(df); 
        Iterator iter = rks.iterator();
        if(getChartData()!=null) getChartData().clear();
        while (iter.hasNext()) { 
            List key = (List); 
            JUCtrlHierNodeBinding rowBinding = (JUCtrlHierNodeBinding) table.getRowData(); 
            Row row = (Row) rowBinding.getRow();
            String Deptno = row.getAttribute("Deptno").toString();
            BindingContainer bindings = getBindings();
            OperationBinding operationBinding = bindings.getOperationBinding("getEmpDetsForDept");
            operationBinding.getParamsMap().put("Deptno", Deptno);
            ArrayList result = (ArrayList)operationBinding.execute();

            if (operationBinding.getErrors().isEmpty()) {
                else  setChartData(result);



        return DnDAction.NONE;


    public BindingContainer getBindings() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();

In order to make the Pie Graph use the ArrayList as source, we need to bind this to the tabularData Property of the pie graph. Let us also bind the chart to the variable we created in backing bean and set its dropListener to the method created above. Now, our pieGraph's source in jspx page would look like

                  <dvt:pieGraph id="pieGraph1" subType="PIE_MULTI"
                    <af:dropTarget dropListener="#{pageFlowScope.DnDBean.dropDeptInPie}">
                      <af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"

Now, let us run the page, select couple of Departments and Drop them on the Pie chart.


Here, we've dragged the departments 10 & 30, and dropped them on the chart to get the Salary of the employees belonging to those departments as slices.

Wednesday Feb 08, 2012

Passing comma separated string as bind variable for VO query's IN operator

Quite often, we want to pass a parameter to the bind variable in the VO's query with a comma separated value, for the where clause with an IN operator. However, normal SQL query that the VO contain interpret that whole comma separated value as a single String and our usecase fail to get fulfilled.

Ex. question in OTN thread :

To overcome this, Mohammad Jabr has written a blog entry with the help of  Steve Muench's example #126. This has been achieved by using a TYPE and CASTing it to get the list.

In this article, we'll see another option to alter the query using regexp_substr, without having to use a TYPE and CAST.

Let us take an example of a VO created using EMP table with the following query.



We'll add a where clause to the VO's query with a bind variable that takes comma separated string as input. Here, we would be including regexp_substr function (Oracle DB >=10g), to split the comma separated string and return them as rows.

Now, our Where clause of the VO's query would be looking like

  (select regexp_substr(:Bind_Ename_Comma_Sep_List,'[^,]+', 1, level) 
   from dual 
    connect by 
        regexp_substr(:Bind_Ename_Comma_Sep_List, '[^,]+', 1, level) 
            is not null)
Also, we'll add a Bind Variable Bind_Ename_Comma_Sep_List of String data type. Once after modifying the Where Cluase and after adding the bind variable, our VO would be looking like


To validate our query, let us run the AM tester to check the result


Validate the result by entering a comma separated ENAME list to the bind variable (SMITH,ALLEN,JONES).


Check out the query result


As it can be seen, we've passed 3 comma separated Enames to the bind variable, which in turn fetched only those records with the matching 3 Enames.

Tuesday Jan 31, 2012

What does featureOff attribute do in af:panelCollection

Panel Collection in ADF (af:panelCollection) has an attribute - featureOff, which manages the visibility of certain controls / features of panelCollection to the end user.

As per the doc guide, here are the list of valid values for this attribute.

Value Turns off
statusBar Status bar
viewMenu 'View' menu
formatMenu 'Format' menu
columnsMenuItem 'Columns' sub-menu item
columnsMenuItem:col1,col20 Columns with column ID: 'col1' and 'col20' inside 'Columns' sub-menu
freezeMenuItem 'Freeze' menu item
detachMenuItem 'Detach' menu item
sortMenuItem 'Sort' menu item
reorderColumnsMenuItem 'Reorder Columns' menu item
resizeColumnsMenuItem 'Resize Columns' menu item
wrapMenuItem 'Wrap' menu item
showAsTopMenuItem Tree/TreeTable 'Show As Top' menu item
scrollToFirstMenuItem Tree/TreeTable 'Scroll To First' menu item
scrollToLastMenuItem Tree/TreeTable 'Scroll To Last' menu item
freezeToolbarItem 'Freeze' toolbar item
detachToolbarItem 'Detach' toolbar item
wrapToolbarItem 'Wrap' toolbar item
showAsTopToolbarItem Tree/TreeTable 'Show As Top' toolbar item
wrap 'Wrap' menu and toolbar items
freeze 'Freeze' menu and toolbar items
detach 'Detach' menu and toolbar items

In this article, we will find out what happens at runtime when different values are specified for this attribute (Note : This attribute takes a space-separated list of default features to be turned off for the panelCollection - as mentioned above)

1. statusBar

 <af:panelCollection id="pc1" featuresOff="statusBar">

When we set statusBar to the featuresOff attribute, it hides panelCollection's status bar.


2. viewMenu

 <af:panelCollection id="pc1" featuresOff="viewMenu">

When we set viewMenu to the featuresOff attribute, it completely removes the View Menu.


3. formatMenu

 <af:panelCollection id="pc1" featuresOff="formatMenu">

When we set formatMenu to the featuresOff attribute, it completely removes the Format Menu.


4. columnsMenuItem

 <af:panelCollection id="pc1" featuresOff="columnsMenuItem">

When we set columnsMenuItem to the featuresOff attribute, it removes the Columns menu item under View menu. Check the next option to hide specific columns.


5. columnsMenuItem:col1,col20

<af:panelCollection id="pc1" featuresOff="columnsMenuItem:col1,col2">

When we set columnsMenuItem:.. to the featuresOff attribute, it removes the specified columns from the Columns menu item under View menu. If you want to hide the entire Columns menu item, check the previous option.


In the above example image, columns c3 and c4 belong to the columns Empno and Ename.

6. freezeMenuItem

<af:panelCollection id="pc1" featuresOff="freezeMenuItem">

When we set freezeMenuItem to the featuresOff attribute, it removes Freeze menu item under View menu .


7. detachMenuItem

<af:panelCollection id="pc1" featuresOff="detachMenuItem">

When we set detachMenuItem to the featuresOff attribute, it removes Detach menu item under View menu .


8. sortMenuItem

<af:panelCollection id="pc1" featuresOff="sortMenuItem">

When we set sortMenuItem to the featuresOff attribute, it removes entire Sort menu item under View menu .


9. reorderColumnsMenuItem

<af:panelCollection id="pc1" featuresOff="reorderColumnsMenuItem">

When we set reorderColumnsMenuItem to the featuresOff attribute, it removes Reorder Columns... menu item under View menu .


10. resizeColumnsMenuItem

<af:panelCollection id="pc1" featuresOff="resizeColumnsMenuItem">

When we set resizeColumnsMenuItem to the featuresOff attribute, it removes Resize Columns... menu item under Format menu .


11. wrapMenuItem

<af:panelCollection id="pc1" featuresOff="wrapMenuItem">

When we set wrapMenuItem to the featuresOff attribute, it removes Wrap menu item under Format menu .


12. showAsTopMenuItem

<af:panelCollection id="pc1" featuresOff="showAsTopMenuItem">

When we set showAsTopMenuItem to the featuresOff attribute, it removes Show as Top and Go to Top menu items under View menu (Applicable for the tree/treeTable) .


13. scrollToFirstMenuItem

<af:panelCollection id="pc1" featuresOff="scrollToFirstMenuItem">

When we set scrollToFirstMenuItem to the featuresOff attribute, it removes Scroll to First menu item under View menu (Applicable for the tree/treeTable) .


14. scrollToLastMenuItem

<af:panelCollection id="pc1" featuresOff="scrollToLastMenuItem">

When we set scrollToLastMenuItem to the featuresOff attribute, it removes Scroll to Last menu item under View menu (Applicable for the tree/treeTable) .


15. freezeToolbarItem

<af:panelCollection id="pc1" featuresOff="freezeToolbarItem">

When we set freezeToolbarItem to the featuresOff attribute, it removes Freeze button from the Toolbar.


16. detachToolbarItem

<af:panelCollection id="pc1" featuresOff="detachToolbarItem">

When we set detachToolbarItem to the featuresOff attribute, it removes Detach button from the Toolbar.


17. wrapToolbarItem

<af:panelCollection id="pc1" featuresOff="wrapToolbarItem">

When we set wrapToolbarItem to the featuresOff attribute, it removes Wrap button from the Toolbar.


18. showAsTopToolbarItem

<af:panelCollection id="pc1" featuresOff="showAsTopToolbarItem">

When we set showAsTopToolbarItem to the featuresOff attribute, it removes Go Up, Go to Top and Show as Top buttons from the Toolbar (Applicable for tree/treeTable).


19. wrap

<af:panelCollection id="pc1" featuresOff="wrap">

When we set wrap to the featuresOff attribute, it removes Wrap menu item from Format Menu as well as from the Toolbar. Equivalent to featuresOff="wrapMenuItem wrapToolbarItem".


20. freeze

<af:panelCollection id="pc1" featuresOff="freeze">

When we set freeze to the featuresOff attribute, it removes Freeze menu item from View Menu as well as from the Toolbar. Equivalent to featuresOff="freezeMenuItem freezeToolbarItem".


21. detach

<af:panelCollection id="pc1" featuresOff="detach">

When we set detach to the featuresOff attribute, it removes Detach menu item from View Menu as well as from the Toolbar. Equivalent to featuresOff="detachMenuItem detachToolbarItem".


These options would be useful when using a panelCollection for customizing at end user. A separate options could be provided using these, so that end user can customize the LAF of the panelCollection.

Tuesday Mar 08, 2011

Adding graph in excel based on the content of ADFdi Table

[Read More]

Tips & Tricks from Arun on JDev ADF, Forms, SQL & PL/SQL.


« April 2014