1

i have a question regarding the back/next button label for primefaces wizard. It is possible to customize the navigation button label like the following example:

  • Button label at step 0 -> Show button label text "Next 1"
  • Button label at step 1 -> Show button label text "Next 2" and button back label "Back 1"
  • Button label at step 2 -> Show button label text "Next 3" and button back label "Back 2"
  • ...

Best regards, Mux

Mux
  • 77
  • 1
  • 2
  • 7

1 Answers1

2

Yes the component has two attributes the nextLabel and backLabel.

https://primefaces.github.io/primefaces/7_0/#/components/wizard?id=attributes

nextLabel   null    String  Label of next navigation button.
backLabel   null    String  Label of back navigation button.

Then do..

<p:wizard widgetVar="wgtWizard" nextLabel="Next #{component.step}" backLabel="Back #{component.step}">

But since the #component.step is not evaluated on every step you have to do it with JQuery JS code like this following:

var wizard = PF('wgtWizard');
var stepIndex = wizard.getStepIndex(wizard.currentStep);
wizard.nextNav.find('.ui-button-text').text('Next ' + stepIndex);
wizard.backNav.find('.ui-button-text').text('Back ' + (stepIndex-1));

Just execute that JS code on the wizard 'onback' and 'onnext' JS methods.

Melloware
  • 7,402
  • 2
  • 26
  • 47
  • I think those labels are not updated automatically when you go the next or previous tab – Jasper de Vries Feb 17 '20 at 15:15
  • You might be right. Then it would be an enhancement request or the user will have to do it with some clever Jquery code to update the labels. – Melloware Feb 17 '20 at 15:38
  • 1
    Also, you might want to use the implicit EL object `component`. See https://stackoverflow.com/questions/29035760/what-exactly-is-component-in-el – Jasper de Vries Feb 17 '20 at 16:10
  • Thanks I never knew about #{component}! I just updated my answer. – Melloware Feb 17 '20 at 16:27
  • Also you are right its only evaluated when the component first renders not on every step so I updated my answer with a Jquery solution. – Melloware Feb 17 '20 at 16:44