How to add a context menu in a table

In ADF11 it is possible to create context menus in a table. This is a menu that can be opened by right clicking on a table row.

In this blog is described how to add a context menu in a table.

Overview of the context menu:

Setup example application

For this blog an example application is created based on the HR schema. The example application contains an employees table with 2 detail forms, one to insert and edit an employee without department) and 1 to change the department of the employee. The detail forms are created in separate pages. For the employees table and forms a bounded task flow is created this bounded task flow is started from the menu.

Model layer

Create the following entities:

Entity name	Based on table of HR schema	Customizations made
Employee	EMPLOYEES	None

Create the following view objects:

View object name	Based on entities	Customizations made
EmployeesView	Employee	None

Create an application module HrAppModule which exposes the EmployeesView.

Task flow

Unbounded task flow

The unbounded task flow form where we start with the solution looks like this:



There are no customizations made, the task flow is created by drag and drop.

Bounded task flow

The employees task flow is a bounded task flows:



The next properties are set:

Property	Value
usePageFragments	false
Share data controls with calling task flow	true

Table page

The table pages are created by drag and drop from the Data Controls. The table is dropped as ADF Read-only table with Row Selection and Sorting checked, all columns are displayed.





The Row Selection property must be checked, this causes the following properties to be set in the table:

Property	Value
selectedRowKeys	#{bindings.EmployeesView.collectionModel.selectedRow}
selectionListener	#{bindings.EmployeesView.collectionModel.makeCurrent}
rowSelection	single

Although in the JSPX page the selectedRowKeys and selectionListener statements contains warnings that the references methods cannot be found they can be found runtime.

Form pages

The form pages are created by drag and drop from the Data Controls. The form is dropped as ADF Form.



To navigate back from the form to the table a rollback button (af:commandButton) is added by drag and drop the Rollback operation from the datacontrol palette as a button.



The submit button is created in the same way but then from the Commit operation.

The edit and insert employee page contains all fields but with department ID readOnly. The change department page contains the employee ID, first name, last name and department ID. All fields except department ID are read only.

Add the context menu

An ADF table contains a facet named contextMenu. With this facet a menu popup can be created that pops up when the user right clicks on a table row. If the table contains no rows the context menu does not popup on right click.

Insert in the table the contextMenu facet. This facet should contain a popup and in this popup a menu can be defined. Submenu entries can be created by inserting another menu tag in the menu:

<f:facet name="contextMenu">

<af:popup id="popup">

<af:menu id="menu">

<af:menu id="employeeMenu"

text="Employee">

<af:commandMenuItem text="Edit" 

id="editEmployeeMenu"

action="edit"/>

<af:commandMenuItem text="Insert"

id="insertEmployeeMenu"

action="edit"

actionListener="#{bindings.CreateInsert.execute}"/>

</af:menu>

<af:menu id="departmentMenu"

text="Department">

<af:commandMenuItem text="Change department for employee"

id="changeMenu"

action="change"/>

</af:menu>

<af:commandMenuItem text="Cancel"

id="cancelMenu"

action="cancel"/>

</af:menu>

</af:popup>

</f:facet>

The insert menu option is created by drag and drop the CreateInsert operation of the EmployeesView, the action is overridden so it navigates to the same page as edit employee:



When the user for example choses Change department for employee:



This results in: