title: p:wizard with a progress bar
body: <p>I would like to create a registration form with two PrimeFaces components: <a href="http://www.primefaces.org/showcase/ui/panel/wizard.xhtml" rel="nofollow noreferrer">Wizard</a> and <a href="http://www.primefaces.org/showcase/ui/misc/progressBar.xhtml" rel="nofollow noreferrer">Progress Bar</a>. For the backing bean, I am using the following one:</p>
  
  <p><strong><em>Backing bean: UserWizard.xhtml</em></strong></p>
  
  <pre><code>import java.io.Serializable;
  import java.util.Map;
  import java.util.TreeMap;
  
  import javax.annotation.PostConstruct;
  import javax.faces.application.FacesMessage;
  import javax.faces.context.FacesContext;
  import javax.faces.event.AjaxBehaviorEvent;
  import javax.faces.view.ViewScoped;
  import javax.inject.Named;
  
  import org.primefaces.context.RequestContext;
  import org.primefaces.event.FlowEvent;
  
      @ViewScoped
      @Named
      public class UserWizard implements Serializable {
  
          private User user = new User();
  
          private boolean skip;
  
          private Integer progress = 0;
  
          public User getUser() {
              return user;
          }
  
          public void setUser(User user) {
              this.user = user;
          }
  
          public void save() {        
              FacesMessage msg = new FacesMessage("Successful", "Welcome :" + user.getFirstname());
              FacesContext.getCurrentInstance().addMessage(null, msg);
          }
  
          public boolean isSkip() {
              return skip;
          }
  
          public void setSkip(boolean skip) {
              this.skip = skip;
          }
  
          public String onFlowProcess(FlowEvent event) {
              String oldStep = event.getOldStep();
              Integer oldValue = getStepNumber(oldStep);
              String newStep = event.getNewStep();
              Integer newValue = getStepNumber(newStep);
              if(oldValue &lt; newValue)
                 progress += 25;
              else
                 progress += 25;
  
              return event.getNewStep();
  }
  
  public Integer getStepNumber(String Step) {
      Integer StepNumber;
      switch(Step) {
          case "personal":
              StepNumber = 1;
              break;
          case "address":
              StepNumber = 2;
              break;
          case "contact":
              StepNumber = 3;
              break;
          default:
              StepNumber = 4;
              break;
      }   
      return StepNumber;
  }
  
          public Integer getProgress() {
              return progress;
          }
  
          public void setProgress(Integer progress) {
              this.progress = progress;
          }
  
          public void onComplete() {
              FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Progress Completed"));
          }
  
          public void cancel() {
              progress = null;
          }
      }
  </code></pre>
  
  <p><strong><em>Registration Form: registration.xhtml</em></strong></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"&gt;
  &lt;body&gt;
      &lt;f:view contracts="#{view.locale.language}"&gt;
          &lt;ui:composition template="/template.xhtml"&gt;
              &lt;ui:define name="centralBody"&gt;
  &lt;h:form&gt;
  
  &lt;p:growl id="growl" sticky="true" showDetail="true"/&gt;
  
  &lt;p:wizard flowListener="#{userWizard.onFlowProcess}"&gt;
      &lt;p:tab id="personal" title="Personal"&gt;
          &lt;p:panel header="Personal Details"&gt;
              &lt;p:messages /&gt;
              &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                  &lt;h:outputText value="Firstname: *" /&gt;
                  &lt;p:inputText value="#{userWizard.user.firstname}" required="true" label="Firstname"/&gt;
  
                  &lt;h:outputText value="Lastname: *" /&gt;
                  &lt;p:inputText value="#{userWizard.user.lastname}" required="true" label="Lastname"/&gt;
  
                  &lt;h:outputText value="Age: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.age}" /&gt;
  
                  &lt;h:outputText value="Skip to last: " /&gt;
                  &lt;h:selectBooleanCheckbox value="#{userWizard.skip}" /&gt;
              &lt;/h:panelGrid&gt;
          &lt;/p:panel&gt;
      &lt;/p:tab&gt;
  
      &lt;p:tab id="address" title="Address"&gt;
          &lt;p:panel header="Address Details"&gt;
              &lt;p:messages /&gt;
              &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                  &lt;h:outputText value="Street: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.street}" /&gt;
  
                  &lt;h:outputText value="Postal Code: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.postalCode}" /&gt;
  
                  &lt;h:outputText value="City: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.city}" /&gt;
  
                  &lt;h:outputText value="Skip to last: " /&gt;
                  &lt;h:selectBooleanCheckbox value="#{userWizard.skip}" /&gt;
              &lt;/h:panelGrid&gt;
          &lt;/p:panel&gt;
      &lt;/p:tab&gt;
  
      &lt;p:tab id="contact" title="Contact"&gt;
          &lt;p:panel header="Contact Information"&gt;
              &lt;p:messages /&gt;
              &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                  &lt;h:outputText value="Email: *" /&gt;
                  &lt;p:inputText value="#{userWizard.user.email}" required="true" label="Email"/&gt;
  
                  &lt;h:outputText value="Phone: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.phone}"/&gt;
  
                  &lt;h:outputText value="Additional Info: " /&gt;
                  &lt;p:inputText value="#{userWizard.user.info}"/&gt;
              &lt;/h:panelGrid&gt;
          &lt;/p:panel&gt;
      &lt;/p:tab&gt;
  
      &lt;p:tab id="confirm" title="Confirmation"&gt;
          &lt;p:panel header="Confirmation"&gt;
              &lt;h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid"&gt;
                  &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                      &lt;h:outputText value="Firstname: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.firstname}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="Lastname: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.lastname}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="Age: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.age}" styleClass="outputLabel"/&gt;
                  &lt;/h:panelGrid&gt;
  
                  &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                      &lt;h:outputText value="Street: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.street}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="Postal: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.postalCode}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="City: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.city}" styleClass="outputLabel"/&gt;
                  &lt;/h:panelGrid&gt;
  
                  &lt;h:panelGrid columns="2" columnClasses="label, value"&gt;
                      &lt;h:outputText value="Email: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.email}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="Phone " /&gt;
                      &lt;h:outputText value="#{userWizard.user.phone}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText value="Info: " /&gt;
                      &lt;h:outputText value="#{userWizard.user.info}" styleClass="outputLabel"/&gt;
  
                      &lt;h:outputText /&gt;
                      &lt;h:outputText /&gt;
                  &lt;/h:panelGrid&gt;
              &lt;/h:panelGrid&gt;
  
              &lt;p:commandButton value="Submit" actionListener="#{userWizard.save}" update="growl" process="@this"/&gt;
          &lt;/p:panel&gt;
      &lt;/p:tab&gt;
  &lt;/p:wizard&gt;
  &lt;p:progressBar id="progressBar" widgetVar="pbAjax" ajax="true" value="#{UserWizard.progress}" labelTemplate="{value}%" styleClass="animated" global="false"&gt;
          &lt;p:ajax event="complete" listener="#{UserWizard.onComplete}" update="growl" oncomplete="PF('startButton2').enable()"/&gt;
      &lt;/p:progressBar&gt;
  &lt;/h:form&gt;
          &lt;/ui:define&gt;
          &lt;/ui:composition&gt;
      &lt;/f:view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My purpose is that, when the registration flow goes through the different registration tabs (Personal, Address, Contact and Confirmation), the progress bar in the lower part of the screen to be updated according to the next or back buttons. In order to achieve this, I want to use the method</p>
  
  <pre><code>public String onFlowProcess(FlowEvent event) {
      String oldStep = event.getOldStep();
      Integer oldValue = getStepNumber(oldStep);
      String newStep = event.getNewStep();
      Integer newValue = getStepNumber(newStep);
      if(oldValue &lt; newValue)
          progress += 25;
      else
          progress -= 25;
  
      return event.getNewStep();
  }
  
  public Integer getStepNumber(String Step) {
      Integer StepNumber;
      switch(Step) {
          case "personal":
              StepNumber = 1;
              break;
          case "address":
              StepNumber = 2;
              break;
          case "contact":
              StepNumber = 3;
              break;
          default:
              StepNumber = 4;
              break;
      }   
      return StepNumber;
  }
  </code></pre>
  
  <p>But I do not know how to update the progress bar. I have tried:</p>
  
  <ul>
  <li>changing the value of progress bar value (variable <em>progress</em>) in the<br>
  function <em>onFlowProcess</em>. It does not work.</li>
  <li><code>&lt;p:wizard ... update="progress_bar"&gt;</code>. I have realized that the attribute <em>update</em> is not allowed for the <a href="http://www.primefaces.org/docs/vdl/6.0/core/primefaces-p/wizard.html" rel="nofollow noreferrer">Wizard</a> component.</li>
  <li><code>&lt;p:ajax listener="#{UserWizard.onFlowProcess}" update="@this"&gt;</code> within the <code>&lt;p:progressBar&gt;</code> element.</li>
  </ul>