arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
DynaForm
This example demonstrates how to build a simple dynamic form. Main steps:

  • Create model instance: DynaFormModel model = new DynaFormModel();
  • Add row to regular grid: DynaFormRow row = model.createRegularRow();
  • Add label: DynaFormLabel label = row.addLabel(value, colspan, rowspan);
  • Add editable control: DynaFormControl control = row.addControl(data, type, colspan, rowspan);
  • Set relationship between label and control (optional): label.setForControl(control);
Repeat four last steps as many times as needed. The main component tag is pe:dynaForm. Child tag pe:dynaFormControl matches created in Java controls by type attribute. This is usually a "one to many" relation.

You also see that one of important features is a buil-in support for labels. DynaForm renders labels automatically - no need to write p:outputLabel. But of course h:outputText can be used as a quite normal tag inside pe:dynaFormControl with a proper type as well.
Source

<h:panelGroup id="dynaFormGroup">
    <p:messages id="messages" showSummary="true"/>

    <pe:dynaForm id="dynaForm" value="#{dynaFormController.model}" var="data" columnClasses="label-container, field-container">
        <pe:dynaFormControl type="input" for="txt">
            <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="calendar" for="cal" styleClass="calendar">
            <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="select" for="sel">
            <p:selectOneMenu id="sel" value="#{data.value}" required="#{data.required}">
                <f:selectItems value="#{dynaFormController.languages}"/>
            </p:selectOneMenu>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="textarea" for="tarea">
            <p:inputTextarea id="tarea" value="#{data.value}" required="#{data.required}" autoResize="false"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="rating" for="rat">
            <p:rating id="rat" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>

        <f:facet name="buttonBar">
            <p:commandButton value="Submit" action="#{dynaFormController.submitForm}"
                             process="dynaForm" update=":mainForm:dynaFormGroup :mainForm:inputValues"
                             oncomplete="handleComplete(xhr, status, args)"/>
            <p:commandButton type="reset" value="Reset" style="margin-left: 5px;"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>

<p:dialog header="Input values" widgetVar="inputValuesWidget">
    <p:dataList id="inputValues" value="#{dynaFormController.bookProperties}" var="bookProperty"
                style="margin:10px;">
        <h:outputText value="#{bookProperty.name}: #{bookProperty.formattedValue}"
                      style="margin-right: 10px;"/>
    </p:dataList>
</p:dialog>

<h:outputScript id="dynaFormScript" target="body">
/* <![CDATA[ */
    function handleComplete(xhr, status, args) {
        if(args && args.isValid) {
            PF('inputValuesWidget').show();
        } else {
            PF('inputValuesWidget').hide();
        }
    }
/* ]]> */
</h:outputScript>

<h:outputStylesheet id="dynaFormCSS">
    /* note: trick with colspan is needed for IE8 */
    .pe-dynaform-cell input,
    .pe-dynaform-cell textarea,
    .pe-dynaform-cell[colspan="1"] input,
    .pe-dynaform-cell[colspan="1"] textarea {
        width: 150px;
    }

    /* note: trick with colspan is needed for IE8 */
    .pe-dynaform-cell.calendar input,
    .pe-dynaform-cell[colspan="1"].calendar input {
        width: 120px;
    }

    .pe-dynaform-cell .ui-selectonemenu {
        width: 134px;
    }
    
    .label-container {
        font-weight: bold;
    }
    
    .field-container input {
        text-transform: uppercase;
    }
</h:outputStylesheet>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
autoSubmitWhen true, form is submitted automatically on change.Default is false.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
buttonBarPositionPosition of the button bar: 'top', 'bottom', or 'both'.Default is bottom.
columnClassesComma-separated CSS classes for label and control columns.
idUnique identifier of the component in a namingContainer.Default is generated.
openExtendedWhen true, extended rows are shown by default.Default is false.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
styleInline style of the component.
styleClassStyle class of the component.
valueThe dynamic data model (e.g. DynaFormModel).
varName of the request-scoped variable that exposes the current row/control data.
varContainerIdName of the request-scoped variable that exposes the current container client id.
widgetVarName of the client side widget.Default is generated ('widget_' + componentClientId).
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-06-03 13:31