How duplicate part of form in JSF/PrimeFaces on button click

Question

I have an "Add" button at the bottom that when clicked, I want it to duplicate part of form below the existing one. How to change automatic id and value for new inputs , I need this later for generating reports with all entries.

<h:panelGrid columns="2">
        <p:outputLabel value="From: " />
                <p:inputMask id="date1" value="#{data.date1}" mask="99/99/9999"/>
                    <p:outputLabel value="To: " />
                 <p:inputMask id="date2" value="#{data.date2}" mask="99/99/9999"/>
                    <p:outputLabel value="Name: " />
                <p:inputText id=name1    value="#{data.name}" />

                    <p:outputLabel value="Description: " />
                <p:inputTextarea id=description1 value="#{data.description}" />
                    </h:panelGrid>

score 0 · Accepted Answer · answered Aug 27 '16 at 14:56

i would do it this way:

create an ArrayList of your Data-Object example List<Data> dataList; in your ManagedBean, then use dataTable in the view to display the fields of each Data-Object.

when you click the "duplicate Button", an action/ajax methode could be called within your bean to duplicate or add new entries to the dataList, ...etc.

something like:

<h:dataTable var="data" value="#{bean.dataList}">
<h:column>
   <h:panelGrid columns="2">
        <p:outputLabel value="From: " />
        <p:inputMask id="date1" value="#{data.date1}" mask="99/99/9999"/>
        <p:outputLabel value="To: " />
        <p:inputMask id="date2" value="#{data.date2}" mask="99/99/9999"/>
        <p:outputLabel value="Name: " />
        <p:inputText id=name1    value="#{data.name}" />
        <p:outputLabel value="Description: " />
        <p:inputTextarea id=description1 value="#{data.description}" />
   </h:panelGrid>
</h:column>
</h:dataTable>

How duplicate part of form in JSF/PrimeFaces on button click

1 Answers1