Richfaces 4.X popupPanel: How can i pass parameters?

[dasago]

Hello,

how can i pass parameters to a popup?

In richfaces 3.X it works with the following code:

Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});

Is it also possible in version 4.x?

[boy18nj]

Basically you are passing parameters to the predefine properties,

if you want to resize it, use the following attributes, minWidth and minHeight. You use facet to define header and controls. See below.

Example-

<h:commandLink value="Show pop-up">

<rich:componentControl target="popup" operation="show" />

</h:commandLink>

...

<a4j:form>

<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">

<f:facet name="header">

<h:outputText value="The title of the panel" />

</f:facet>

<f:facet name="controls">

<h:graphicImage value="/pages/

close.png" style="cursor:pointer" onclick="#{rich:component('popup')}.hide()" /

>

</f:facet>

<p>

This is the content of the panel.

</p>

</rich:popupPanel>

</a4j:form>

[nbelaevski]

Hi,

This should be working also - please check for showcase example that uses component control to pass parameters.

[dasago]

Hi,

thanks for your fast reply.

How can i get the parameters in popup?

For example:

<h:commandLink styleClass="no-decor" title="test">

     <h:graphicImage value="/images/edit.gif" />

     <rich:componentControl target="popup" operation="show" event="click" >

          <f:param value="#{rowNum}" name="rowNum" />

     </rich:componentControl>

</h:commandLink>

<h:form>

     <rich:popupPanel id="popup" autosized="true">

            <h:outputText value="{rowNum}" />

                <a4j:commandButton value="cancel"

                    oncomplete="#{rich:component('popup')}.hide(); return false;"

                />

            </h:panelGrid>

     </rich:popupPanel>

</h:form>

[ilya_shaikovsky]

no client templating not migrated for now. So noo components which allow to pass parameters in JS and use  in markup to substitute on activation.

So you have some other options like:

* use ajax rendering and show panel on request completion

* use custom JS to perform markup corrections in componentControl onbeforeoperation

* if need to pass parameters - could pass among the same hash but then will be able only to process using custom JS again:

<rich:popupPanel id="pp" resizeable="true" onshow="alert(this.parameters.foo1)"

                    header="Popup panel shown using rich:componentControl and rich:hashParam">

...

<h:commandButton value="Show popup">

                    <rich:componentControl target="pp" operation="show" onbeforeoperation="">

                              <a4j:param noEscape="true" value="event" />

                              <rich:hashParam>

                                        <f:param name="width" value="500" />

                                        <f:param name="height" value="300" />

                                        <f:param name="minWidth" value="300" />

                                        <f:param name="minHeight" value="150" />

                                        <a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />

                                        <a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />

                                        <f:param name="foo1" value="fooBar1" />

                              </rich:hashParam>

                    </rich:componentControl>

          </h:commandButton>

[dasago]

Do you know when it is supported?

[ilya_shaikovsky]

planning for future versions will be done after Final release.

[pbaker01]

Is there a way to pass position parameters when using:

oncomplete="#{rich:component('confirmPane')}.show() ??

I am using a pattern similar to what is shown in the RichFaces Showcase for Data Table Edit.
http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=dataTableEdit&skin=blueSky

and I would like to position the popupPanel next the the row that I am editing.

I am using RF 4 and JSF 2.0.

Thanks in advance.

Paul

[holger.lierse]

Hi Paul,

Did you ever find a solution to pass a parameter? I've got the following oncomplete which used to work in Richfaces 3:

oncomplete="#{rich:component('editMarginModal${tableId}')}.show()"

Having ${tableId} as a parameter now longer works in Richfaces 4. Is there a workaround?

Thanks,

Holger

[jhuska]

Hi Holger,

I am not sure, but is not this what you are looking for ?

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=hashParam&skin=blueSky

[holger.lierse]

Hi Juraj,

Thanks for your reply. I should have mentioned that the ${tableId} is a parameter passed into a custom tag. We have a lot of similar tables (on one page) so we defined a custom tag which is allows us to have a more generic approach.

Here's a bit more code:

Custom Tag definition with the tableId parameter defined:

<com:marginTable tableId="cfdDefaultMarginTable" margins="#{panel.defaultMargins}" header="Default" panelName="#{panel.panelName}" />

This parameter is passed through to various "templates" which are getting reused. Each table has an action colum which has the following commandButton defined:

<a4j:commandButton id="editMarginButton"

          onclick="if ( #{!s:hasRole('editMargin')} ) {alert('You do not have privilege to edit margin');  return false}"

          oncomplete="#{rich:component('editMarginModal${tableId}')}.show()"

          action="#{editMarginAction.setEditMarginDetails(margin)}"

          image="../img/iconEdit.png"

          render="editMarginModal${tableId}"

          rendered="#{margin.status == 'Active' and margin.pendingStatus == null and hierarchyDetail.owningEntity.level != 'Base'}">

</a4j:commandButton>

I've tried to replace it with a componentControl:

<a4j:commandButton id="editMarginButton"

          onclick="if ( #{!s:hasRole('editMargin')} ) {alert('You do not have privilege to edit margin');  return false}"

          action="#{editMarginAction.setEditMarginDetails(margin)}"

          image="../img/iconEdit.png"

          render="editMarginModal${tableId}"

          rendered="#{margin.status == 'Active' and margin.pendingStatus == null and hierarchyDetail.owningEntity.level != 'Base'}"

>

          <rich:componentControl target="editMarginModal${tableId}" operation="show" event="oncomplete"/>

</a4j:commandButton>

But the event still doesn't get triggered. No javascript error either.

Is this the right approach for this?

Thanks,

Holger

[holger.lierse]

I noticed that the "oncomplete" should probably be "complete"

When changing the componentControl to:

<rich:componentControl target="editMarginModal${tableId}" operation="show" event="click"/>

the popup shows but no data is available since the server request wasn't made.

<rich:componentControl target="editMarginModal${tableId}" operation="show" event="complete"/>

doesn't show anything. No javascript.

Is event="complete"  the correct attribute value?

Thanks