Sunday, August 17, 2008

Show Buttons based on Disclosed Tab

In 11g it becomes quite common use case to structure application page with tabbed panels. If you develop your pages based on templates, most probably there will be separate area for buttons implemented with af:toolbar tag. And this area will not be included into tabbed panel, since template usually will not contain panel elements. Here is example of such structure:


You will face a problem with this structure, when there will be requirement to display different sets of buttons based on different tab (in Oracle ADF, currently opened tab is called - disclosed). This means, area with buttons should be updated, each time user changes current tab.

You can download sample application, where described case is implemented - TabsButtonsDynamic.zip. This sample contains three tabs - Countries, Jobs and Departments. Based on tab currently selected, different buttons are rendered. However, all buttons are initially created on the page, just rendered conditionally.

There are three steps, in order to have buttons conditionally rendered based on currently disclosed tab:

1. Disclosure Listener

Since there is no AutoSubmit property for Tab component, we will use DisclosureListener in order to catch event, when current tab is disclosed:


In this case, we can use the same DisclosureListener for all Tabs.

2. Partial Target

Generated DisclosureListener method will contain only one line of code - it will refresh af:toolbar area with buttons.


As you have noticed, there is no need to refresh each button individually, its enough to apply partial target to toolbar.

3. Rendered property

Each button should have conditional Rendered property.


This property will return boolean value based on currently disclosed tab.

Thats all, really simple and straightforward solution.

If you will run developed sample application, you will notice 4 buttons displayed while in Countries tab - First, Previous, Next and Last:


There will be 2 buttons in Jobs tab - Create and Save:


Finally, 1 button in Departments tab - Save:

2 comments:

Anonymous said...

Hi, Can you tell me the difference between the item listener and disclosure listener?please tell me which one will be called when?

Ajay Taneja said...

Hi Andrejus,

Is there a way by which we can make tab disclose on any event being performed.
Lets say on clicking of link/button.