WizardStep – Nummerierung oder Überschrift ausblenden

von Daniel Krancz | Jan 24, 2020 | Fiori / SAPUI5

Immer wieder stößt man auf Anforderungen im SAPUI5-Umfeld, die nicht immer mit einem „setProperty“ zu lösen sind, so auch diese Anforderung:

Nummerierung ausblenden

Aus welchen Gründen auch immer fordert der Kunde die Nummerierung bei den WizardSteps auszublenden. Ein jeder SAPUI5-Entwickler weiß, dass dies, nicht wie bei den nextStep-Buttons, „out of the box“ funktioniert.

Wenn wir jetzt über die DeveloperTools anschauen wie die Übeschriften der einzelnen WizardSteps aufgebaut sind, dann können wir erkennen, dass diese Nummer vom Framework zur Laufzeit berechnet und eingefügt werden:

Da sehen wir, dass in der CSS-Klasse „.sapMWizardStepTitle::before“ im „content“ die Nummerierung eingefügt wird.

Jetzt müssen wir nur mehr diese CSS-Klasse in unserem SAPUI5-Projekt überschreiben (webapp/css/style.css):

.sapMWizardStepTitle::before{
     content: ""!important;
}

Wir machen jetzt nichts anderes, als die Nummer mit einem leeren String zu überschreiben. Das ist das Ergebnis:

Überschriften ausblenden

Genau das gleiche wollen wir auch mit den Überschriften der einzelnen WizardSteps machen.

Wenn wir jetzt einfach die „title-Properties“ in den einzelnen WizardSteps leer lassen würden, dann würde man im Header auch keine Überschriften sehen:

Das wollen wir natürlich verhindern, wir möchten lediglich die Überschriften in den einzelnen Steps ausblenden.

Da wir jetzt wissen, dass es eine CSS-Klasse „.sapMWizardStepTitle“ gibt, so können wir diese einfach ausblenden:

.sapMWizardStepTitle{
     display: none!important;
}

Und als Ergebnis haben wir jetzt unsere Überschriften in den einzelnen Steps ausgeblendet, aber im Header sind diese noch da: