WizardStep – Hide counter or title

Erstellt am
durchDaniel Krancz
Print
You are here:
← All Topics

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.

these numbers should be hidden

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:

developer tools

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:

wizard step wihtout numbering

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:

„title“ property in each wizard step set to an empty string
no titles in header and content

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:

titles hidden

Schlagwörter: