jsf 2.2 - Richfaces: show details in popup [commandbutton, action and popupPanel]

Question

I have a xhtml like this:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.org/schema/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

    <ui:define name="body">
        <h:body>
            <h:form id="form">
                <rich:panel>
                    <rich:dataTable value="#{scriptConsole.serversList}" var="server">

                        <f:facet name="header">
                            <h:outputText value="Servers" />
                        </f:facet>

                        <rich:column>
                            <f:facet name="header">Name</f:facet>
                            <h:outputText value="#{server.name}" />
                        </rich:column>

                        <rich:column>
                            <f:facet name="header">Actions</f:facet>
                            <a4j:commandButton value="view" oncomplete="#{rich:component('modalScripts')}.show();" action="#{scriptConsole.setServerSelected(server)}"/>
                        </rich:column>
                    </rich:dataTable>
                </rich:panel>
                <rich:popupPanel id="modalScripts" modal="true" autosized="true"
                    resizeable="false">
                    <f:facet name="controls">
                        <h:outputLink value="#"
                            onclick="#{rich:component('modalScripts')}.hide(); return false;">X</h:outputLink>
                    </f:facet>
                    <h:outputText
                            value="#{scriptConsole.serverSelected.name}" />

                </rich:popupPanel>
            </h:form>
        </h:body>
    </ui:define>
</ui:composition>

I try to show a datatable with server info and show the details of a server in a popup, but when the button are clicked the details of server not appears in popup, i dont know how set the server selected in the bean and show it in the popup.

Answer 1

Store server identifier (name or id) in bean (see my answer) and reuse it in popup.

Example:

    <h:form id="notesForm">
        <rich:messages />

        <a4j:jsFunction name="selectRow" oncomplete="#{rich:component('noteDetails')}.show()"
            render="noteDetailsForm">
            <a4j:param name="noteId" assignTo="#{chNotesAction.currentNoteId}"
                converter="javax.faces.Long" />
        </a4j:jsFunction>

        <rich:dataTable id="noteTable" style="width: 100%"
            value="#{chNotesAction.notesList}" var="rs"
            rowClasses="oddrow, evenrow" columnClasses="nowrap,"
            rows="#{referenceData.recordsPerPage}" sortMode="single"
            onrowclick="selectRow('#{rs.noteLogId}')"
            rowKeyVar="currRow">

            <rich:column id="date">
                <f:facet name="header">
                    <h:outputText value="#{msg.entryDate}" />
                </f:facet>
                <h:outputText value="#{rs.changeDate}" />
            </rich:column>

            <rich:column>
                <f:facet name="header">
                    <h:outputText value="#{msg.notesType}" />
                </f:facet>
                <h:outputText value="#{rs.noteType}" />
            </rich:column>

            <f:facet name="footer">
                <rich:dataScroller renderIfSinglePage="false" for="noteTable"
                    stepControls="show" fastControls="hide" />
            </f:facet>
        </rich:dataTable>
    </h:form>

    <rich:popupPanel id="noteDetails" autosized="true">
        <f:facet name="header">
            <h:panelGroup>
                <center>
                    <h:outputText value="#{msg.noteTitle}" />
                </center>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
            <h:graphicImage value="/images/close.png" 
                style="cursor:pointer" onclick="#{rich:component('noteDetails')}.hide()" />
        </f:facet>
        <h:form id="noteDetailsForm">
            <rich:messages />

            <h:panelGrid columns="2" columnClasses="nowrap,">
                <h:outputText value="#{msg.notes}" />
                <h:inputTextarea value="#{chNoteForm.noteText}" label="#{msg.notes}"
                    rows="10" cols="50" style="resize:none;">
                    <f:validateLength maximum="4000" />
                </h:inputTextarea>

                <h:outputText value="#{msg.clientInitiated}" />
                <h:selectBooleanCheckbox value="#{chNoteForm.clientInitiated}" />
            </h:panelGrid>
        </h:form>
    </rich:popupPanel>

Bean part:

    private Long currentNoteId;
    public void setCurrentNoteId(Long noteId) {
        this.currentNoteId = noteId;
        // setup popup related data here
        }
    }