Tuesday, September 24, 2013

Refreshing parent table on Closing Pop Up using returnListener : ADF

In this post we will see how to refresh parent table on adding a new row using a pop up.

So while creating a new row in the table component using pop up, after adding mandatory fields and pressing OK, the parent table is not refreshed to have the new row. Instead it shows a blank row. If you refresh the page then it shows the newly added row. We will fix this later in this post. Lets first dive in and create a basic sample app that will be used for this use case from scratch.

The application can be downloaded from here TableRefreshOnPopUp.zip



Created a simple ADF Application as below with model and viewcontroller projects. Created EmployeeEO and VO in the BC layer.



Created a a jspx page tableWithPopUp in the viewcontroller project and dragged EmployeeVO from datacontrols to the page and made it as reaed only table as shown below.



Created a panel collection around the table component and a button in tool bar to add new row.




Created a af:pop and added af:showPopUpbehavior under create new row button.



Now in order to call create insert on loading of pop up, I will add PopUpFetchListener and create a managed bean and handler for this listener as below.


Implemented below code to execute create insert on loading of pop up.


Now add a dialogue inside a pop up and drag EmployeeVO from Datacontrols to create a form which will be our way to add values for a new row. Enter all mandatory fields like below.

Add commit and rollback button in toolbar from DataControls and run the page. Below is the page how it looks at this time.

Now click on createinsert button and pop up will be invoked.


Enter mandatory values in as shown below


On Clicking Ok, as you can see below the changes are not there in the table, it still shows a blank new row.


But when page is refreshed , it shows the new row added to the table(vo).


So here is the problem, we need that when user clicks OK on the pop up, the row should be shown in the parent table, that means we need to refresh the parent table on clicking of OK.

We will be using returnListener to implement this and refresh the parent table on closing pop up with OK button.


So now lets go ahead and implement the solution.

On the dialogue, set Type as none (by default it is ok/cancle) add a button named OK.


Now add returnListener on this OK button. Add a new handler in the bean as shown below.


Now get the reference of the parent table in the bean by adding bindings of the table to attribute of a bean as shown below.


Below is the code which is there in the returnListener method which refreshes the parent table.

AdfFacesContext.getCurrentInstance().addPartialTarget(masterTable);


Lets run the page and try adding a new row by adding values of new row in the pop up.


On clicking OK , the parent table gets refreshed and you can see the newly added row in the table.



So we are finally able to refresh the parent table on closing of the pop up with values in it.

Happy Learning!!






2 comments:

  1. Hi, I think that pointing table partial trigger to dialog and popup component will solve the problem.

    ReplyDelete
  2. Hi Patrik,

    You are right. But this demonstrates cases where ppr is not achieved by setting partial trigger and the main focus is on doing PPR programatically which can be used in other use cases as well.

    Thanks
    Rohan

    ReplyDelete