Mach es bitte richtig

Als SAP Fiori Entwickler soll und möchte ich ja auch Anwendungen entwickeln, die einfach zu bedienen sind. Für mich entsteht Einfachheit auch dadurch, dass die Fiori den Anwender unterstützt und beispielsweise falsche Eingaben verhindert. Ein ganz typisches Beispiel sind hier ja all die Formulare, die der Anwender ausfüllen muss. Zwar deutlich simpler, wie in einer typischen SAP Anwendung, schadet es nicht die Bedienung der App so einfach wie möglich zu halten. Ist eh im Sinne der Fiori-Philosophie 🙂 In dieser Blog-Reihe möchte ich daher die Möglichkeiten des UI5-Frameworks vorstellen, wie man fachlich falsche Eingaben verhindern kann. Tatsächlich bietet das UI5-Framework unterschiedliche Möglichkeiten an, wie Eingaben validiert werden können. In diesem Teil stelle ich die Methode vor, wie direkt über die API der jeweiligen Controls eine Validierung erfolgen kann.

Für die Teile dieser Reihe werde ich die Möglichkeiten anhand zweier Eingabefelder vorstellen. Das erste Feld soll eine (deutsche) Postleitzahl sein, das zweite eine Personalnummer.

Beispiel Postleitzahl

Eigentlich ist eine Postleitzahl relativ simpel. Nehmen wir aber mal an, wie befinden uns in einer Projektsituation wo der Kunde sehr darauf aus ist, die Eingabe der Felder so robust wie möglich zu machen. Das ist ja okay und es ist nun meine Aufgabe dem Kunden das erfüllen zu können und gleichzeitig eine weiterhin gescheit wartbare Fiori zu entwickeln. Für die Postleitzahl hat der Kunde diese Regeln formuliert:

• Es dürfen nur Zahlen eingegeben werden
• Es müssen genau fünf Stellen eingegeben werden
• Der Anwender eine spezifische Fehlermeldung am Eingabefeld erhalten

Als Ausgangspunkt haben wir bereits ein entsprechendes sap.m.Input Control, wie es in einem typischen Formular vorkommen kann.

<Label required="true" text="PLZ"/>
<Input value="{ path: 'Zipcode' }"/>

Entsprechend die Darstellung des Feldes zur Laufzeit, wo ich mal „Hallo“ reingetippt habe.

Noch bietet das Eingabefeld keinerlei Validierungen. Da ich nun in diesem Beispiel über die API des sap.m.Input Controls validieren möchten, muss ich eine entsprechende function() im CreateEntry.controller.js implementieren. Hier bietet das Control zwei Mögliche Events

• change: Ausführen nach der Eingabe
• liveChange: Ausführen während der Eingabe

Ich habe mich hier für change entschieden, da mir liveChange in diesem Fall zu aufdringlich ist. Selbst wenn der Anwender eine am Ende korrekte PLZ eintippt hat, käme bis zur fünften Ziffer ständig ein Fehler hoch. Daher reichte mir die einmalige Kontrolle nach Abschluss der Eingabe. In der View wurde das Feld entsprechend erweitert.

<Input
  value="{ path: 'Zipcode' }"
  change="onZipcodeChange"/>

Nun zum Controller, wo ich die function onZipcodeChange() implmentiert habe. Zwecks besserer Lesbarkeit habe ich die Texte direkt auf Deutsch im Code.

onZipcodeChange: function(oEvent){
  var oInput = oEvent.getSource();
  var sValue = oInput.getValue();
  var sErrorText = "";
  var sState = "None";

  if (sValue.length !== 5) {
    sState = "Error";
    sErrorText = "Postleitzahl muss genau 5 Stellen lang sein. ";
  } else if (!sValue.match(/\d{*}/)) {
    sState = "Error";
    sErrorText = "Bitte geben Sie nur Zahlen ein.";
  }

  oInput.setValueState(sState);
  oInput.setValueStateText(sErrorText);
},

Zwar wäre es sauberer die Prüfungen auf Länge und Zahlen in eigene function() auszulagern, aber ich wollte dieses Beispiel kompakter halten. Sollte eine der zuvor bestimmten Bedingungen nicht zutreffen, dann werden folgende function() aus dem UI5-Framework verwendet:

• setValueState(): Setzt den ValueState des Feldes (Details).
• setValueStateText(): Textuelle Meldung, falls der ValueState nicht auf “None” steht.

Beides zusammen ermöglicht die Darstellung individueller Fehlermeldungen, sollte eine Postleitzahl nicht korrekt eingegeben worden sein. Durch den ValueState “Error” wird das Feld bei einem Fehlerfall rot umrandet und der ValueStateText angezeigt. Sollten mehr oder weniger wie fünf Zahlen eingegeben werden, ändert sich das Feld entsprechend auf den Fehlerzustand.

Genauso wird ein Fehler ausgegeben, sollten sich Buchstaben in die Eingabe gemischt haben.

Korrekte Eingaben werfen dankenswerterweise keine Fehler 😉 .

 

Damit habe ich die drei vom Kunden vorgeschriebenen Validierungen im Eingabefeld ermöglicht. Auch wenn diese Lösung an sich schön funktioniert, wenn auch etwas aufwändig, lohnt es sicher die Alternativen des UI5-Frameworks zu betrachten. Diese möchte ich im folgenden Post vorstellen.

 

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.