ADF: Oracle Form like overflow in ADF Faces + current row highlighting

This is step-by-step instruction how to create Oracle Forms like overflow layout in ADF Faces and how to highlight selected row in data table.

1. In your adf faces page change form tag from h:form to af:form to have simple item ids.

2. Create overflow.js javascript file with this method:

function selectRow(itemClicked, tableId, radioId) {
  var rowId = itemClicked.id.substring(itemClicked.id.indexOf(":") + 1,
                                       itemClicked.id.lastIndexOf(":"));
  radioItem = document.getElementById(tableId+":"+rowId+":"+radioId);
  if (!radioItem.checked) {
      radioItem.click();
  }
}

3. Attach the javascript to your page with:

<script src="overflow.js" type="text/javascript"> </script>

Change path of js file as needed.
Note: there must be a space character between <script> tag and enclosing </script> tag otherwise the generated html code will not be correct.

4. Drop your data source on the page as an adf table and choose desired columns. Drop the same data source as an adf form under the table and choose items you want to see in overflowed block.

5. Enable select one selection in the table

6. Give the table id = tbl, selection radio button (tableSelectOne component) id = selRow

7. Enable Auto Submit for the tableSelectOne radio button

8. Set overflowed panelForm partialTriggers to table id "tbl"


9. Add these properties to each table item:

styleClass="#{row.rowKeyStr == bindings.YourIterator.currentRowKeyString ?
                                                      'currentRow' : ''}"
onfocus="selectRow(this, 'tbl', 'selRow')"

where "YourIterator" is name of your data source iterator and "currentRow" is name of css skin selector for highlighed items. The selector could look like:

.currentRow {
   background-color: rgb(255,255,181);
}

Now you can run the page.
Mouse click on any table item will change current row and the row will be highlighed. Overflowed block will always contain values from the current row.

You can temporarily download zipped JDeveloper 10.1.3.1 demo applicaton of adf overflow from here.
It is based on emp and dept tables from scott db schema.

Rado