Friday, September 25, 2015

Master-Detail Pattern Implementation in ADF 12c Alta UI

ADF 12c and Alta UI change the way how we used to implement UI in ADF. Let's take a look into Master-Detail. Before Alta UI usual implementation for Master-Detail would be based on vertical layout with master on the top and details below. Alta UI provides different patterns like left-right, bottom-top for Master-Detail implementation - Oracle Alta UI Patterns. I would recommend to watch a demo from Shay Shmeltzer, he explains how to build left-right Master-Detail - Developing Your First Oracle Alta UI page with Oracle ADF Faces. In my post I'm taking a step further and explaining how to manage Master-Detail relationship between different regions.

Here you can watch a demo of sample application developed for today post:

Country list on the left acts as a menu. User can select any country and this will force regions displayed in the central area to refresh and show information based on selected country. I'm keeping regions in synch without Contextual Events, using simple solution described in this post - Simple (Effective) Refresh Approach for ADF Regions.

Selection changes in Menu region trigger list filtering in Employees Directory tab:

Detail data displayed in Profile tab is also filtered. In the top block is displayed additional information for Master record. Employees from selected country are displayed in the form with navigation controls. Overview block displays information about all employees from selected country:

If country selection is changed, detail data is refreshed to stay in synch:

Administration tab contains table with pagination support, also filtered based on Master record change in countries:

Countries menu block is implemented in separate region. Selection listener is overwritten to process menu item selection:

Listener updates session scope variable with a key of selected country. Region refresh approach is implemented based on the method described in the post mention above:

Content region is implemented by TF with a router. Here we check if Country ID TF input variable is not empty and execute detail records filtering:

Country ID is defined as TF input parameter:

Session scope variable updated by Countries menu listener is set as a input value for region parameter. Each time when session scope variable is changed (new country is selected), region with such input parameter will be refreshed:

Region will be refreshed, only if Refresh property will be set to ifNeeded:

It might be enough to reload only one region. If another region contains PPR supported components (tables, forms) - data can be reloaded automatically with ChangeEventPolicy = ppr set for iterator:

Download sample application -

No comments: