Thursday, September 16, 2010

Search Page To Edit Page And Back to Search Page With Refreshed Data


Here is a way of doing the following scenario:

Download the Sample Application

We have a search page with a Criteria and a result Table. The criteria have Query Automatically to false. This is to prevent from fetching any data on the page.

We have another page that edits the selected row from the table. This is called the Edit page.

There is a navigation from Search Page to Edit page.

Finally we want when to  navigate back from the Edit page to Search page, to have the new data refreshed on the search table.

First we create a View object with View Criteria.  This example uses the Countries Table from HR schema.

In the View Criteria we add the CountryId in the Criteria.
Then we create a bindVariable to hold the value.

We make sure that the attribue and the Bind Variable are of the same type.

By default the wizard sets the View Criteria to NOT query Automatically, which is what we want for this example. Query Automatically false means that no data will be displayed on the page until a search is issued:

Then we set the bind Variable to be hidden while the View Criteria will be rendered on the jspx.

Finally, we have a view Object with a view Criteria:

Next, we create a page for the search page:

On the wizard, check the row Selection checkBox:

 The result of it the following screen:

We surround the table with a panel Collection layout and drop a Button from the pallete:

The Edit button will be included in the toolbar facet of the panel collection:

For now, we dont have any navigation set.

First we have to create the edit page. Is the same process as the search page. Instead of droping the criteria, this time we will drop the iterator as a form:

We drag and drop the commit operation on the footer of the form in order to save any data changed:

For the simplicity of the example remove the disabled condition of the commit button.

Also, we create a button below the commit button that will navigate us back  to the search page:

Then we drop a navigation flow from Search page to Edit page.

Now, we go back on the Main(search) page and locate the edit button(it is in the toolbar facet of the panelCollection) and set the action that points to edit page:

If we run the main page we will have a search page with no data.

If we press search button, all data will be fetched.
Then we press the edit button and we navigate to to the edit page we will see that the record we choosed is displayed in the edit form

At this point we do not have any functionality on the Back button:

What we want is to navigate back  and reflect the data..

All we have to do is to create another navigation flow back from edit page to search page:

Then, we have to assign the correct action to the back button:
Back in the edit page we locate the back button and set the back action to it:

And thats it!

Download the Sample Application


  1. Hi, Dimitris! I read Your blog. I tried Your example. It works fine. I do like You in my project. But when I go back to search page in my project, then I have empty result table. Maybe it is because I use fragment and in fragment I umplement shearch page? Or Maybe problem is that in edit page I don't uses the same VO that in search page? If there is problem in my menthioned cases, then what to do?

    Best regards, Debuger!

  2. Hi! Did You read my comment? And what is Your oppinion about that?

    Waiting response from You, Best regards, Debuger!

  3. Hi Kristaps,

    Maybe you could send me an email with your case to look into it and modify it. This will save us time from trying to figure out the best approach.


  4. I sent to You my project. Hope You receive it, please let me know is something not clear.

    Best regards, Debuger!



Related Posts Plugin for WordPress, Blogger...