Is it possible to add row dynamically to panelgrid(outputlabel, inputtext) in PrimeFaces/JSF?

Question

I have a <p:panelGrid> like this:

<p:panelGrid style="margin:inherit !important; width: 100%;
             display: flex !important;"
             styleClass="new_player_panel">

    <p:row>
        <p:column>
            <p:outputLabel value="Name in passport: " />
        </p:column>
        <p:column>
            <p:inputText id="nameInPassport"
                         value="#{firstPlayerLoginManagedBean.surnameInPassport}"
                         required="true">
            </p:inputText>
        </p:column>
        <p:column>
            <p:message for="nameInPassport" display="icon" />
        </p:column>
    </p:row>
    <p:row>
        <p:column>
            <p:outputLabel value="Firstname in passport:" />
        </p:column>
        <p:column>
            <p:inputText id="firstnameInPassport" label="Utazási"
                         value="#{firstPlayerLoginManagedBean.firstnameInPassport}"
                         required="true">
            </p:inputText>
        </p:column>
        <p:column>
            <p:message for="firstnameInPassport" display="icon" />
        </p:column>
    </p:row>
</p:panelGrid>

and so on.

I tried to create this with dataGrid(managedbean, inputfields in lists) , but <p:dataGrid> is not the perfect way to do my task exactly. I want to get behavior like this: If I click the plus icon next to the nationality field then creates another <p:inputText> for my second nationality and the other part of the form stay in the same state, and the new field push down the other fields. I have to use it a lot parts of my application. thanks in advance.

Answer 1

You can use <ui:repeat> to achieve this functionality, this is how you can achieve this functionality:

*.xhtml page, you build nationality field dynamically after you press "Add Nationality" button.

<h:outputPanel id="nationality_container">
<ui:repeat value="#{bean.passport.nationalities}" var="nationality">
    <h:outputLabel value="#{bean.getNationalyLabel(nationality)}"
    <h:inputText value="#{nationality}"/>
</ui:repeat>
</h:outputPanel>

<h:commandButton value="Add Nationality" listener="#{bean.addNationality}" update="nationality_container"/>

Backing Bean:

public Bean{
private Passport passport;

//adding new nationality and set its index
public void addNationality(){ //adding new nationality and set its index
    passport.getNationalities.add(new Nationality(passport.getNationalities.size()));
}

//this method return you appropriate label, for id = 1 it's "First Nationality", and so on
public String getNationalityLabel(Nationality nationality){
   if(nationality.id == 1){
        return "Nationality";
   }else if(nationality.id == 2){
        return "Second nationality";
   }
   ...
}

}

Object passport which encapsulates List<Nationality> nationalities;

public Passport{
    ...
    private List<Nationality> nationalities;
    ...
}

Object Nationality with parameter index to store its index, first, second, third.

public Nationality{
    int index; //1,2,3... first, second, third nationality, etc...
    String nationality;
    public Nationality(int index){
        this.index = index;
    }
}

Of course you can find a more elegant solution for your task, but using <ui:repeat> tag is required.

Pay attention that I didn't test this code, this is only general idea how this functionality should be implemented.