Understanding Af:table properties.

Hi All,

In this blog i would like to show you / explain some basic but very vital property of AF:Table. Everyone use af:table to their day to day project which make af:table most usable component among ADF component.

it is not a simple component like outText or inputText , therefore it required time to understand. In this post i would like to show how table rendered and when it fetch data and what are the property which impact this behavior.

And also i divided my this post into two main part .

1-UI properties
2-Model and Binding properties

1-UI properties
Some are UI property which i am going to explain are

1-content delivery.
2-fetch size
3-auto

2- Binding properties

1-Range size (Binding )

As you all know af:table is collection of rows which show on ui when initial page load , however we can configure this property.

First i will example default behavior of table which we get while dragging and dropping collection from data control to ui page.

and also table binding code
<af:table value="#{bindings.EmployeeVO.collectionModel}" var="row"
                      rows="#{bindings.EmployeeVO.rangeSize}"
                      emptyText="#{bindings.EmployeeVO.viewable ? 'No data to display.' : 'Access Denied.'}"
                      fetchSize="#{bindings.EmployeeVO.rangeSize}"
                      rowBandingInterval="0"
                      selectedRowKeys="#{bindings.EmployeeVO.collectionModel.selectedRow}"
                      selectionListener="#{bindings.EmployeeVO.collectionModel.makeCurrent}"
                      contentDelivery="whenAvailable"
                      rowSelection="single" id="t1">


  <iterator Binds="EmployeeVO" RangeSize="25"
              DataControl="AppModuleDataControl" id="EmployeeVOIterator"/>

1-RangeSize="25"
So now we need to understand bold setting value , perhaps most of people know this , but still i would like to point out here that the Range Size is 25 mean it will only fetch 25 rows in one single request.

2-contentDelivery="whenAvailable" 
 This will determine when data need to fetch, description from jdeveloper help

Valid Values: immediate, lazy, whenAvailable

whether data should be fetched when the component is rendered initially. When contentDelivery is "immediate", data is fetched and inlined into the component chrome. If contentDelivery is "lazy", data will be fetched and delivered to the client during a subsequent request. If contentDelivery is set to "whenAvailable", upon initial rendering, the renderer queries the model for available data. Data is fetched and rendered immediately if model indicates that data is available. So contentDelivery="whenAvailable" behaves like "immediate" if data is available upon initial rendering.
later we will see how this work in real scenario.

3- fetchSize="#{bindings.EmployeeVO.rangeSize}"
 The fetch size will decide number of rows should be fetch in one request.

here one more point i putted table inside panel stretch layout which basically stretch table to available space. Later will see how autoHeightRows property will impact table rendering.

Since loading page will have a lot request and response , therefore i added command which basically adding partial trigger on table .So if i run this page which default configuration then request and response will work like this. So if i click on button to refresh table ,and if see network on chrome browser(f12) then we can see three different request and response.

screenshot is below

1-first response content only HTML code for table with any data.

2-subsequnece request will fetch data but since the fetch size is only 25 , therefore it will only fetch 25 rows, however there is still space available on browser then it will send third request to fill available request.
3-And third and final request it will fetch 25 rows more.

There is some indicator which you can see in java script response for example
In second request , response i can see this _rowCount="107" _startRow="0" .Which basically telling to java script that told number of row count is 107 and starting row number is 0.

And third response has _rowCount="107" _startRow="25"which basically self explanatory.

Point to remember here

1-Fetch size is decide how many records need to fetch in one request.
2-Bydefault fetch range size is same as Range size of iterator which by default 25. we can change as based on requirement.
3-Content delivery by default is when available means when model has data ready. If in above example we change content delivery size from when available to immediate then you can see in only two request it will fetch data, mean while rendering component it will fetch data and put in component chrome.

So this just a example there can a lot scenario which can impact and change table behavior , however this will give some basic knowledge.

Above table is inside panel stretch layout which basically stretch it child , in this case autoHeightRows property does not have any impact , it will ignored.

However if we put inside any non stretch layout then it property will impact table rendering.

following description in jdeveloper help

1-The number of rows used to size the component height. 
2-The default value is -1 (no auto-sizing for any number of rows).
3-The height of the component can grow to a maximum of 'autoHeightRows' after which a scrollbar is displayed. This attribute is also supported when the component is inside PanelCollection.
4-A value of 0 can be used to default the autoHeightRows to the current fetchSize. 'autoHeightRows' value cannot be larger than "fetchSize" attribute. If a value larger than fetchSize is specified, the value is capped at the fetchSize. 
5-If a value larger than the number of rows is specified, the number of rows in the component is used to size the component height. 'autoHeightRows' works with contentDelivery=immediate/lazy/whenAvailable. 'autoHeightRows' attribute has no effect in screen reader mode. Note that specifying a CSS "height" in the "inlineStyle" attribute will have no effect and will get overriden by the auto-sized height. Specifying CSS "min-height" and "max-height" values in the "inlineStyle" attribute is not recommended and is incompatible with the autoHeightRows attribute.
6-When the component is placed in a layout-managing container, such as panelSplitter, it will be sized by the container (no auto-sizing will occur). 
  

In this example i gave FetchSize =10 ,autoHeightRows="5" and table is inside non stretch layout component.

This is simple but importance point which we need remember and it is very useful our day to day activity.

Thanks,
Prateek



<