Using an af:pop-up component to edit a table row

An af:popup component can be used in conjunction with an af:dialog to display and edit data within a page on a separate pop-up dialog. The pop-up is added to the corresponding JSF page, and can be raised either declaratively using an af:showPopupBehavior or programmatically by adding dynamic JavaScript code to the page.

In this recipe, we will expand the functionality introduced in the previous recipe, to allow for the editing of a table row. The use case that we will demonstrate is to raise an edit form inside a pop-up dialog by double-clicking on the table row. The changes made to the data inside the dialog are carried over to the table.

Getting ready

This recipe relies on having completed the Using an af:query component to construct a search page recipe in this chapter.

How to do it…

1. 1. Open the MainApplication workspace. Locate the queryTaskFlow in the Application Navigator and double-click on it to open it.

2. 2. Go to the task flow Overview...