Gut in Form?

Das Control sap.ui.layout.form.SimpleForm (SimpleForm) ist sicherlich die 1. Wahl um in einer Fiori ein Formular darstellen zu können. Ehrlich gesagt finde ich jedoch die Arbeit mit diesem Control gar nicht mal so “simple”. Tatsächlich ist der Einsatz erst wirklich dann einfach, wenn diverse Regeln und Gesetze dieses Controls bekannt sind und gezielt genutzt werden können. Fachlich sind die Formulare unter den Fiori Design Guidelines gut beschrieben, technisch aber nicht. Die Dokumentation der API- und die Explored-Beispiele sind mir diesbezüglich zu knapp und man muss sich zuviel aus den Codings heraus lesen und erst mühselig erarbeiten. Die Motivation dieser Blog Reihe ist daher das Schließen dieser Lücke, mit der Hoffnung den Leser die Arbeit mit diesem wichtigen Control vereinfachen zu können 🙂 Ich möchte daher so simpel (höhö) wie möglich beginnen und in den folgenden Beiträgen aufbauend weitere Funktionen vorstellen.

Was die SimpleForm ausmacht

Die Design Guidelines beschrieben bereits sehr gut in welchen Kontext das SimpleForm eingeordnet werden kann. Angeboten vom SAPUI5 Framework werden diese drei Formular-Controls:

• Form – die Elemente werden manuell durch Programmierung ausgerichtet
• SimpleForm – die Elemente werden semiautomatisch durch Programmierung ausgerichtet
• SmartForm – die Elemente werden vollautomatisch durch den OData-Service ausgerichtet

Das elementare Form Control ist also eher statisch und intensiv an Programmieraufwand, bietet aber die volle Kontrolle durch den Entwickler. Das SmartForm bietet den geringsten Entwicklungsaufwand (gegeben, dass der OData-Service gut modelliert ist), läuft aber Gefahr nicht den Anforderungen der Kunden im Detail angemessen entsprechen zu können. Das SimpleForm verspricht also in der goldenen Mitte aus Kontrolle, Unabhängigkeit und Aufwand zu liegen. Wie aber soll dies ermöglicht werden?

Formelle Regeln

Das SimpleForm Control nutzt eine Reihe von Regeln um zur Laufzeit der Anwendung die Elemente auszurichten. Diese Regeln beinhalten das Zusammenspiel aus Label, Titel und Eingabefelder. Eine Regel lautet:

• Jede neue Zeile wird durch ein sap.m.Label eingeleitet
• Jedes folgende Control wird dem aktuellen Label zugeordnet

Sehen wir uns das mal in einem einfachen Beispiel an:

<core:FragmentDefinition xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
    <f:SimpleForm editable="true" >
      <f:content>
        <Label text="Name" design="Bold"/>
        <Input />
        <Label text="Straße, Hausnummer" design="Bold"/>
        <Input  />
        <Input  />
  [...]

Wir haben: 1 Label, 1 Input, 1 Label, 2 Input. Entsprechend der Regel bekommen wir folgendes Ergebnis:

Warum das dritte Input-Feld etwas kleiner dargestellt wird, würde ich gerne in einem folgende Beitrag behandeln. Mit der Eigenschaft editable="true" musste ich etwas vorgreifen, um ein präsentables Beispiel zu haben. Kurzgefasst werden hier mit die Label-Texte auf gleiche Höhe der Input-Felder angehoben. Auf "false" hätten die Label eine passende Höhe für rein textbasierte Formulare.

Die nächste Regel lautet:

• Jede neue Spalte wird durch ein sap.ui.core.Titel eingeleitet

Um mehrspaltige Formulare zu realisieren habe ich schon die gruseligsten Verrenkungen mit VBox oder HBox Controls gesehen (ಠ_ಠ) Dabei reicht es die Title Controls an der gewünschten Stelle einzufügen. Und, nein, ich habe keine Ahnung warum ausgerechnet hierfür das sap.m-Namensraum verlassen werden muss…

  <f:SimpleForm editable="true">
    <f:content>
      <core:Title text="Besteller"/>
      <Label text="Name" design="Bold"/>
      <Input/>
      <core:Title text="Adresse"/>
      <Label text="Straße, Hausnummer" design="Bold"/>
      <Input/>
      <Input/>
      [...]

Schon bietet das Formular zwei Spalten, wobei nun die Label über den jeweiligen Input-Feldern stehen. Dies lässt sich noch mal genauer steuern und soll ebenfalls in einem der folgenden Beiträge verdeutlicht werden.

Wie geht es weiter?

Eine sehr wichtige Eigenschaft des SimpleForm ist der Wert hinter layout. Tatsächlich hängt soviel an diesem Wert, dass ich ihm einen eigenen Eintrag in dieser Reihe widmen muss.
Was ich also im nächsten Beitrag zeigen will:

• Wie kann ich die individuelle Länge von Controls setzen?
• Wie bekomme ich im Zwei-Spalten-Layout die Label wieder vor den Eingabefelder?
• Welche Möglichkeiten bietet mir das layout-Attribut?

Bis dahin bitte dran bleiben und nutzt die Gelegenheit um mal das Kommentar-Formular zu erproben und holt euch einen Kaffee c[_]

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.