Wizard Theme in React Outsystems 11 (Steps on button click)


I am trying to create a wizard in react app. Can anyone let me know if there is any ready built in wizard. On button click on the page, i need to move the steps of the ward with green background highlighted. Attached zip file has sample OML (which has wizard without theme) and two image file shown as an example what i required. Please can someone help me out to design as per the attache image.

Wizard.zip has three file

1. Wizard.OML

2. Image1.jpeg (sample whihc will be the default on page load)

3. Image2.jpeg (on button click )


Rank: #91

Hi Touseef,

I tried to implement your use-case and somewhat I got succeeded :)

Please find the attached .oml solution file

Check this:

Wizard Pattern 1 

Wizard Pattern 2

Hope this helps you!


Benjith Sam


Rank: #16726

Hi  Benjith Sam,

First i was thinking its been a week no one responded and i thought this is little time taken things so no one will work on this. Now i was surprised and I am really thanks for you bro as you spent time for me and this is what i was expected. Wizard 2 is 100% what i wanted. Really thanks so much for your kind help and you are awesome. Have a nice and happy weekend bro. Cheers :)

Rank: #91

Yes Touseef, truly it took a long time to implement this use-case. But it was something which challenged me at first when I read the post, personally I'm not good with CSS. 

It feels good when you get success in achieving something which challenged you in the past and sharing the same success/solution with others after investing a good amount of time (+2 happiness).

Thank you for the words of appreciations, it truly boosted me :)

Happy weekend :)


Benjith Sam

Rank: #16726

@Benjith Sam, i totally agree on you. :) Thanks and happy weekend. :)

Rank: #1875

Thanks both of for giving this kind of scenario and solution.


Shehroze khan