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 an advanced dynamic form with facets, autoSubmit feature and extended view area (grid).

When you see this page, the form was already submitted on page load automatically - autoSubmit feature allows to submit the form after the current page has been loaded. What it is good for? autoSubmit flag makes possible to pass form parameters in URL, build a form on page load and submit it automatically. Extended grid with form elements is closed per default, but you can open it by using of client-side API (see last form button). Open / close state is managed automatically, so that the form is shown correct after a postback update.
This is a regular header area
This is a regular footer area
Source

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

    <pe:dynaForm id="dynaForm" value="#{advancedDynaFormController.model}" var="data"
                 autoSubmit="true" buttonBarPosition="both" widgetVar="dynaFormWidget">
        <pe:dynaFormControl styleClass="pe-dynaform-label">
            <h:outputText value="#{data}"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="input" for="input">
            <p:inputText id="input" value="#{data.value}" required="#{data.required}"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="date" for="date" styleClass="calendar">
            <p:calendar id="date" value="#{data.value}" required="#{data.required}" showOn="button"/>
        </pe:dynaFormControl>
        <pe:dynaFormControl type="desc" for="desc">
            <p:inputTextarea id="desc" value="#{data.value}" required="#{data.required}" autoResize="false"/>
        </pe:dynaFormControl>

        <f:facet name="headerRegular">
            <div><h:outputText value="This is a regular header area"/></div>
        </f:facet>
        <f:facet name="footerRegular">
            <div><h:outputText value="This is a regular footer area"/></div>
        </f:facet>
        <f:facet name="headerExtended">
            <div><h:outputText value="This is an extended header area"/></div>
        </f:facet>
        <f:facet name="footerExtended">
            <div><h:outputText value="This is an extended footer area"/></div>
        </f:facet>        
        <f:facet name="buttonBar">
            <p:commandButton value="Search" action="#{advancedDynaFormController.submitForm}"
                             process="dynaForm" update=":mainForm:dynaFormGroup :mainForm:inputValues"
                             oncomplete="handleComplete(xhr, status, args)"/>
            <p:commandButton type="reset" value="Reset" style="margin-left: 5px;"/>
            <p:commandButton type="button" value="Show / hide advanced search" style="margin-left: 5px;"
                             onclick="PF('dynaFormWidget').toggleExtended()"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>

<p:dialog header="Input values" widgetVar="inputValuesWidget">
    <h:outputText value="Search has been executed with values:"/>
    <p:dataList id="inputValues" value="#{advancedDynaFormController.inventoryProperties}" var="property"
                style="margin:10px;">
        <h:outputText value="#{property.position}: #{property.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: 130px;
    }

    /* note: trick with colspan is needed for IE8 */
    .pe-dynaform-cell.calendar input,
    .pe-dynaform-cell[colspan="1"].calendar input {
        width: 100px;
    }
    
    .pe-dynaform-headerfacet div,
    .pe-dynaform-footerfacet div {
        border: 1px dotted #808080;
        padding: 10px;
        text-align: center;
    }    
</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.
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-03-16 12:06