This post is about a common question
How can we populate an af:table programmatically ?
It means that data in af:table is not populated through model layer (Using ViewObject) using binding layer. lets say I have some values in our managed bean and have to show records in tabular format on page
So what we have to do -
More posts on POJO Based table -
Get selected row (single/multiple) from POJO based table in ADF
Apply sorting to POJO based af:table programmatically , Using custom sort listener in ADF
Thanks , Happy Learning :)
Download-Sample ADF Application
How can we populate an af:table programmatically ?
It means that data in af:table is not populated through model layer (Using ViewObject) using binding layer. lets say I have some values in our managed bean and have to show records in tabular format on page
So what we have to do -
- First you should know the number and data type of columns in table, suppose i have to populate a table for person details (name, mobile number and salary). to get and set value of columns i have created a java bean class , it has 3 variable for 3 columns
- Next step is to create a managed bean for referencing af:table , this managed bean makes use of person java bean class to add data in same format for all table rows. A List data structure is used to pass all values in af:table. See code of managed bean
- Now just drop an af:table on page and set it's properties like value, column header and text values in columns
- Now run this application and see there will be one row in table as code is added in constructor of managed to populate one row
- I have added a form and button in page to add new records in table , see the form source code
// Java Class to set and get value for table column public class PersonBean { public PersonBean(String name, String moNo, Integer salary) { this.Name = name; this.mobNo = moNo; this.salary = salary; } private String Name; private String mobNo; private Integer salary; public void setName(String Name) { this.Name = Name; } public String getName() { return Name; } public void setMobNo(String mobNo) { this.mobNo = mobNo; } public String getMobNo() { return mobNo; } public void setSalary(Integer salary) { this.salary = salary; } public Integer getSalary() { return salary; } }
//ArrayList to poplate data in af:table List<PersonBean> personList = new ArrayList(); //To Populate default row in table (Code in Constructor) public ProgTableBean() { personList.add(new PersonBean("Ashish Awasthi", "xxxxxxxxxx", 50000)); } public void setPersonList(List<PersonBean> personList) { this.personList = personList; } public List<PersonBean> getPersonList() { return personList; }
As i have to show only 3 columns so deleted extra ones
Set properties -
value- from where table collection is populated
columns values- take the var reference of table and refer variable name in List (here 'row' is table var and second is variable name in person bean class)
See the XML source of af:table-
<af:table var="row" rowBandingInterval="1" id="t1" value="#{viewScope.ProgTableBean.personList}" partialTriggers="::b1"> <af:column sortable="false" headerText="Name" id="c1" width="150"> <af:outputText value="#{row.name}" id="ot1"/> </af:column> <af:column sortable="false" headerText="Mobile Number" id="c2"> <af:outputText value="#{row.mobNo}" id="ot2"/> </af:column> <af:column sortable="false" headerText="Salary" id="c3" align="right"> <af:outputText value="#{row.salary}" id="ot3"/> </af:column> </af:table>
<af:panelFormLayout id="pfl1"> <f:facet name="footer"/> <af:inputText label="Name :" id="it1" binding="#{viewScope.ProgTableBean.nameBind}"/> <af:inputText label="Mobile Number :" id="it2" binding="#{viewScope.ProgTableBean.mobNumBind}"/> <af:inputText label="Salary :" id="it3" binding="#{viewScope.ProgTableBean.salaryBind}"> <af:convertNumber/> </af:inputText> <af:button text="Add Record" id="b1" actionListener="#{viewScope.ProgTableBean.addNewRcord}"/> </af:panelFormLayout>
Code in managed bean for button action-
- now run and check application-
/**Method to add new record in table * @param actionEvent */ public void addNewRcord(ActionEvent actionEvent) { //Get all values using compoenet binding as mobNumBind if (mobNumBind.getValue() != null && nameBind.getValue() != null && salaryBind.getValue() != null) { // Add new Record in List personList.add(new PersonBean(nameBind.getValue().toString(), mobNumBind.getValue().toString(), Integer.parseInt(salaryBind.getValue().toString()))); } }
More posts on POJO Based table -
Get selected row (single/multiple) from POJO based table in ADF
Apply sorting to POJO based af:table programmatically , Using custom sort listener in ADF
Thanks , Happy Learning :)
Download-Sample ADF Application
Hi Ashish
ReplyDeleteam very thankful for every post of yours those are very helpful for beginners like me and your support is uncountable
Sorry to disturbing you with my issue
I populated table with the help of this blog but am getting small issue with F5 Refresh rest every thing fine
Please take a look on my issue i posted in otn
https://community.oracle.com/message/13920573#13920573
In this example I used constructor to populate data but may be in your case constructor is called multiple times due to bean scope so avoid writing code in that
DeleteHi Ashish,
ReplyDeleteI noticed that your HTML could be a little more automation friendly if you didn't assign auto-assign attributes based on their position in the list, but rather on something immutable and searchable by the application under test e.g. the mobile#.
When you add attributes to rows like id="r1",id="r2", etc. that's no help to automation location, because as the data changes so does the attribute you assign. Web automation testers using Selenium need a unique attribute that stays with the field as it moves.
Thanks
Hi Ashish,
ReplyDeleteI am feeding my table with a list just like you.
Is there a way to filter table(search in table) for this dynamic table?
Thank you
Hi Murat
DeleteI never tried this but for reference you can look at- Custom POJO Filtering-Paging-Sorting ADF Table DataControl
Or you can create POJO based data control and then drop it as table on page with filtering and sorting
Ashish
Code is working perfectly with view scope. but the same is not working with a managed bean. After click of button no rows are getting added to the table if we use a managed bean. Any pointers Ashish?
ReplyDeletesorry for my comment it was a backing bean. I mistakenly put as managed bean.
ReplyDeleteYou should not use backing bean for this as it is used to contain UI component definitions
DeleteUse viewScope managed bean to populate data in table
Ashish
You should declare the List as static to populate data in table.
DeleteNice article! Thank you, Ashish
ReplyDeleteHi Ashish,
ReplyDeletehope you are doing well ,
its a nice post ,
but when i tried to populate the fields and give ADD action its prompt me to "not able able to convert from RichInputText to String " have tried to find out where it goes wrong then but no luck ,any waves from your end Ashish
Have you checked attached sample application ?
DeleteHi Ashish, thanks a lot for your tutorial very helpful. I tried it with a new project and I have added only one field in my table which is rowNo but keep getting "Reference "row.mobNo" not found and when i execute my page no data is displayed from my table.Any advice how i can solve the issue?
ReplyDeleteThis comment has been removed by the author.
Delete