Styling of Wizard pattern for Web



I dragged the Wizard pattern into the preview and it looks like this, not the round nice styling as shown in the documentation. It also just looks exactly like this when accessing through the browser. I didn't do anything to the Wizard at all. What could be the root cause of it? if this is expected, what should I do to get the nice round styling (or any other, like with arrows) to the Wizard?


Thank you in prior

Manty wrote:

Hi Stephen Li,

Please find the links below which will help you to style the Wizard Pattern:


https://www.outsystems.com/outsystems-ui/patterns/web/Wizard


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


https://outsystemsui.outsystems.com/OutSystemsUILiveStyleGuide/Wizard.aspx


Regards,

Manthan Shah.

Thanks for your quick response Manty,

However I've read through all these documents but they don't seem to tell us how to set the icons for the Wizard. Or there is not default way to set the icons as shown in these documentation?? We have to put our own style into it?

Hi Stephen Li,

I used navigation wizard on my screen. Please see the screenshots below:


1) Gave an RichWidget/Icon inside Icon of Navigation/Wizard Item:



2) My screen looks like this :



Please implement WizardItem like how I did you can get the desired results. 

Regards,

Manthan Shah.

Manty wrote:

Hi Stephen Li,

I used navigation wizard on my screen. Please see the screenshots below:


1) Gave an RichWidget/Icon inside Icon of Navigation/Wizard Item:



2) My screen looks like this :



Please implement WizardItem like how I did you can get the desired results. 

Regards,

Manthan Shah.

hmm, but how do you have the empty circle? you use "if" to enclose the empty circle and the solid circle? if that's the case I don't quite see the point of using the Wizard widget when we have to set all the icons by ourselves. What does it actually help us doing here.. Thanks anyway for your answer first

Stephen Li wrote:

Manty wrote:

Hi Stephen Li,

I used navigation wizard on my screen. Please see the screenshots below:


1) Gave an RichWidget/Icon inside Icon of Navigation/Wizard Item:



2) My screen looks like this :



Please implement WizardItem like how I did you can get the desired results. 

Regards,

Manthan Shah.

hmm, but how do you have the empty circle? you use "if" to enclose the empty circle and the solid circle? if that's the case I don't quite see the point of using the Wizard widget when we have to set all the icons by ourselves. What does it actually help us doing here.. Thanks anyway for your answer first

Hi Stephen Li,

I just added an Richwidgets/Icon as seen in the first wizard/icon but I didn't do anything for others. This is Wizard/Item you need to customize it for your preference. If my answer helped you please mark the answer as a solution.

Regards,

Manthan Shah.


Manty wrote:

Stephen Li wrote:

Manty wrote:

Hi Stephen Li,

I used navigation wizard on my screen. Please see the screenshots below:


1) Gave an RichWidget/Icon inside Icon of Navigation/Wizard Item:



2) My screen looks like this :



Please implement WizardItem like how I did you can get the desired results. 

Regards,

Manthan Shah.

hmm, but how do you have the empty circle? you use "if" to enclose the empty circle and the solid circle? if that's the case I don't quite see the point of using the Wizard widget when we have to set all the icons by ourselves. What does it actually help us doing here.. Thanks anyway for your answer first

Hi Stephen Li,

I just added an Richwidgets/Icon as seen in the first wizard/icon but I didn't do anything for others. This is Wizard/Item you need to customize it for your preference. If my answer helped you please mark the answer as a solution.

Regards,

Manthan Shah.


I did the same too but it still fails. It is somehow vertical, also it doesn't show the icons as what you have there... I tried setting the Name attribute of the icon and not setting it too but either of the ways worked. What can be the possible reason? I will defo mark yours as the correct answer if what I got here is fixed. Thanks a lot!

Hi Stephen Li,

In the Navigation/Wizard property is set to be vertical. Please find the screenshot below:


 

Just change that to Horizontal.


On the icon placeholder there must be a css as seen below:



If the above css is not there then you must see the navigation icon as displayed by you.


If not there then please use the below css:

.wizard-item-icon {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-circle);
    border: var(--border-size-m) solid var(--color-neutral-5);
    color: var(--color-neutral-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0 auto;
    position: relative;
    width: 32px;
    z-index: 2;
}

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

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

.wizard-item-icon .fa-fw {
    font-size: var(--font-size-xs);
    width: auto;
}

.wizard-item-icon-wraper {
    margin: var(--space-s) var(--space-none);
    position: relative;
    width: 100%;
}

.wizard-item .wizard-item-icon-wraper:before {
    content: '';
    height: 2px;
    position: absolute;
    right: calc(50% + 12px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: calc(100% - 24px);
    z-index: 0;
}

.wizard-item.past .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.active .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
    content: none;
}


I hope this helps you.

Regards,

Manthan Shah.

Manty wrote:

Hi Stephen Li,

In the Navigation/Wizard property is set to be vertical. Please find the screenshot below:


 

Just change that to Horizontal.


On the icon placeholder there must be a css as seen below:



If the above css is not there then you must see the navigation icon as displayed by you.


If not there then please use the below css:

.wizard-item-icon {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-circle);
    border: var(--border-size-m) solid var(--color-neutral-5);
    color: var(--color-neutral-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0 auto;
    position: relative;
    width: 32px;
    z-index: 2;
}

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

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

.wizard-item-icon .fa-fw {
    font-size: var(--font-size-xs);
    width: auto;
}

.wizard-item-icon-wraper {
    margin: var(--space-s) var(--space-none);
    position: relative;
    width: 100%;
}

.wizard-item .wizard-item-icon-wraper:before {
    content: '';
    height: 2px;
    position: absolute;
    right: calc(50% + 12px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: calc(100% - 24px);
    z-index: 0;
}

.wizard-item.past .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.active .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
    content: none;
}


I hope this helps you.

Regards,

Manthan Shah.

Why are there so many obstacles ._.

Hi Stephen Li,

This are not obstacles this are outsystems customization styles. Outsystems helps us to customize everything.


Regards,

Manthan Shah.

Manty wrote:

Hi Stephen Li,

This are not obstacles this are outsystems customization styles. Outsystems helps us to customize everything.


Regards,

Manthan Shah.

Im unable to add and style class to the Icon as shown in my previous reply. it says I cannot add style class since the widget does not have a Style Class property. 

Also I am curious that the documentation here 

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

does not tell us to add Richwidget/Icons or whatever and the image it shows that is like a magic, boom and the stylings are all there unlike what we are doing here. Have I done something wrong? All I did was dragging the Widget into the container...

Hi Stephen,

Please see in the link below there is a title Custom style for active step there they have mentioned the css.


And for the second part add the css by clicking the css icon shown in the following screenshot:



Regards,

Manthan Shah.

Manty wrote:

Hi Stephen,

Please see in the link below there is a title Custom style for active step there they have mentioned the css.


And for the second part add the css by clicking the css icon shown in the following screenshot:



Regards,

Manthan Shah.

Where is the link?

So weird that I change it to Horizontal or Vertical, it still remains only vertical...

Also after I add the CSS that you provided, there are some paddings in for the icons that's applied but the icon still remain to be just a flag.

Hi Stephen Li,

Cam you share the Oml file so I could view it and do changes and suggest you the same.


Regards,

Manthan Shah.