ADF UI - Easy implementation of editable forms using <af:iterator>

In this post, I'm going to show you how to use <af:iterator> to iterate through a list of employees and allow user to edit the employee details in a form. Sample application can be downloaded from here.

If you're new to using <af:iterator>, here are the simple implementation steps to convert <af:table> code to work with <af:iterator> to iterate through the VO rows referred by the table.

1. First, drop your VO which you want to iterate as <af:table> in your jsf page. </af:table>

 <af:table value="#{bindings.EmpDeptVO.collectionModel}" var="row"
                  rows="#{bindings.EmpDeptVO.rangeSize}"
                  emptyText="#{bindings.EmpDeptVO.viewable ? 'No data to display.' : 'Access Denied.'}"
                  fetchSize="#{bindings.EmpDeptVO.rangeSize}"
                  rowBandingInterval="0" id="t2" width="100%"
                  contentDelivery="immediate" autoHeightRows="10">

2. Now, drop <af:iterator> from component pallette and specify the values for properties  value, rows and var copying from <af:table> that you dropped.

<af:iterator id="i1" value="#{bindings.EmpDeptVO.collectionModel}"
                     var="row" rows="#{bindings.EmpDeptVO.rangeSize}"
                     varStatus="i">

3. Now, copy the attributes from table (which are under each column) into the <af:iterator> (from the sample application, you can see the attributes under af:iterator and af:table are same).

4. Arrange all these attributes in your preferred layout and run the page. That's it. You'll see each VO row data one by one. If you've dropped it as editable fields, you can edit them and Commit (as shown in the sample example).

That's it! Now, you understood how easy it is to implement editable forms using <af:iterator>. The sample output will be like this: