038: Recycling-Heroes - Annotations (Document)

Einleitung

In der letzten Folge hatten wir unsere Anwendung fertiggestellt und die zweite Entität aufgenommen. Nun geht es um den Abschluss der aktuellen Anwendung, indem wir die UI-Annotationen ergänzen und die Anwendung zum Laufen bringen.

UI Annotationen

Wechseln wir also in die Metadata Extension und korrigieren entsprechend die UI-Annotationen. Aktuell wurden zu viele UI-Annotationen generiert. Diese wollen wir erst einmal ersetzen. Dazu markieren wir alle UI-Annotationen und starten den Metadata Wizard, eine IDE-Action in unserer Umgebung. Als Default schlägt uns der Wizard bestimmte Dinge schon vor, wie zum Beispiel eine Facet für allgemeine Daten, der entsprechend alle Felder zugeordnet sind. Im unteren Teil finden wir eine zweite Facet, die die entsprechenden verlinkten Tags definiert. Diese benötigen wir in diesem Fall aber nicht und entfernen sie komplett. Als Nächstes fügen wir eine neue Facet ein, die das Dokument enthält. Diese bekommt eine entsprechende ID und ein Label, das im oberen Teil angezeigt wird. Über die Position steuern wir, in welcher Reihenfolge die Facets angezeigt werden. Zum Abschluss vergeben wir noch einen Qualifier, um später die Zuordnung durchführen zu können. Als dritte Facet legen wir die administrativen Felder an. Diese bekommen ebenfalls ein Label, eine Position und einen Qualifier, um sie später ansprechen zu können.

Als Nächstes können wir bestimmte Felder im UI ausblenden. Dazu verwenden wir die Aktion "Hide" in der IDE-Action, um die Felder aus der Oberfläche zu entfernen. Bei diesen Feldern handelt es sich um Hilfsfelder, die wir für das Dokument nicht sichtbar benötigen. Im nächsten Schritt passen wir die Felder an und geben ihnen neue Qualifier, da wir sie der neuen Facet zuordnen wollen. Die entsprechenden administrativen Felder im unteren Bereich ordnen wir der neuen Facet für die Admin-Felder zu. Nachdem wir alle Felder angepasst haben, legen wir im nächsten Schritt fest, welche Felder für die Selektion relevant sind. Zudem passen wir weitere Felder an, die wir zwar nicht als LineItem in der Liste sehen wollen, wohl aber auf der Object Page.

Sind wir mit der Anpassung so weit fertig, können wir die Felder übernehmen. Es werden nun alle neuen UI-Annotationen eingefügt. Vorher erhalten wir noch eine Preview, die wir aber einfach bestätigen können. Im nächsten Schritt passen wir die Header-Informationen an und ändern die Beschreibung auf ein neues Feld. Sind wir mit den Änderungen so weit zufrieden, können wir die Metadata Extension mit den neuen UI-Annotationen aktivieren und sind damit fürs Erste fertig.

Document Annotationen

Nachdem wir nun die UI-Annotationen hinzugefügt haben, wollen wir für die Dokumente, die wir später hochladen möchten, das Feld für den Upload in der App aktivieren. Dazu wechseln wir in den Core Data Service und ergänzen die entsprechenden Annotationen an den Feldern. Zuerst ergänzen wir die Semantics am MimeType-Feld. Im nächsten Schritt definieren wir am Dokumenten-Feld selbst, dass es sich um ein Large Object handelt. Dort geben wir über die Annotation Semantics alle Informationen mit, die der Stream-Typ benötigt, wie zum Beispiel den MimeType und den eigentlichen Dateinamen, den wir im unteren Teil finden. Im Header des Views definieren wir zudem einen neuen semantischen Schlüssel, in diesem Fall die Dokumenten-ID. Dieser dient später dazu, dass wir über einen fachlichen Schlüssel auf das Dokument zugreifen können, ohne beispielsweise den Draft-Key verwenden zu müssen. Für die Dokumenten-ID definieren wir noch ein entsprechendes Textelement. Dieses verweist auf den Titel des aktuellen Dokuments. Damit erreichen wir, dass später nicht die technische ID angezeigt wird, sondern wir immer den sprechenden Text sehen. Im letzten Schritt blenden wir die technische ID aus und zeigen stattdessen den eigentlichen Text an, um die generische ID im UI komplett zu ersetzen.

Suche

Nachdem wir nun das Dokument in der App aktiviert haben, aktivieren wir gleichzeitig noch die Suchfunktion. Dazu müssen wir erst einmal im Header-Bereich des CDS-Views die allgemeine Suchfunktion aktivieren. Im nächsten Schritt definieren wir die Felder, über die wir suchen können, zum Beispiel den Titel oder die Beschreibung des Dokuments. Für die beiden Felder des Dokuments aktivieren wir zusätzlich die Fuzzy Search, damit wir auch dann passende Ergebnisse erhalten, wenn Texte Tippfehler enthalten oder nur teilweise mit der Suche übereinstimmen. Zum Abschluss aktivieren wir den Core Data Service, damit alle Änderungen wirksam werden.

Schlüssel

Gehen wir nun in unsere Anwendung und aktualisieren das UI. Im ersten Schritt versuchen wir, einen neuen Datensatz anzulegen, merken aber, dass wir nach einem Schlüssel gefragt werden. Geben wir dort einen ersten Testschlüssel ein, erhalten wir eine Fehlermeldung, dass dieser nicht einer UUID entspricht. In diesem Fall erwarten wir eigentlich, dass der Schlüssel automatisch vom Framework vergeben wird und wir nicht nach dem Inhalt gefragt werden. Die Schlüsselvergabe sollte in der Definition des Business-Objekts erfolgen. Deshalb navigieren wir zur Behavior Definition und passen das Feld Dokumenten-ID an, indem wir "numbering: managed" ergänzen. Das Framework kümmert sich nun um die automatische Nummernvergabe, wenn wir einen neuen Datensatz anlegen. Nun kann es vorkommen, dass wir trotz der automatischen Nummernvergabe weiterhin ein Eingabefeld für dieses Schlüsselobjekt erhalten. In diesem Fall haben wir vergessen, das Attribut auf readonly zu setzen. Gehen wir deshalb noch einmal zurück in die Behavior Definition und aktualisieren das Attribut. Nachdem wir die Anwendung neu geladen haben, ist das Feld nun schreibgeschützt und wird automatisch befüllt.

Test

Testen wir im ersten Schritt also unsere Anwendung und legen einen neuen Datensatz an. Nun werden wir nicht mehr nach der Eingabe der ID gefragt und können erste Attribute wie den Dokumenttyp, den Titel und die Beschreibung definieren. Sobald wir den Datensatz gespeichert haben, wird dieser auch auf der Datenbank angelegt. Im nächsten Schritt können wir auch ein Dokument hochladen. In diesem Fall laden wir als erstes Testdokument eine JSON-Datei hoch, die bei uns im Download Ordner liegt. Über den Button hinter dem Feld kannst du den Dialog starten, dann wählen wir die Datei aus und laden das Dokument hoch. Das Dokument befindet sich nun in der Tabelle auf der Datenbank. Im nächsten Schritt wechseln wir noch einmal in die Metadata Extension und ergänzen an der Beschreibung den Langtext. Damit erhalten wir eine größere Texteingabe im UI und müssen uns nicht auf ein einzeiliges Eingabefeld beschränken. Damit können wir zum Abschluss das Dokument mit etwas mehr Inhalt beschreiben.

Zusammenfassung

In der heutigen Folge haben wir uns um die UI-Annotationen der Anwendung gekümmert. Dabei haben wir verschiedene Facets über eine IDE-Action automatisch anlegen lassen und zugeordnet. Wir haben die Schlüsselvergabe für das UI gefixt, sodass die Datensätze wieder automatisch angelegt und die Nummern vergeben werden. Weiterhin haben wir einen Langtext definiert, um mehr Inhalte für die App zur Verfügung zu stellen. Damit wären wir wieder am Ende der Folge. Danke fürs Zusehen und bis zum nächsten Mal.

YouTube
Video