Theme
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".
Please select an item
Input values
  • Input 1: Some text
  • Input 2: Some text
  • Input 3: Some text
  • Input 4: Some text
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
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.
columnClasses Comma separated list of label and control style classes. Default value is null.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 10.0.0,PrimeFaces Extensions: 10.0.5,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-08-28 16:46
occured!