Active Wizard Item does not highlight with colour

Good Day,


I am having difficulty with making the Wizard function properly. The step of the WizardItem is not working properly and the active step is not changing color. I only have 2 steps in my Wizard and used an Integer Local Variable named WizardStepIndex and Screen Action named WizardNavigation with a Boolean Input Parameter named IsNext.


Both WizardItem's Step property have the value: If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entitites.Step.Next, Entities.Step.Past))


In the browser, when I am in Step 1 and press the next button which uses the WizardNavigation Screen Action, the form in WizardItem Step 2 does not appear and the color of the WizardItem which is active does not also change, even though I have given it a active color in CSS. When I press back from Step 2, it does not go back to Step 1 and only Ajax Refreshes Step 2.


Please assist me to get the Wizard working properly.


CSS

WizardItem Step1

Browser Step1

WizardItem Step2

Browser Step2

Solution

Hi Malebo Sambo,

1) Create a number local variable for wizard steps and make default to 0.

2) in the first step put the following condition on wizard item step property, 

If(WizardStepIndex = 0, Entities.Step.Active, Entities.Step.Past)

3) and in the next wizard item step, add following condition,

If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entitites.Step.Next, Entities.Step.Past))

4) Ajax refresh the wizard widget. Thats it.


Solution

Hello Aravinda,


thank you for response, it's working perfectly. 


Cheers


Cheers !!!

Aravind M wrote:

Cheers !!!

When I click the Next button to move from step 1 to step 2, the content I have associated with step 1 does not change and display the content I associated with Step 2. The container with the content for step 1 is enclosed with a If element and condition: WizardStepIndex = 0 and step 2 content has If with condition: WizardStepIndex = 1.


Can you assist?

Malebo Sambo wrote:

Good Day,


I am having difficulty with making the Wizard function properly. The step of the WizardItem is not working properly and the active step is not changing color. I only have 2 steps in my Wizard and used an Integer Local Variable named WizardStepIndex and Screen Action named WizardNavigation with a Boolean Input Parameter named IsNext.


Both WizardItem's Step property have the value: If(WizardStepIndex = 1, Entities.Step.Active, If(WizardStepIndex = 0, Entitites.Step.Next, Entities.Step.Past))


In the browser, when I am in Step 1 and press the next button which uses the WizardNavigation Screen Action, the form in WizardItem Step 2 does not appear and the color of the WizardItem which is active does not also change, even though I have given it a active color in CSS. When I press back from Step 2, it does not go back to Step 1 and only Ajax Refreshes Step 2.


Please assist me to get the Wizard working properly.


CSS

WizardItem Step1

Browser Step1

WizardItem Step2

Browser Step2


Hi Malebo,

Try to check this or this discussion. They shared an oml to help to understand wizard properly.


Regards

seema

Malebo Sambo wrote:

Aravind M wrote:

Cheers !!!

When I click the Next button to move from step 1 to step 2, the content I have associated with step 1 does not change and display the content I associated with Step 2. The container with the content for step 1 is enclosed with a If element and condition: WizardStepIndex = 0 and step 2 content has If with condition: WizardStepIndex = 1.


Can you assist?

Hi Malebo Sambo,

Refer the guidance documentation  in the below link

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Navigation/Wizard


Malebo Sambo wrote:

Aravind M wrote:

Cheers !!!

When I click the Next button to move from step 1 to step 2, the content I have associated with step 1 does not change and display the content I associated with Step 2. The container with the content for step 1 is enclosed with a If element and condition: WizardStepIndex = 0 and step 2 content has If with condition: WizardStepIndex = 1.


Can you assist?


Ok, for that enclose all if statements inside a container and just ajax refresh the container in that action.

it will work