How to add af:inputFile dynamically within each row of table?

Question

I need to add af:inputfile dynamically within each row of af:table, when the user hits a commandlink at the bottom of each row.
I have tried wrapping af:inputfile with af:foreach:
<af:table value="Bean.rows" var="row">
<af:column>
<af:forEach step="1" begin="1"
end="#{Bean.filecount}">
<af:inputFile label="Please upload a file"
id="1"
valueChangeListener="#{Bean.onClickUpload}"/>
</af:forEach>
<af:commandLink text="Add more file" id="cl3" actionListener="#{Bean.onAddFile}"/>
</af:column>
</af:table>
in Bean.onAddFile, I have:
public void onAddFile(ActionEvent event){
filecount++;
It works but there's no independent control of each row. When I click one commandlink, All rows now have 2,3,.... af:inputFile. The change affects all rows.
The requirement should be that when I click one commandlink in a row, only that row shows additional af:inputFile.
So why not leverage the row variable of the table, right? That's what I did, I changed the end attribute of foreach to the following:
<af:forEach step="1" begin="1"
end="#{row.fileRowCount}">
the backing bean method changed to the following:
public void onAddFile(ActionEvent event){
int filerowcount = (Integer)JsfUtil.resolveExpression("#{row.fileRowCount}");
Integer newcount = filerowcount+1;
JsfUtil.setExpressionValue("#{row.fileRowCount}", newcount.toString());
Note that "row" refers to an object that has a int field called "filerowcount". And the initial value is "1".
Just for testing, I also added <af:outputText value="row.filerowcount"/>, to see if the count is what I expected it to be.
I didn't see the any af:inputfile this time, but the outtext is showing the filerowcount properly. When I click the commandlink, the number changed to 2,3,..... Also in the backing bean newcount and filerowcount is incrementing correctly.
I know the begin, end attribute means the index of a for loop. So I changed begin="0", it now shows one row of af:inputfile, but when I click the commandlink, no additional rows are shown. (Although the outputtext of filerowcount keeps incrementing as expected.
So to sum up, the END attribute of af:foreach row CAN pick up the value from the backing bean and render af:inputfile dynamically, but it CANNOT pick up the value from the the field in VAR object of a table.
Is is a known issue? Or I did something by mistake.
Is there any other way to add af:inputFile dynamically within each row of table?
Any advice/comment is appreciated.

Answer 1

Hi,
here is how it goes:
- add an af:inputFile to the column and set its rendered property to point to a managed bean property. The managed bean property has a default value of "false" and the bean should be in viewScope
- create another variable that holds the row number that should show the inputFile component. This is updated by the command link and evaluated by the get method of the managed bean property controlling the inputFile visibility
- Define a property name for the table varStatus property
- For the command link, define a attribute f:attribute with the name rowNumber and set its value to #{varStatusPropertyName.index}
- define an action listener for the command link
public void showInputFile(ActionEvent actionEvent){
int rowNumber = ((RichCommandLink) actionEvent.getSource()).getAttributes().get("varStatusPropertyName");
//set the value on the internal variable
- In the getter of the property that defines the render value of the inputFile, use code like this
public boolean get<whatever name you use>(){
//access the following EL from Java #{varStatusPropertyName.index}
int currentRenderedRow = <EL result here>;
// compare the current row index with the one set by the command link, which is stored in the variable of the managed bean
if true return true
else return false
- Set the PartialTriggers property of the table to point to the commandLink ID so the table is repainted when the command link is pressed
This should then render the fileInput component for a single row (the one you clicked the command link in)
Frank