Erick
Erick

Reputation: 833

PrimeFaces wizard next button

I have a <p:wizard> with two tabs. On the first tab, there is a <p:dataTable> and the user needs to select a row to keep going. If they don't select that row, I want to stop the user for going to the next tab and to display a message. I am able to display the message with this code but when they click next, the next button disappears:

public String onFlowProcess(FlowEvent event) {
    //si no eligen un afiliado, desplegar un error: "Debe elegir un afiliado para seguir"

    if (afiliado.getSelectedAfi() == null) {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage("Debe de elegir un afiliado para continuar."));

        return "afiliadoTab";
    } else {
        return event.getNewStep();
    }
}

I could put the XHTML code, if needed. In the above code, afiliadoTab is the name of the current tab where the data table is. I am telling it that if the afiliado object is null (if the user doesn't select a row), to display the message and stay there. The "stay there" is not working well. Am I doing something wrong in this code?

This is the XHTML code relevant to the question (the wizard part):

<p:wizard flowListener="#{afiliadoController.onFlowProcess}">
    <!-- first tab -->
    <p:tab id="afiliadoTab" title="Afiliado">
        <p:panel header="Agrega un afiliado" id="panelAfiliado">
            <!-- <p:messages autoUpdate="true" for="validationAfiForm"/> -->
            <p:panelGrid columns="4"  layout="grid">
                <p:outputLabel for="nombres" value="Nombres:" />
                <p:inputText id="nombres" value="#{afiliadoController.afiliado.nombre}"
                             requiredMessage="Debe insertar un nombre."/>

                <p:outputLabel for="apellidos" value="Apellidos:" />

                <p:inputText id="apellidos" value="#{afiliadoController.afiliado.apellido}"
                             requiredMessage="Debe insertar un apellido."/>

                <p:outputLabel for="estadoCivil" value="Estado Civil:" />

                <p:selectOneMenu id="estadoCivil" effect="drop" value="#{afiliadoController.afiliado.estado_civil}"
                                 requiredMessage="Debe seleccionar un estado civil.">

                    <f:selectItem itemLabel="Estado Civil" itemValue=""/>
                    <f:selectItem itemLabel="Soltero" itemValue="S"/>
                    <f:selectItem itemLabel="Casado" itemValue="C"/>
                    <f:selectItem itemLabel="Union Libre" itemValue="U"/>
                    <f:selectItem itemLabel="Divorciado" itemValue="D"/>
                    <f:selectItem itemLabel="Viudo" itemValue="V"/>
                </p:selectOneMenu>

                <p:outputLabel for="direccion" value="Direccion:" />
                <p:inputText id="direccion" value="#{afiliadoController.afiliado.direccion}"/>
                <p:outputLabel for="telefono" value="Telefono:" />

                <p:inputMask id="telefono" value="#{afiliadoController.afiliado.telefono}" mask="(999) 999-9999"
                             requiredMessage="Debe insertar un telefono."/>

                <p:outputLabel for="fechaNacimiento" value="Fecha de Nacimiento:"/>

                <p:calendar id="fechaNacimiento" yearRange="c-100:c" pattern="yyyy/MM/dd" navigator="true"
                            value="#{afiliadoController.afiliado.fecha_nacimiento}"
                            requiredMessage="Debe insertar su fecha de nacimiento."/>

                <p:commandButton value="Insertar" icon="fa fa-save" process="panelAfiliado" update="afiliadoTable"
                                 actionListener="#{afiliadoController.insertAfiliado}" />
            </p:panelGrid>
        </p:panel>

        <p:panel header="Selecciona un Afiliado" id="panelTable">
            <!-- tabla con afiliados para seleccionar -->
            <p:dataTable id="afiliadoTable" var="afi" value="#{afiliadoController.afiliado.afiliados}" editable="true"
                         selection="#{afiliadoController.afiliado.selectedAfi}"
                         rowKey="#{afi.afiliado_id}" editMode="cell" >

                <p:column selectionMode="single" style="width:16px;"/>

                <p:column headerText="Afiliado ID">
                    <h:outputText value="#{afi.afiliado_id}"/>
                </p:column>

                <p:column headerText="Nombres">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{afi.nombre}" /></f:facet>
                        <f:facet name="input"><p:inputText value="#{afi.nombre}" style="width:96%"/></f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Apellidos">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{afi.apellido}" /></f:facet>
                        <f:facet name="input"><p:inputText value="#{afi.apellido}" style="width:96%"/></f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Eliminar">
                    <p:commandButton icon="fa fa-remove" value="Eliminar" process="afiliadoTable" update="afiliadoTable"
                                     actionListener="#{afiliadoController.deleteAfiliado(afi.afiliado_id)}" />
                </p:column>

                <f:facet name="footer">
                    <p:commandButton process="afiliadoTable" update=":wizard:afiliadoDetail" icon="ui-icon-search"
                                     value="Ver Afiliado" oncomplete="PF('afiliadoDialog').show()" />
                </f:facet>
            </p:dataTable>
        </p:panel>
    </p:tab>

    <!-- second tab -->
    <p:tab id="beneficiarioTab" title="Beneficiario">
        <p:panel header="Agrega Beneficiario">
            <!-- form para insertar beneficiario -->
        </p:panel>
        <p:panel header="Lista de Beneficiarios"></p:panel>
    </p:tab>
</p:wizard>

Upvotes: 1

Views: 5907

Answers (1)

Erick
Erick

Reputation: 833

I finally found what was wrong. For some reason, I can't use <p:panelGrid> </p:panelGrid>. I have to use <h:panelGrid></h:panelGrid>.

Using <p:panelGrid> </p:panelGrid> causes my NEXT button to disappear once I click on Next.

I hope this helps someone.

Upvotes: 1

Related Questions