Creating a wizard using ui:include, rich:popupPanel and navigation-rules - jsf-2

Question

I am trying to build a wizard using ui:include in a RichFaces 4 popupPanel and navigation-rules in the faces-config.xml, but on completing the actions in the backing bean, the page does not navigate to the target page. I have checked to ensure that the bean executes as expected and that it provides the expected outcome.
The JSF page and the included page are listed below:
<rich:popupPanel modal="true" id="addSvcAcctPanel" autosized="true">
<rich:messages id="addSvcAcctPanelMessages" globalOnly="false"
styleClass="message" />
<a:outputPanel id="includeAddSvcAcct">
<ui:include src="/layout/addSvcAccPg2.xhtml" />
</a:outputPanel>
<h:form id="closeSvcAcctForm">
<div class="buttons">
<a:commandButton styleClass="save" id="closeAddSvcBtn"
value="close"
onclick="#{rich:component('addSvcAcctPanel')}.hide()"
render="hasAgentsAccItm,svcAccAccordItm,svcAcctsTab,svcAccInfo,agentPanel,ServiceAccts,noticesAccordion">
<rich:tooltip direction="topRight" mode="client" showDelay="300"
styleClass="tooltip" layout="block">
<span style="white-space: wrap">Click on the 'Close'
button to close this panel and return to the main screen. If you
have any unsaved information on this page, it will be lost when
you click close.</span>
</rich:tooltip>
</a:commandButton>
</div>
</h:form>
</rich:popupPanel>
The inserted JSF code for the two panels is as follows:
Pg 1.....
<?xml version="1.0" encoding="UTF-8" ?>
<h:form xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/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:rich="http://richfaces.org/rich"
xmlns:richext="http://java.sun.com/jsf/composite/richext"
xmlns:a="http://richfaces.org/a4j">
<rich:panel id="addSvcAcctPanelContent" headerClass="head2" style="height:100%;">
<f:facet name="header">
<h:outputText styleClass="med_black_type_bold_facet"
value="Add a Service Account" />
</f:facet>
<h:panelGrid columns="3">
<h:outputText styleClass="med_black_type_bold"
value="Department" id="companyLabel" />
<rich:select styleClass="med_black_type" id="companySelect"
required="true" value="#{main.selected_company}" render="acctWarning, accountLabel1" valueChangeListener="#{main.determineProperAccountName}">
<f:selectItem
itemLabel="Please select an Organisation"
itemValue="" />
<f:selectItems value="#{country_companies}" />
<a:ajax event="selectitem" render="acctWarning, accountLabel1, acctNumberExplain, acctIdHeader, acctIDHelp" execute="#this"/>
</rich:select>
<rich:message for="companySelect" style=" width : 330px;" />
<h:outputText styleClass="med_black_type_bold"
value="Account 'Nickname'" id="nicknameLabel" />
<h:inputText styleClass="med_black_type" id="nickname"
value="#{main.alias}" onfocus="#{rich:component('nickNameHelpPanel')}.show()"
onblur="#{rich:component('nickNameHelpPanel')}.hide()">
<rich:validator />
<!-- <f:ajax event="focus" execute="#this" onevent="#{rich:component('nickNameHelpPanel')}.show()"/>
<f:ajax event="blur" execute="#this" onevent="#{rich:component('nickNameHelpPanel')}.hide()"/> -->
</h:inputText>
<rich:message for="nickname" style=" width : 330px;" />
<richext:spacer width="30" />
<h:outputText id="acctWarning" styleClass="med_blue_type_bold"
value="Enter the #{main.accountProperName} below - numbers and letters only! No dots or dashes." />
<richext:spacer width="30" />
<h:outputText styleClass="med_black_type_bold"
value="#{main.accountProperName}" id="accountLabel1" />
<h:inputText styleClass="med_black_type" id="account"
value="#{main.account_id}" onfocus="#{rich:component('acctIDHelpPanel')}.show()"
onblur="#{rich:component('acctIDHelpPanel')}.hide()">
<rich:validator />
<!-- <f:ajax event="focus" execute="#this" onevent="#{rich:component('acctIDHelpPanel')}.show()"/>
<f:ajax event="blur" execute="#this" onevent="#{rich:component('acctIDHelpPanel')}.hide()"/> -->
</h:inputText>
<rich:message for="account" style=" width : 330px;" />
</h:panelGrid>
<div class="buttons">
<a:commandButton styleClass="save" id="addServiceCompany"
value="save" action="#{main.addAccount}" render="includeAddSvcAcct, includeAddSvcAcct1"/>
</div>
</rich:panel>
</h:form>
Pg 2.....
<?xml version="1.0" encoding="UTF-8" ?>
<h:form xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/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:rich="http://richfaces.org/rich"
xmlns:richext="http://java.sun.com/jsf/composite/richext"
xmlns:a="http://richfaces.org/a4j">
<rich:panel>
<h:outputText value="The service account has been successfully added." styleClass="med_black_type"/>
</rich:panel>
The relevant excerpt from the faces-config is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="2.1"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
<navigation-rule>
<from-view-id>/layout/addSvcAccPg2.seam</from-view-id>
<navigation-case>
<from-action>#{main.outcome}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/layout/addSvcAccPg3.seam</to-view-id>
</navigation-case>
</navigation-rule>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>bg</supported-locale>
<supported-locale>de</supported-locale>
<supported-locale>en</supported-locale>
<supported-locale>fr</supported-locale>
<supported-locale>tr</supported-locale>
</locale-config>
</application>
</faces-config>
The method from the backing bean is as follows:
public String addAccount() {
String retVal = "failed";
try {
getSAFctx.addService(getIntUserId(), 1, selected_company,
account_id, alias);
retVal = "success";
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
return retVal;
}
}
I have tried to this using pages.xml, *.pages.xml and rich:togglePanel (which for some reason, does not permit commandButtons to engage backing beans). Does anyone have any suggestions that can help? Does anyone know how to make this wizard work?
Thanks in advance.
Dave.

Answer 1

From the above code it is clear that once the page /layout/addSvcAccPg2.seam is included inside the rich:popupPanel , then it will lead to situation having same ID's for two different components's in a single page .
You have used ID="addSvcAcctPanel" for rich:popupPanel and rich:panel. This is a common issue with richfaces and creates page navigation problems .
Just make them different and try once again .