arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
DynaForm
This example demonstrates how to utilize a helpful attribute varContainerId. It is a name of the 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(...).

Every input here has an icon to select a single value from a dialog. The selected value will be set into the corresponding input field after a click on the button "OK".
Source

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

    <pe:dynaForm id="dynaForm" value="#{containerDynaFormController.model}"
                 var="data" varContainerId="ccId">
        <pe:dynaFormControl for="txt">
            <h:panelGroup style="white-space: nowrap;">
                <p:inputText id="txt" value="#{data.value}"/>
                <p:commandButton icon="pi pi-search" process="@this txt"
                                 update=":mainForm:dialogList" oncomplete="PF('dialogListWdgt').show()"
                                 title="Please choose an item"
                                 style="border:none;">
                    <f:setPropertyActionListener value="#{ccId}"
                                                 target="#{containerDynaFormController.containerClientId}"/>
                    <f:setPropertyActionListener value="#{data}"
                                                 target="#{containerDynaFormController.selectedField}"/>
                    <f:setPropertyActionListener value="#{data.value}"
                                                 target="#{containerDynaFormController.selectedItem}"/>
                </p:commandButton>
            </h:panelGroup>
        </pe:dynaFormControl>

        <f:facet name="buttonBar">
            <p:commandButton value="Submit" process="dynaForm"
                             update=":mainForm:dynaFormGroup :mainForm:inputValues"
                             oncomplete="PF('inputValuesWidget').show()"/>
        </f:facet>
    </pe:dynaForm>
</h:panelGroup>
    
<p:dialog id="dialogList" widgetVar="dialogListWdgt">
    <f:facet name="header">
        Please select an item
    </f:facet>

    <h:selectOneListbox id="selectList" value="#{containerDynaFormController.selectedItem}"
                        style="width:200px;">
        <f:selectItems value="#{containerDynaFormController.list}"/>
    </h:selectOneListbox>

    <h:panelGroup layout="block" style="white-space:nowrap; margin-top:15px;">
        <p:commandButton value="OK" icon="pi pi-save" style="margin-right:5px"
                         process="@this selectList" action="#{containerDynaFormController.updateSelection}"
                         global="false" oncomplete="PF('dialogListWdgt').hide()"/>
        <p:commandButton value="Cancel" type="button" onclick="PF('dialogListWdgt').hide()"/>
    </h:panelGroup>
</p:dialog>    

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

<h:outputStylesheet id="dynaFormCSS">
    .pe-dynaform-cell input,
    .pe-dynaform-cell[colspan="1"] input {
        width: 150px;
    }
</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-13 11:37