Skript: Recycling-Heroes - UI Design Contact [011]
Wie bringen wir nun die Felder auf das UI und in sinnvollen Gruppen zusammen? In dieser Folge schauen wir uns die Details des UI Designs, am Beispiel der Kontakte, an. Dabei gehen wir Abschnitt für Abschnitt durch die Anwendung.
Inhaltsverzeichnis
Einleitung
Im letzten Video haben wir Schritt für Schritt die RAP Anwendung erstellt. Allerdings fehlt im Moment ein durchgängiges UI für unsere Anwendung. Deshalb schauen wir uns in diesem Video das Design und den Aufbau Abschnitt für Abschnitt an.
Metadata Extension
Starten wir im ersten Schritt mit der Anlage der Metadata Extension. Hierbei handelt es sich um ein eigenes Objekt, wohin wir unsere verschiedenen UI Annotationen auslagern können, um den eigentlichen View sauber zu halten und somit Übersicht zu bewahren. Grundsätzlich legen wir die UI Annotation auf Ebene des Consumption Views an. Hier verwenden wir den gleichen Namen wie der eigentliche Core Data Service. Das macht es später bei der Zuordnung der Objekte einfacher. Die Annotation "Layer" hat so weit keine große Bewandtnis, deshalb befüllen wir hier den Layer Customer.
Über den Content Assist oder STRG + SPACE bekommen wir eine Auswahl der möglichen Felder oder können, wie in unserem Fall direkt alle Elemente einfügen. Damit wir gleich Schritt für Schritt durch die verschiedenen Punkte des UIs gehen können, blenden wir zuerst einmal alle Elemente aus. Dafür können wir die Annotation UI.hidden verwenden. Zur Anpassung aller Elemente gehen wir noch einmal mit Suchen und Ersetzen über den View, damit die Warnmeldungen ausgeblendet werden. Mit dem Pretty Printer können wir die Elemente im View formatieren. Zum Abschluss aktualisieren wir die UI und schauen uns den initialen Zustand an.
Selektion
Beginnen wir mit dem Aufbau des List Report, der Einstiegsseite des am häufigsten genutzten Templates. Ähnlich wie beim Selektionsbild eines Reports, definieren wir uns zuerst einmal ein paar Felder, über die der User im Standard filtern kann. Mit dem Element UI.selectionField definieren wir Felder, für die wir die Filter einblenden wollen. Mit Position definieren wir die Reihenfolge der Felder von links nach rechts. Dazu blenden wir uns die Kontakt ID, den Typen von Kontakt und das Land als Filter ein. Laden wir im Anschluss das UI erneut, dann werden die drei Felder im oberen Teil angezeigt und wir könnten nun die Daten filtern.
Liste
Nun wollen wir die ersten Einträge in er Liste sehen. Über die Annotation UI.lineItem können wir die Elemente in der Liste anzeigen. Dabei geben wir wieder eine Position mit, um die Reihenfolge er Elemente auf dem Bild zu bestimmen. Die Liste ist immer der erste Teil der Daten, die der Anwender nach Ausführung des Filters sieht. Hier sollten wesentliche Informationen stehen, mit der der Anwender erste Entscheidungen treffen kann. Wir blenden uns dazu ebenfalls die Kontakt ID, den Typen von Kontakt, den Vornamen, Nachnamen, die Stadt und das Land ein. Laden wir im Anschluss die Anwendung neu und führen mit GO die Selektion aus, dann werden die Daten nun in der Liste angezeigt.
Fügen wir noch einen Text über der Tabelle ein. Mit UI.headerInfo.typeName können wir eine Beschreibung der Daten einfügen. Hier gibt es zwei Varianten, je nachdem wie viele Daten geladen werden. Der Text in der Anwendung ist später dann noch übersetzbar. Laden wir nun die Anwendung neu, wird der Text nun im Header der Tabelle angezeigt. Laden wir die Daten einmal neu, dann wird uns die Gesamtanzahl aller Datensätze auf der Datenbank zu dieser entsprechenden Selektion angezeigt. So wissen wir, mit wie vielen Datensätzen wir hier arbeiten.
Mit einem Klick auf einen Datensatz wechseln wir auf die Object Page, hierbei handelt es sich um die Detailseite, wo wir normalerweise alle Details der Anwendung finden. Da nicht immer alle Informationen im List Report angezeigt werden können, können wir in dieser Liste alle Details und Unterentitäten aufnehmen. Im Moment ist die Seite noch komplett leer, bis auf die Edit und Delete Aktion.
Header
Erzeugen wir dazu erst einmal den Header mit einer Überschrift und einem Text darunter. Dazu finden wir wieder unter UI.headerInfo einen Titel und eine Beschreibung. Über Value können wir direkt ein Feld aus der Entität nehmen, dessen Inhalt dann im UI angezeigt wird. Gehen wir zurück ins Fiori UI und aktualisieren, dann werden die beiden Informationen angezeigt.
Nun wollen wir eine erste Gruppe an Daten im Header anzeigen. Der Header wird normalerweise nicht editiert, hier findest du nur Informationen zur Anzeige, die noch einmal einen wichtigen Überblick geben sollen. Dazu definieren wir uns eine Facet, hierbei handelt es sich um einen Teil des UIs. Wir können hier verschiedene Facets erstellen und fangen mit dem ersten Objekt an. Eine Facet benötigt immer eine eindeutige ID, diese kannst du frei benennen. Wir verwenden hier meist den Zusatz "id" zu Beginn. Eine Facet hat ebenfalls eine Position, in welcher Reihenfolge sie angezeigt wird, so wie bei den Feldern und der Liste. Als Typ verwenden wir die FIELDGROUP_REFERENCE, damit werden hier Element aus dem Bereich Fieldgroup zugeordnet. Über Purpose können wir definieren, dass die Facet im Header angezeigt wird. Über Label geben wir der Gruppe eine Überschrift und über den targetQualifier können wir gleich Elemente aus der Feldlist der Gruppe zuordnen.
Da wir eine Fieldgroup verwenden. Definieren wir das Element auch an unserem Feld. Neben der Position verwenden wir auch den Qualifier, damit ordnen wir das Feld einer Facet zu, wenn wir einmal mehrere Facets haben sollten. Laden wir nun einmal das UI neu, dann wird die Gruppe mit dem Titel angezeigt und die Beiden User bzw. Felder mit ihrem Inhalt darunter.
Inhalt
Definieren wir nun den eigentlichen Inhalt, den wir auf der Seite anzeigen und pflegen wollen. Dazu erzeugen wir uns eine neue Facet, dieses Mal vom Typ IDENTIFICATION_REFERENCE. Den Purpose müssen wir hier nicht definieren, da der Standardwert STANDARD ist und damit im Hauptbereich angezeigt wird. Wir definieren wieder ein Label und einentargetQualifier, damit wir gleich Felder zuordnen können. Um nun Felder der Referenz zuordnen zu können, müssen wir die Annotation UI.identification verwenden. Wie bei der Fieldgroup definieren wir das Element am Feld, setzen eine Position und einen Qualifier, um das Element dem Abschnitt zuzuordnen. In diesem Fall machen wir das für zwei Felder. Gehen wir dann zurück ins UI, dann wird der neue Abschnitt geladen und die beiden Felder werden uns angezeigt.
Erstellen wir uns nun einen neuen Abschnitt für die restlichen Details des Kontakts. In diesem Fall definieren wir uns eine Collection. Hierbei handelt es sich um eine Zusammenführung von mehreren Facets unter einem gemeinsamen Punkt. Die Collection erhält damit eine ID, eine Position und den Typ COLLECTION. Ebenfalls ordnen wir ein Label hinzu, welches später als Navigationstab angezeigt wird. Der Collection ordnen wir nun zwei weitere Facets zu, einmal für die Personendaten und einmal für die Adresse. Um die Facet nun mit der Collection zu verbinden, müssen wir das Element parentId definieren und die Collection ID als Referenz angeben. In diesem Fall definieren wir uns hier zwei Feldgruppen, um die restlichen Felder abzubilden. Entsprechend ordnen wir die Felder nun den verschiedenen Feldgruppen zu. Vorname, Nachname und Geburtstag ordnen wir der Person zu. Straße, Hausnummer, Stadt, Postleitzahl und Land entsprechend der Adresse. Im UI sehen wir nun die Details und innerhalb der Details die beiden Gruppen. Da wir gern die Person vorn und die Adresse dahinter sehen wollen, müssen wir noch die Positionen der beiden Gruppen anpassen. Nach dem Aktualisieren, steht die Person nun vorn, gefolgt von der Adresse.
Zum Abschluss erstellen wir noch eine letzte Facet für den digitalen Kontakt, also Telefon und E-Mail. Grundsätzlich ist es egal, ob du Feldgruppen oder Identifikationen für dein UI verwendest. Mit beiden kannst du die Gruppen abbilden und verschiedene Elemente zuordnen. Der einzige Unterschied ist hier die Annotation, die du in der Entwicklung verwendest und damit vielleicht auch Inhalte trennen kannst. Laden wir noch einmal das UI und sehen keine Gruppe. Was könnte hier das Problem sein? Schauen wir uns den Qualifier an, könnte hier das gleiche Problem wie mit dem ContactType bestehen, die eigentliche ID ist schon vergeben. In solchen Fällen kannst du immer probieren die IDs und Qualifier einmal anzupassen und zu schauen, ob dann der gewünschte Effekt einsetzt. Nun sollte auch die letzte Gruppe im UI angezeigt werden.
Test
Über den Edit Button können wir nun in den Änderungsmodus der App gehen. Hier werden uns alle Felder für die Änderung vorgeschlagen. Über Discard können wir den aktuellen Draft verwerfen, wenn wir die Daten doch nicht ändern wollen. Gehen wir zurück in den List Report, können wir die Daten laden. Setzen wir einen Filter, dann wird nur noch der eine Eintrag geladen. Legen wir uns einmal einen neuen Eintrag über Create an. Grundsätzlich können wir die verschiedenen Felder befüllen und mit Speichern wird der Datensatz angelegt. Allerdings fehlt uns im Moment noch der Schlüssel, dieses Feld ist nicht eingabebereit und bleibt leer. Da der Datensatz noch nicht korrekt ist, löschen wir diesen wieder aus unserer Tabelle.
Überblick
Wir haben nun eine erste RAP Anwendung gebaut die entsprechend die Daten verwalten kann und über dessen UI wir uns die Daten anzeigen und editieren können. Im System haben wir eine Vielzahl von Objekten definiert und jede einzelne Schicht wird für verschiedene Funktionen benötigt. Von der Datenbank, über die Core Data Services bis zum finalen Service. Dazu haben wir die Verhaltensdefinition, um das Verhalten des Objekts zu steuern. Zum Abschluss haben wir in der Metadata Extension unser UI Stück für Stück aufgebaut. In der nächsten Folge werden wir noch einige Änderungen vorzunehmen, um die Anwendungen für den Endanwender vorzubereiten.
Danke fürs Zuschauen und bis zum nächsten Mal.
YouTube:
Video