I am working on creating a dynamic form using Primefaces 5.2, FluidGrid (PrimeFaces Extensions 3.1.0)
I have my form in several sub sections so I create a private HashMap<PDIDefinition, List<FluidGridItem>> formItems; where PDIDefinition represents one section of the form.
In my view i then:
<ui:repeat var="pdi" value="#{FormGenerator.formItems.keySet().toArray()}" id="all">
<p:panel header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">
<pe:fluidGrid id="fluidGrid" value="#{FormGenerator.formItems.get(pdi)}" var="data"
hGutter="20" vGutter="10" widgetVar="fluidGridWdgt"
>
<pe:fluidGridItem type="stringValue" >
<div class="dynaFormLabel">
<p:outputLabel for="txt" value="#{data.label}"/>
</div>
<p:inputText id="txt" value="#{data.value}" />
</pe:fluidGridItem>
<pe:fluidGridItem type="integerValue">
<div class="dynaFormLabel">
<p:outputLabel for="int" value="#{data.label}"/>
</div>
<p:spinner id="int" value="#{data.value}" />
</pe:fluidGridItem>
<pe:fluidGridItem type="dateValue" styleClass="calendar">
<div class="dynaFormLabel">
<p:outputLabel for="cal" value="#{data.label}"/>
</div>
<p:calendar id="cal" value="#{data.value}" showOn="button"/>
</pe:fluidGridItem>
</pe:fluidGrid>
</p:panel>
</ui:repeat>
<p:commandButton action="#{FormGenerator.saveValues}" process="form"/>
As you can see I add a Panel for each section and then add a fluidGrid for each section.
My probölem however is that the data in the backend is only stored for the last fluidGrid not for all. I have checked the network log of chrome and can see that all values are submitted to the server.
So my question: How can I ensure that all the data on the server is updated. Or: Is there a way I can group the elements within a single FluidGrid?
More information from the backing bean (item creation process):
private void generateModel() {
fragments = new ArrayList<>();
fragmentValues = new ArrayList<>();
formItems = new HashMap<>();
fields = new ArrayList<>();
for (PDIDefinition pdid : pdiDefinitions) {
Fragment f = new Fragment();
f.setDefinition(pdid.getFragmentDefinition());
fragments.add(f);
List<FluidGridItem> items = new ArrayList<>();
formItems.put(pdid, items);
for (FragmentValueDefinition fvd : f.getDefinition().getFragmentValues()) {
FragmentValue fv = new FragmentValue();
fv.setFragmentValueDefinition(fvd);
fv.setFragmentId(f.getInner());
if (f.getValues() == null) {
f.setValues(new ArrayList<>());
}
f.getValues().add(fv);
fragmentValues.add(fv);
DynamicField df = new DynamicField((fv));
fields.add(df);
if ("String".equals(fvd.getType())) {
items.add(new FluidGridItem(df, "stringValue"));
}
if ("Integer".equals(fvd.getType())) {
items.add(new FluidGridItem(df, "integerValue"));
}
if ("Date".equals(fvd.getType())) {
items.add(new FluidGridItem(df, "dateValue"));
}
}
}
}
EDIT
Changed the xhtml to reflect new findings: <h:form> within <ui:repeat> not entirely working, only the last <h:form> is processed
However values of all but last iteration of <p:dataList> are not updated on server on submit (Values on Submit are reset on the client). Values of the last iteration are stored on the server.
<p:dataList var="pdi" value="#{FormGenerator.formItems.keySet()}" id="all" varStatus="loop" type="none" >
<p:panel id="panel" header="#{pdi.getFragmentDefinition().getFragmentName()}" style="margin-bottom:1em; width:100%;">
<pe:fluidGrid id="fluidGrid" value="#{FormGenerator.formItems[pdi]}" var="data"
hGutter="20" vGutter="10" >
<pe:fluidGridItem type="stringValue" id="txt_">
<div class="dynaFormLabel">
<p:outputLabel for="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
</div>
<p:inputText id="txt" value="#{FormGenerator.formItems[pdi][data.id].getData().value}"/>
</pe:fluidGridItem>
<pe:fluidGridItem type="integerValue" id="int_">
<div class="dynaFormLabel">
<p:outputLabel for="int" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
</div>
<p:spinner id="int" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" />
</pe:fluidGridItem>
<pe:fluidGridItem type="dateValue" id="cal_">
<div class="dynaFormLabel">
<p:outputLabel for="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().label}"/>
</div>
<p:calendar id="cal" value="#{FormGenerator.formItems[pdi][data.id].getData().value}" showOn="button"/>
</pe:fluidGridItem>
</pe:fluidGrid>
</p:panel>
</p:dataList>
Partial POST request on submit as chrome shows me:
form:form
form:all:0:fluidGrid:txt:n
form:all:0:fluidGrid:TV5Wd2IL:txt:
form:all:0:fluidGrid:CYqNHGWx:int_input:
form:all:0:fluidGrid:Y6QIaH1C:cal_input:
form:all:1:fluidGrid:hvi81zhh:txt:k
form:all:1:fluidGrid:iY1YsIDm:txt:
form:all:2:fluidGrid:BA6slTyQ:txt:p
i had entered "n","k" and "p" to the input fields. only "p" was stored on the server.
