Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Tag Archives: adf

Call a bean method after ajax call

Many requirements asks to call external service using ajax or do some javascript like using js calendars and on user click send the response to the bean to save it in database or to do some business validation.

The way to do that is using serverListener & clientListener .

The serverListener tag is a declarative way to register a server-side listener that should be executed when a custom client event is fired.

while The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired.

I have created a small demo application that calls ajax call & jquery to get location & ip and then we will send it to back bean which will be printed in the console.

Lets see the steps

1.create a jspx page and add a button like this

 <af:panelGroupLayout id="pgl1" layout="vertical">
<af:commandButton text="Get My Location" id="cb1">
<af:clientListener type="action" method="callAjaxAndNotifyServer"/>
<af:serverListener type="servListener"

2. add af:resource with the code below

 var actionbtn;
 var response_Json
 function callAjaxAndNotifyServer(actionEvent) {
 actionbtn = actionEvent.getSource();//
 $.ajax( {
 url : "", data : '', type : "GET", error : function (XMLHttpRequest, textStatus, errorThrown) {

 ajaxError(XMLHttpRequest, textStatus, errorThrown);
 success : function (data) {

 response_Json = JSON.stringify(data);

 AdfCustomEvent.queue(actionEvent.getSource(), "servListener",
 fvalue : response_Json
 return false;
 error : function (xhr, status, err) {

 var err = eval("(" + xhr.responseText + ")");
 alert('' + err.Message);
 console.log('Error in Ajax
 call:' + err.Message);

actionEvent.cancel(); is needed if you are using commandbutton without partialsubmit=”true”
AdfCustomEvent.queue(actionEvent.getSource(), “servListener”,
fvalue : response_Json
return false;
registers the custom event and set parameter “fvalue” with the json string value

3.create a bean for example backbean demoBB with method name getAjaxCallbackValue 

that you already referenced in your serverListner in step 1 & add the code to this method as follows to print the value

public void getAjaxCallbackValue(ClientEvent clientEvent) {




Webcenter portal & ADF Responsive

After implementing ADF & portal responsive I have concluded many hints to follow while implementing
The main problem of the responsive it that adf components render as table
1- Limit the use of the components that render tables in the html dom and use html code if needed in verbatim tag
2- Limit the use of layout component that has tables or horizontal layout as it render in tables
• Preferably use bootstrap templates.
• Create templates with panelgrouplayout vertical & default and create a custom style class to make it to horizontal example ;


• In portal use panel customizable under each other don’t implement it horizontal preferably add it in panelgrouplautout and use the above class & css to draw your page.
• Do the responsive in one CSS file and import it in your template and use media queries inside it.
• All width should in percentage. You may use with for small components on the page but that would be difficult in responsive.
• If you are obliged or have to use component that have fixed width use java script to change the width in responsive.

Resetting form in ADF popup / Reset Any component

While developing a Form on ADF pop-up I have learned that the pop-up is fetched once on page load. On canceling the pop-up & open it again it still persists its data which is not what we all need.
I have tried many ways to reset the form as setting contentDelivery=”lazyUncashed” , resetting all the fields programmatically , delete dirty data & clear VO cache associated with the form. Until i found the magic line which resets the component as it wasn’t fetched before
UIComponent myPopupComponent = actionEvent.getComponent();;

Getting selected time in ADF calendar

It took me about 6 hrs to know how ADF calendar component set the time in the popup form the project posted here.

But it didn’t satisfy the implementation needs as it passes the time automatically through the calendarModel behind the scene,after some investigations , i found that there are some events associated with the calendar that can helps.

I used the Calendar event  listener property and created a method that takes CalendarEvent as a parameter and used the CalendarEvent object to get the triggered time as below.



    public void calEvent(CalendarEvent ce){

    <af:calendar value="#{bindings.CalendarView1.calendarModel}" id="c1" availableViews="all"
                         view="month" startDayOfWeek="mon" startHour="9"

Updating Bunises components with the Database Tables.

I used to work hibernate & JPA before developing ADF business components and i was wondering why As ADF business components based on the ORM (object relational mapping) and does not  have reverse mapping from objects to database.

I figured out a way to do it , but it is not directly wizard steps.

  1. create your entity objects
  2. Create database connection to your empty database.
  3. Create An application module based on the database connection and add your entity objects in its XML
  4. make sure the package of the entity objects are the same in the application module
  5. right click on the package and synchronize with the database.
%d bloggers like this: