Task: Assign JavaScript parameters to a property in a bean. It can be done in a convenient way with pe:remoteCommand and pe:assignableParam. AssignableParam specifies a name of the parameter and an EL expression for a corresponding Java method (setter) the parameter will be applied to. It allows to attach a converter or define it as usual in JSF by converter attribute.

- - -

<p:growl id="growl" showDetail="true" />

<pe:remoteCommand id="applyDataCommand" name="applyData" process="@this" update="subject date circle growl"

    <pe:assignableParam name="subject" assignTo="#{remoteCommandController.subject}"/>
    <pe:assignableParam name="date" assignTo="#{}">
        <f:convertDateTime type="both" dateStyle="short" locale="en"/>
    <pe:assignableParam name="circle" assignTo="#{}">
        <pe:convertJson />

<script type="text/javascript">
    circle = {
        radius: 50,
        backgroundColor: "#FF0000",
        borderColor: "#DDDDDD",
        scaleFactor: 1.2
    circle2 = {
        radius: 32,
        backgroundColor: "#FF0320",
        borderColor: "#DDFFFD",
        scaleFactor: 1.6

<h:outputLabel for="subject" value="Subject: " />
<h:outputText id="subject" value="#{remoteCommandController.subject}" />
<h:outputLabel for="date" value="Date: " />
<h:outputText id="date" value="#{}" />
<h:outputLabel for="circle" value="Circle: " />
<h:outputText id="circle" value="#{} - #{} - #{} - #{}" />

<p:commandButton value="Apply Data" type="button" onclick="applyData('hello world', '5/14/07 12:55:42 PM', JSON.stringify(circle))" />
<p:commandButton value="Apply Second Data" type="button" onclick="applyData('hello user', '7/11/01 11:55:42 PM', JSON.stringify(circle2))" />
Components and more
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
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.
value Label of the component.
actionListener An actionlistener to process when command is executed.
action A method expression or a string outcome to process when command is executed.
immediate Boolean value that determines the phaseId of the action event, when true actions are processed at "Apply Request Values", when false at "Invoke Application" phase.
name Name of the command.
update Component(s) to update with ajax.
process Component(s) to process partially instead of whole view.
onstart Javascript handler to execute before ajax request is begins.
oncomplete Javascript handler to execute when ajax request is completed.
onerror Javascript handler to execute when ajax request fails.
onsuccess Javascript handler to execute when ajax request succeeds.
global Global ajax requests are listened by ajaxStatus component, setting global to false will not trigger ajaxStatus. Default value: true.
async When set to true, ajax requests are not queued. Default value: false.
partialSubmit When enabled, only values related to partially processed components would be serialized for ajax instead of whole form.
autoRun When set to true, command will be invoked on page load.
PrimeFaces Extensions Showcase - © 2011-2019, PrimeFaces: 7.0, PrimeFaces Extensions: 7.0.1, JSF: mojarra 2.3.2, Server: jetty/9.4.2.v20170220, Build time: 2019-05-21 21:46