Skript: Recycling-Heroes - Value Helps and Texts (Contact) [012]
Was fehlt der Kontakt App noch, damit sie durch den Enduser genutzt werden kann? Eigentlich nur noch etwas Komfort, mehr Hilfe und eine Suche für die Werte.
Inhaltsverzeichnis
Einleitung
In dieser Folge erstellen wir Suchhilfen für unser UI, ersetzen einige technische Werte durch Texte und implementieren eine allgemeine Suche in der Anwendung.
Datenelement
Im ersten Beispiel erzeugen wir eine Suche für die das unser Datenelement "Contact Type", dabei befinden sich alle Werte in den Festwerten der Domäne. Schauen wir uns dazu einmal die Domäne an und vergleichen die verschiedenen Werte. Als Nächstes benötigen wir einen neuen Core Data Service, der die Daten im passenden Format für uns anzeigen soll. Das VH am Ende des Views weist auf eine Value Help hin, hierbei handelt es sich um ein gängiges Kürzel bei der Anlage des Objekts. Das Referenzobjekt lassen wir leer, da wir gleich ein Template verwenden wollen. Achte vor der Generierung darauf dass du das Template ViewEntity verwendest.
In diesem Beispiel gehen wir nicht über die Code Snippet Seite auf, sondern verwenden eine neue IDE Action die sich aktuell noch in der Beta befindet. Über "Generate Code Snippet" wählen wir die Aktion "Value Help from data element" und geben einen Namen für das Feld und das entsprechende Datenelement an. Nach Ausführung der Action erhalten wir einen Code-Vorschlag den wir übernehmen. Zum Abschluss räumen wir noch den View auf und aktivieren das Objekt im System. Führen wir nun den Data Preview auf dem View aus und halten das Ergebnis des Views neben die Domäne. Die Festwerte und die passenden Texte werden uns angezeigt.
Nun möchten wir die Suchhilfe in unseren Core Data Service auf Consumption Ebene übernehmen. Vor dem Feld "ContactTypeInt" führen wir wieder unsere IDE Action aus und wählen in diesem Schritt "Define Value Help at field". Hier können wir den Core Data Service für die Wertehilfe eintragen, sowie den Feldnamen. Nach Bestätigung wird das Template übernommen. Kennst du die Annotation aus dem Kopf, brauchst du den Code Snippet nicht. Laden wir nun die UI neu. Rufen wir nun die Wertehilfe des Feldes auf, dann werden uns die drei Typen angezeigt. Wählen wir einen Typen aus, dann wird dieser übernommen und wir können die Daten danach filtern.
Passen wir nun die Wertehilfe noch einmal an. Eigentlich wollen wir für die drei Werte einen Dropdown im UI haben. Dazu müssen wir eine Annotation auf Header Ebene hinzufügen. Unter den Code Snippets finden wir die Aktion "Activate Dropdown", welche uns eine Annotation in den View einfügt. Diese definiert die Ergebnismenge, als sehr klein, was zur Folge hat, dass das Feld auf dem UI in eine Dropdown umgewandelt wird. Aktualisieren wir nun das UI, erhalten wir die definierte Dropdown. Hier können wir die Einträge direkt auswählen.
Wertehilfe
Definieren wir uns nun weitere Wertehilfen im System. Im ersten Schritt definieren wir uns auf der "ContactId" eine neue Wertehilfe. Dazu verwenden wir als Grundlage den Base View des Datenmodells aus. Über das Kontextmenü können wir einen neuen Core Data Service anlegen, einen Namen geben und eine Beschreibung. Am Ende daran denken, das richtige Template für die Anlage zu definieren. Ist der neue View angelegt, löschen wir einige Annotationen die wir nicht benötigen. Dann definieren wir die Felder, die wir in der View benötigen. Im ersten Schritt legen wir uns ein neues zusammengesetztes Feld an. Dazu verbinden wir Vorname und Nachname. Dann definieren wir für den Typen die Wertehilfe, sowie im Consumption View und entfernen Felder, die wir nicht in der Suchhilfe benötigen. Führen wir dann den View aus, erhalten wir einen Preview der Daten. Zum Abschluss übernehmen wir die Suche in den Consumption View. Nun verwenden wir einen Standard View im System, um für die Länder eine Suchhilfe zu haben. Mit I_CountryVH sollten wir eine passende Suchhilfe erhalten.
Führen wir nun unsere Anwendung aus, dann werden die Suchhilfen an den Feldern geladen. Rufen wir dazu die Hilfe für die Kontakte auf, dann sehen wir unsere definierten Felder in der Liste. Für jedes Feld gibt es eine Einschränkungsmöglichkeit bzw. einen Filter im oberen Teil. Öffnen wir die Länder, erhalten wir ebenfalls die definierte Suchhilfe.
Im nächsten Schritt müssen wir die Suchhilfen im Service ebenfalls als Entität nach außen freigeben. Dazu fügen wir die verschiedenen Views in die Service Definition ein. Solltest du einmal eine Suchhilfe nicht öffnen können oder diese nicht verfügbar sein, kann es sein das der View nicht freigegeben wurde.
Als letzten Schritt korrigieren wir noch das Feld an der Suchhilfe. Durch Copy und Paste ist uns hier ein Fehler unterlaufen, welcher als Warnung in der IDE angezeigt wird. Danach wieder speichern und aktivieren.
Assoziationen
Bevor wir die Texte in die UI übernehmen können, müssen wir zuerst einmal die Assoziationen definieren, um die nötigen Zusatzdaten zu erhalten. Auf Root Ebene fügen wir deshalb die neuen Views hinzu. Dazu definieren wir eine Assoziation und verwenden dabei die neue Kardinalität. Diese löst die alte Kardinalität mit den Zahlen ab und sollte als Nachfolger auch verwendet werden. Wir definieren einen 1:1 Zugriff und geben der Entität einen Alias mit Unterstrich, dieser gehört zu den Best Practices. Dann definieren wir die Verbindung über den ContactType. Als letzten Schritt müssen wir die Assoziation im View publizieren, indem wir sie im unteren Teil einfügen. Diesen Vorgang wiederholen wir nun für den Kontakt und das Land.
Nun benötigen wir noch für den User eine Wertehilfe, aber auch eine Möglichkeit die Texte einfach anzubinden. Dazu definieren wir uns einen neuen View im SHARE Paket. Diesen wollen wir später freigeben, benötigen ihn aber erst einmal nur für die Kontakte. Wir verwenden dabei die UserID, den vollen Namen und die E-Mail des Anwenders. Zum Abschluss räumen wir den View noch einmal auf, führen den Pretty Printer aus und aktivieren das Objekt.
Zum Abschluss können wir den View für den Ersteller und den letzten Änderer einbinden. Dabei verwenden wir zwei unterschiedliche Aliase, da es sich hier auch um unterschiedliche Informationen handeln kann. Sind wir damit fertig, geben wir noch die beiden Assoziationen in der Feldliste bekannt. Als letzten Schritt fügen wir die Assoziationen auf Consumption Ebene hinzu und aktivieren das Objekt. Damit ist die Vorarbeit abgeschlossen.
Texte
Nun definieren wir uns die Texte im View. Dazu können wir über den Alias der Assoziation gehen und das Feld aus dem View ansprechen. Wir legen deshalb Felder für die ContactType Beschreibung an, vergeben einen Alias und definieren uns dann für die Felder CountryName, CreatedUser und ChangeUser ebenfalls Textfelder im View an.
Dann verbinden wir die Texte mit den jeweiligen Schlüsseln. Dazu benötigen wir die Annotation aus dem Bereich "ObjectModel" und definieren dort das gerade eingebundene Textfeld. Über die UI Annotation "textArrangement" können wir definieren, wie und wo der Text angezeigt wird. Für den Typen und das Land steht der Text als erstes und damit der Wert in Klammern dahinter. Für die User wollen wir nur die Texte sehen, die entsprechenden IDs sind uns dabei egal.
Gehen wir nun zurück zum UI und aktualisieren die Anwendung, dann finden wir nun die entsprechenden Texte. So ist zum Beispiel der Typ nun entsprechend mit dem Text und der ID befüllt. Der Filter auf dieser Ebene funktioniert weiterhin und hat nun ebenfalls den Text im Bauch. Vorher stand hier nur der technische Werte als Filterwert. Wechseln wir nun auf die Object Page der Anwendung, dann sehen wir in den Userdetails nur noch den Namen und nicht mehr die UserID. In den Daten findest du nun das entsprechende Land mit dem Schlüssel in Klammern. Damit haben wir einige der technischen Werte mit Texten versehen.
Suche
Im letzten Schritt dieser Folge wollen wir eine allgemeine Suche in der App für einige Felder aktivieren. Dazu müssen wir die Suche im Consumption View zuerst einmal aktivieren. Im Header fügen wir deshalb die Annotation "Search.searchable" hinzu und stellen sie auf True, damit wird das Suchfeld im UI aktiviert. Im nächsten Schritt müssen wir die Standardelemente der Suche definieren, also über welche Felder des Views gesucht wird. Die Suche definieren wir auf der ID, Vorname, Nachname, Straße und Stadt. Die Fuziness bestimmt, wie genau der Text gesucht wird. Mit 1.0 wird der Wert genauso erwartet und ohne Fehler, bei 0.8 müssen wir nicht alle Buchstaben eingeben, um ein Ergebnis zu erhalten. Grundsätzlich können wir einen Wert von 0.6 bis 1.0 eingeben.
Testen wir zum Abschluss die Suche in der Anwendung. Geben wir zum Beispiel den Vornamen ein und vergessen die letzten Buchstaben, dann findet die Suche trotzdem die Zeilen. Geben wir eine ID falsch ein, erhalten wir keinen Treffer, ist sie allerdings vollständig, dann wird genau gefiltert. Geben wir zum Abschluss noch die Stadt ein und vergessen einen Buchstaben dazwischen, dann erhalten wir auch hier Treffer. Die Suche funktioniert natürlich auch kombiniert wir den Standardelementen der anderen Filter.
Zusammenfassung
Damit sind wir so weit am Ende der Folge angelangt. Wir haben die verschiedenen Suchhilfen in unsere Anwendung eingebunden, haben zusätzliche Daten über Assoziationen hinzugefügt und einige der technischen Werte durch Texte ergänzt. Zum Abschluss wurde die allgemeine Suche in die Anwendung integriert.
Beim nächsten Mal werden wir weitere Informationen über virtuelle Felder hinzufügen und das UI weiter finalisieren. Bis dahin, danke fürs Zuschauen und bis zum nächsten Mal.
YouTube
Video