CODEWITHSUNDEEP
primefaces
Balint Szivos
Balint Szivos

Reputation: 83

Hide back button at last tab in primefaces wizard

I would like to hide the BACK button at the last tab in a wizard. I'm using primefaces. What would be the solution for it?

Thank you

Upvotes: 7

Views: 5833

Answers (4)

Cheikh Ahmadou Bamba DIOP
Cheikh Ahmadou Bamba DIOP

Reputation: 541

From managed bean you can try this:

  @ManagedBean(name = "testWizardBean")
  @ViewScoped
  public class TestWizardBean implements Serializable {

         private RequestContext requestContext;

         @PostConstruct
         public void init() {
              requestContext = RequestContext.getCurrentInstance();
              if (testWizardDto.getDirection().isEmpty()) {
                    requestContext.execute("PF('signwzd').nextNav.hide();");
         }
  }

}

Upvotes: 0

irieill
irieill

Reputation: 1252

I would like to share my solution using PrimeFaces 6.2. There is no custom JavaScript on the view side.

<p:importConstants
  type="com.example.WizardController"
  var="WizardController"
></p:importConstants>

<p:wizard
  flowListener="#{wizardController.onFlow}"
  widgetVar="wizard"
>
  <p:tab id="#{WizardController.STEP_LAST}">
  </p:tab>
</p:wizard>

In the flow listener I just hide the navigation buttons and disable the navigation bar on the last step. Hiding the navigation bar is necessary. Otherwise PrimeFaces internal JavaScript for wizard will fade them in again.

@ViewScoped
@Named
public class WizardController {

  public static final String STEP_LAST = "last";

  public String onFlow(FlowEvent flowEvent) {
    if (flowEvent.getNewStep().equals(STEP_LAST)) {
      PrimeFaces.current().executeScript("PF('wizard').backNav.hide(); PF('wizard').nextNav.hide(); PF('wizard').cfg.showNavBar = false;");
    }
  }
}

Upvotes: 0

Koen Goovaerts
Koen Goovaerts

Reputation: 161

I've had the same issue for a long time and finally solved it. Maybe my solution can be helpfull for others in the future:

Webpage:

<p:wizard id="dataLoadSetWizard" widgetVar="wiz" onnext="hideBackOnLastTab()" ...

Javascript:

function hideBackOnLastTab() {
            if(PF('wiz').getStepIndex(PF('wiz').currentStep) > 0) {
                PF('wiz').backNav.css("visibility", "hidden")
            }
        }

Upvotes: 3

Mindwin Remember Monica
Mindwin Remember Monica

Reputation: 1539

you can do it client-side using jQuery :

Assuming you are using the wizard in the showcase: http://www.primefaces.org/showcase/ui/wizard.jsf:

<p:wizard widgetVar="wiz"  
        flowListener="#{userWizard.onFlowProcess}"
        onNext="hideBackOnLastTab()">

javascript:

function hideBackOnLastTab() {
    if($("ul.ui-wizard-step-titles>li").last()
             .is("ul.ui-wizard-step-titles>li.ui-state-highlight")) {
            $("div.ui-wizard-navbar>button.ui-wizard-nav-back").css("display", "none");
    }

}

Also you can notice that the next button in wizard is hidden (by the PF client-side) at last panel the same way.

Upvotes: 5

Related Questions