ADF UIX Editable Table

Written by Jonas Jacobi, Oracle Corporation
August, 2004

Creating a multi-editable table

This ADF UIX request has been listed as one of the top 10 on the Oracle Technology Network forum the last couple of weeks - "How can I create an editable table in UIX?". Well, there is no built in support for multiple row edit with the ADF UIX table component and ADF Databinding in JDeveloper 10g. However, there is a simple solution ... Well, to be more precise there are two solutions whereas the one featured in this article is the most scalable solution.

ADF UIX Table component

Sample code of the column component:

<column>
<columnHeader>
<sortableHeader model="${ctrl:createSortableHeaderModel(bindings.EmployeesView1,'FirstName')}"/>
</columnHeader>
<contents>
<textInput model="${uix.current.FirstName}"
columns="10" readOnly="true"/>
</contents>
</column>

By changing the readOnly attribute on the textInput component to FALSE you can make the component editable, but there is a catch. In an ADF UIX table we only define one input component per column and then the table component stamp out as many rows/components defined by the underlying data model, say for example 5 rows. To ensure that the unique value in each cell is sent to the server the table treats the name attribute on any of its stamped components as special, and alters it before rendering the component into a given cell. For instance, if a column component was an input control with the name "foo", the table would alter the actual value of the name rendered into each cell to take the form: tableName: foo: rowIndex where tableName would be replaced by the value of the table's name attribute and the rowIndex would be replaced with an integer indicating which row that stamp is being rendered into.

This identifier can then be used to recognize a "row". The problem is that there is no built in support for this in the ADF Databinding for UIX. The data binding will not recognize the new identifier created by the Table component, it expects the "old" ID and only one component. This is only an issue when you want to submit values back to the model and not when you have read only output.

Using Switchers


Sample code:

<column>
<columnHeader>
<sortableHeader model="${ctrl:createSortableHeaderModel(bindings.EmployeesView1,'FirstName')}"/>
</columnHeader>
<contents>
<switcher childName="${uix.current.EmployeeId.inputValue == bindings.EmployeeId.inputValue ? 'selected' : 'notselected'}">
<case name=" selected">
<textInput model= "${bindings.FirstName}" columns="10" readOnly="false"/>
</case>
<case name=" notselected">
<textInput model= "${uix.current.FirstName}" columns="10" readOnly="true"/>
</case>
</switcher>
</contents>
</column>

Note worthy in the above code sample is the two different types of bindings used. The " bindings.foo" type is a heavy weight object that supports, text input,  validation, errors, formatting, etc... and the " uix.current.foo" type is a lightweight object that supports looping and is read only.

Turning off the name transformation

nameTransformedNotenameTransformed

Sample code:

<table nameTransformed="false" model="${bindings.EmployeesView1}" id="EmployeesView12" partialRenderMode="multiple" partialTargets="_uixState">

Setting partial refresh on Table component

targetfirePartialAction

Sample code:

<tableSelection>
<singleSelection model="${bindings.EmployeesView1Iterator}" text="Select and ">
<primaryClientAction>
<firePartialAction targets="_uixState EmployeesView12" source="EmployeesView12" event="select"/>
</primaryClientAction>
<contents/>
</singleSelection>
</tableSelection>

Committing data

If you are using Oracle JDeveloper 10g you can drag and drop a Commit button from the Data Control palette to your table. This Commit button is disabled by default, but that can be adjusted by performing a form submission or by setting the disabled attribute in the Property Inspector to FALSE. If you use the form submission approach there are multiple ways of doing so. You can add a submit button to the table, or add the formSubmitted="true" attribute to the firePartialActions element, or set one of the client side event handlers for your input component to - e.g. onChange or onBlur - to " submit();".

Download sample application

This is a JDeveloper 10g (9.0.5.2) workspace. You also need the Oracle database sample HR schema to test the application.

Download sample application

false ,,,,,,,,,,,,,,,