Can someone guide me how I can customize Outsystems wizard?
Question
Application Type
Reactive

I am using Outsystem Wizard and I have not find any way to customize it. The style section is disabled for both wizard and wizard items. I was trying to align the wizard item icon to left or right for the first and last step but did not find away to do it. Can someone suggest how I can do such customization in my wizard?

mvp_badge
MVP

Hi Biswajit,

I did a somewhat similar use case in one of the old posts, that I would suggest you refer to this RWA | Customize Wizard


I hope it gives you direction for your final implementation :)


Kind regards,

Benjith Sam

Hi Biswajit,

Indeed it's not possible to style complex OutSystems widgets directly in the Styles section. For complex widgets, it only allows you to change certain most-used properties quickly, like IsVertical and UseTopLabel for Wizards.

You will need to customize the styling manually with CSS code; meaning you need to change the attribute values of the CSS classes assigned to the placeholders. 

For example, the Icon placeholder of the WizardItem has the following CSS classes applied by default:

To make the icon to appear more on the left side, you could add a padding-left. To do so, you would need the following code in your Screen Style Sheet or Theme Style Sheet:


As a best practice, you can give an ExtendedClass to the Wizard or WizardItem and then define the CSS properties for that class in the Theme Style Sheet, so that only the items with that custom class would have your customized styling:

I suggest you take a look at customizing CSS in OutSystems. This link can be a start. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.