WizardStep – Nummerierung oder Überschrift ausblenden

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.

Diese Nummer möchten wir bei den Überschriften ausblenden

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:

Ausschnitt aus den DeveloperTools

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:

WizardStep ohne Nummerierung

Ü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:

„title-Property“ in WizardSteps leer setzen
Keine Überschriften in den Steps, aber auch keine im WizardHeader

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:

Überschriften ausgeblendet