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 dynamic forms with labels above fields and various elements like PrimeFaces separator. Try to switch two forms by clicking on the "Switch model" link. Note, XHTML code with pe:dynaForm stays the same, only Java model gets changed.
Switch model
Make choice
PrimeFaces fan?Married?Children
Notes
Hallo DynaForm!
Source

<p:commandLink id="switch" value="Switch model" process="switch" update="dynaFormGroup"
                   action="#{anotherDynaFormController.switchModel}" style="font-weight:bold;"/>

    <h:panelGroup id="dynaFormGroup" layout="block" style="margin-top: 15px;">
        <p:messages id="messages" showSummary="true"/>

        <pe:dynaForm id="dynaForm" value="#{anotherDynaFormController.model}" var="data"
                     openExtended="true" widgetVar="dynaFormWidget">
            <pe:dynaFormControl styleClass="pe-dynaform-label">
                <h:outputText value="#{data}"/>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="separator" styleClass="separator ui-state-disabled">
                <h:panelGrid columns="2" style="width:100%;" columnClasses="separatorText">
                    <h:outputText value="#{data}"/>
                    <p:separator/>
                </h:panelGrid>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="name" for="autocompl">
                <p:autoComplete id="autocompl" value="#{data.value}" required="#{data.required}"
                                dropdown="true" completeMethod="#{anotherDynaFormController.complete}"/>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="address" for="txt">
                <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="booleanchoice">
                <p:selectBooleanCheckbox value="#{data.value}" required="#{data.required}"
                                         style="vertical-align:middle;"/>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="radiochoice">
                <p:selectOneRadio value="#{data.value}" required="#{data.required}">
                    <f:selectItems value="#{data.selectItems}"/>
                </p:selectOneRadio>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="editor">
                <p:textEditor value="#{data.value}" height="150" secure="false"/>
            </pe:dynaFormControl>
            <pe:dynaFormControl type="audioslider">
                <h:inputHidden id="input" value="#{data.value}"/>
                <h:panelGrid columns="2">
                    <p:slider for="input" display="output" style="width:150px;"/>
                    <h:outputText id="output" value="#{data.value}" style="margin-left: 5px;"/>
                </h:panelGrid>
            </pe:dynaFormControl>

            <f:facet name="buttonBar">
                <p:commandButton value="Submit" action="#{anotherDynaFormController.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 more fields"
                                 rendered="#{anotherDynaFormController.model.existExtendedGrid}"
                                 style="margin-left: 5px;" onclick="PF('dynaFormWidget').toggleExtended()"/>
            </f:facet>
        </pe:dynaForm>
    </h:panelGroup>

    <p:dialog header="Input values" widgetVar="inputValuesWidget">
        <h:panelGroup id="inputValues" layout="block" style="margin:10px;">
            <h:outputText value="#{anotherDynaFormController.formFields}" escape="false"/>
        </h:panelGroup>
    </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">
        .pe-dynaform-cell {
            padding-bottom: 8px;
        }

        .pe-dynaform-label {
            text-align: left;
            padding: 2px 20px 0 0;
        }

        .pe-dynaform-cell.separator {
            padding: 10px 0 10px 0;
        }

        .pe-dynaform-cell.separator .separatorText {
            width: 15%;
            padding-left: 0;
        }

        .ui-autocomplete .ui-autocomplete-dropdown {
            right: -2px;
        }
    </h:outputStylesheet>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32