Homepage | Developers
DynaForm
This example demonstrates how to build dynamic forms with lables 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
Input values
Sure
false
No
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:editor value="#{data.value}" width="380" height="150"/>
        </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;
    }

    /* note: trick with colspan is needed for IE8 */
    .pe-dynaform-cell input,
    .pe-dynaform-cell[colspan="1"] input {
        width: 130px;
    }
</h:outputStylesheet>
            
Components and more
Use Cases
Documentation
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value Instance of type DynaFormModel representing model of this component.
var Name of the request-scoped variable for the underlaying object for each iteration.
varContainerId Name of the request-scoped variable which contains the prefix of the client Id within pe:dynaFormControl. This property allows to get the whole clientId of a component within pe:dynaFormControl. The whole client Id is sometimes required for JavaScript or RequestContext.update(...).
autoSubmit Flag whether the form has to be submitted automatically after current page has been loaded. Note: the form can be submitted if it contains at least one submit button. Default value is false.
openExtended Flag whether the extended grid has to be shown opened on page load. Default value is false.
buttonBarPosition Button bar position. Possible values are "top" | "bottom" | "both". Default value is "bottom".
style Style of the main container element. Default value is null.
styleClass Style class of the main container element. Default value is null.
PrimeFaces Extensions Showcase - © 2011-2013, PrimeFaces: 4.0, PrimeFaces Extensions: 1.1.0, JSF: mojarra 2.1.26, Server: jetty/8.1.0.RC2, Build time: 2013-11-11 21:02
Theme
afterdark
afternoon
afterwork
aristo
black-tie
blitzer
bluesky
bootstrap
casablanca
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x
home
hot-sneaks
humanity
le-frog
midnight
mint-choc
overcast
pepper-grinder
redmond
rocket
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com