15
Views
5
Comments
Solved
Customizing Wizard  Widget

Hi,

Is there a way to customize the same wizard widget without interlinking and not using wizard items individually? 

Below is the one I want to achieve(wizard widget without links and labels in between):

Thanks,

Sahithi

mvp_badge
MVP
Rank: #75
Solution

Hi Gnana, 

Sorry for the late reply.. For the mentioned use-case, you just have to define/override/customize the below mentioned wizard CSS class definition with the required property value.

.wizard-wrapper-item.past .wizard-item-icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-neutral-0);
}

Glad to help you :)


Kind regards,

Benjith Sam

mvp_badge
MVP
Rank: #75
Solution

Hi Gnana Sahithi,

You can also customize the navigation wizard widget's CSS definitions as per your requirement..

see this sample app - ProgressWizard

refer the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

ReactiveProgressWizard3.oml

Champion
Rank: #99

Hi,

You can clone the component and change what you need.

For that, open the OutsystemsUI module (it will open a clone version), copy the widget and it's dependencies for the module that you want, and then edit it there.


Hope this can help.


Best regards,

Ricardo M Pereira

Rank: #259

Hi,

Try the below discussion thread:
https://www.outsystems.com/forums/discussion/47586/styling-of-wizard-pattern-for-web/

mvp_badge
MVP
Rank: #114

Hi,

For this specific layout which you want to create using wizard you can follow below steps and you will get what you want:

  1. Set IsVertival property to True.
  2. Add a main container inside the wizard Content place holder
  3. Add your containers in this main container. For example if you want to create 4 steps then add 4 containers and set the width of eac container to 3 columns.
  4. Add your wizard steps in each of these containers.

What we are doing in above steps is using vertical layout of the wizard because it has same structure which you want (step label is at the right side of the icon/ number) and then with containers and their arrangement making it horizontal again.

Simple right?

mvp_badge
MVP
Rank: #75
Solution

Hi Gnana Sahithi,

You can also customize the navigation wizard widget's CSS definitions as per your requirement..

see this sample app - ProgressWizard

refer the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

ReactiveProgressWizard3.oml

mvp_badge
MVP
Rank: #75
Solution

Hi Gnana, 

Sorry for the late reply.. For the mentioned use-case, you just have to define/override/customize the below mentioned wizard CSS class definition with the required property value.

.wizard-wrapper-item.past .wizard-item-icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-neutral-0);
}

Glad to help you :)


Kind regards,

Benjith Sam