WizardStep – Hide counter or title
Sometimes you come across requirements that can not always be solved with a „setProperty“, so this requirement too:
Hide counter
The customer requests that the numbering of the WizardSteps should be hidden. Every SAPUI5 developer knows that this doesn’t work out of the box, unlike to hide the „nextStep“ buttons.

So let’s start the developer tools and have a look at the headlines of the individual WizardSteps and how they are structured. We can see that these numbers are calculated and inserted by the framework at runtime:




Here we can see that the numbers are inserted in a CSS-class called „.sapMWizardStepTitle::before“ in the „content“ section.
Go to the „style.css“-file in your project and override this CSS-class (webapp/css/style.css):
.sapMWizardStepTitle::before{
content: ""!important;
}
We do nothing but override the number with an empty string. This is the result:




Hide titles
The same we want to do with the titles in each WizardStep.
Unfortunately if we just set the „title“ property to an empty string so the titles also disappear in the wizard header:








Of course we want to prevent that, we just want to hide the headings in the individual steps.
Now that we know that there is a CSS class „.sapMWizardStepTitle“, we can simply hide it:
.sapMWizardStepTitle{
display: none!important;
}
And as a result, we have now hidden our headings in the individual steps, but not in the header:



