RAP - Icons
Wie findest du eigentliche Icons im UI5 Umfeld und wie kannst du diese mit ABAP Mitteln in deine Fiori Elements Anwendung einbauen? Lass uns diese Frage im Artikel beantworten.
Inhaltsverzeichnis
In diesem Artikel schauen wir uns an, wie wir mit Standard Icons das UI etwas aufbessern können und wie du diese an verschiedenen Stellen platzieren kannst.
Einleitung
Bisher sieht unsere Sales App noch relativ normal und etwas "farblos" aus. Dazu wollen wir an verschiedenen Stellen nun Icons ergänzen, um die Erkennung der Datensätze zu vereinfachen. Dabei wollen wir auf Basis der Abweichungen im Verkauf ein Icon definieren. Gibt es eine feste Abweichung, eine prozentuale Abweichung, keinen Eintrag oder beide Einträge.
Icon Explorer
In einem unserer ersten Artikel hatten wir uns das Thema Icons im SAP GUI Umfeld angeschaut. Früher einmal der maximale Punkt der Kreativität, wenn man selbst nach dem passenden Icon für seinen Button gesucht hat. Dabei sollten für konsistente UIs mögliche die standardisierten Icons verwendet werden, damit ohne große Einarbeitung eine Verwendung möglich ist. So ist ein Mülleimer immer das Icon, um etwas zu löschen. In der Fiori Welt sind Icons immer noch wichtig, um etwas in Listen darzustellen, einfacher und schneller sichtbar zu machen. Dazu stellt SAP den Icon Explorer zur Verfügung, wo du ganz einfach nach den vorhandenen Icons suchen kannst, die du für deine Anwendung verwenden willst.
Ein Icon für Fiori erkennst du meist am Zusatz "sap-icon" und danach folgt das eigentliche Icon als Text. Im UI bekommst du auch eine Vorschau und weitere Informationen zu dem jeweils gewählten Eintrag.
sap-icon://accessibility
Information
Im nächsten Schritt müssen wir die eigentliche Information über das Icon dem UI zur Verfügung stellen. Dafür benötigen wir ein Feld für das UI, welches das finale Icon des Datensatzes beinhaltet. Dabei ist der Typ nicht so relevant, sondern es muss nur den Text für die Identifikation aufnehmen.
Bereitstellung
Für die Bereitstellung bieten sich aktuell zwei Wege an. Wir können das Feld direkt im Core Data Service erzeugen, sozusagen als virtuelles Element über ein CASE-Statement. Das ist aber nur auf Ebene des Root/Interface möglich und nicht in der Projection. Da wir das Feld aber nicht im Draft oder auf der Datenbank benötigen, sondern eigentlich nur für das UI, bietet sich eine Lösung über ein VIRTUAL Field an.
Virtual Field
Bereits in anderen Artikeln der Serie haben wir virtuelle Elemente definiert, um zusätzliche Informationen dem UI zur Verfügung zu stellen. Daher erweitern wir den Projection View ZBS_C_SASale um das neue Feld und die Annotation.
@ObjectModel.virtualElementCalculatedBy: 'ABAP:ZCL_BS_DEMO_RAP_SALES_VE'
virtual LineIcon : abap.char(50),
Dann müssen wir die Anreicherung des Feldes in der Klasse ZCL_BS_DEMO_RAP_SALES_VE durchführen. Dazu erweitern wir die Methode CALCULATE, da wir bereits alle benötigten Informationen in GET_CALCULATION_INFO anfordern. Hier verwenden wir ein COND-Statement und gleichen die verschiedenen Use-Cases ab und geben das entsprechende Icon zurück.
original->LineIcon = COND #( WHEN original->DifferenceAmount > 0 AND original->DifferenceQuantity > 0 THEN
'sap-icon://alert'
WHEN original->DifferenceAmount > 0 THEN
'sap-icon://money-bills'
WHEN original->DifferenceQuantity > 0 THEN
'sap-icon://commission-check'
ELSE
'sap-icon://sys-help' ).
Service
Rufen wir nun den Service auf und blenden uns das Feld ein, dann gibt es aktuell noch keine Veränderung. Die Spalte wird mit dem korrekten Text aus der Ermittlung befüllt. Zumindest haben wir nun schon einmal die passende Information im UI und werden im nächsten Abschnitt daraus Icons erstellen.
Icon einbinden
Erzeugen wir nun aus den Texten entsprechende Icons und binden diese an unterschiedlichen Stellen ein.
Semantics
Bevor wir die Icons einbinden, sollten wir noch im Projection View die entsprechende Annotation setzen. Mit "Semantics.imageUrl" definieren wir den Inhalt unseres virtuellen Feldes als Image mit einer URL. Damit wird das Feld für das UI entsprechend anders interpretiert.
@Semantics.imageUrl: true
List Report
Da wir das Feld in ein Icon umgewandelt haben, müssen wir es nur noch im Standard einblenden und ein entsprechendes Label geben. Dazu erweitern wir die Metadata Extension ZBS_C_SASale und nehmen das Feld als "LineItem" auf und setzen es an die erste Stelle.
@UI.lineItem: [ { position: 1, label: 'Icon' } ]
LineIcon;
Das Ergebnis können wir dann im List Report direkt auf der Einstiegsseite sehen.
Je nach definierter Spalte kann allerdings nun viel Platz im UI entstehen, welcher wichtige Informationen abschneidet. Dazu können wir manuell die Breite der Spalte über die UI-Annotation "cssDefault.width" setzen.
@UI.lineItem: [ { position: 1, label: 'Icon', cssDefault.width: '7em' } ]
LineIcon;
Das UI sieht nach der Anpassung besser aus und der große Teil des Whitespaces ist verschwunden. Mit den Einheiten und der Breite solltest du schauen, wie es sich in den verschiedenen UI Auflösungen (Desktop, Mobile) am Ende verhält. Wir haben "em" (Schriftgröße) in diesem Beispiel verwendet, du kannst auch auch genau so "px" (Pixel) verwenden.
Object Page
Auf der Object Page haben wir normalerweise die Option, das Icon im Header anzuzeigen oder in einer Liste einer anderen Entität, was aber wiederum dem List Report entspricht. Die Implementierung ist recht einfach, da wir dafür nur eine Header Annotation benötigen. Dafür erweitern wir die Metadata Extension ZBS_C_SASale.
@UI.headerInfo.imageUrl: 'LineIcon'
Als imageURL geben wir unser definiertes Feld an und können dann die App neu laden. Das Icon wird neben dem Schlüssel und der Beschreibung im Header angezeigt. Verwendest du auch Informationen im Header (purpose: #HEADER), dann wird das Icon auch noch größer angezeigt.
Beispiel
Möchtest du einen praktischen Einblick in die Modellierung mit Icons haben, dann können wir dir ein YouTube Video aus der Recycling-Heroes Reihe empfehlen, wo wir das Thema virtuelle Elemente und zusätzliche UI-Features in einem praktischen Beispiel durchgehen.
Vollständiges Beispiel
Das vollständige Beispiel findest du in GitHub im entsprechenden Paket für die Sales App. Die Änderungen aus diesem Artikel findest du in diesem Commit und kannst damit die Änderungen, plus die Zusatzinformationen, nachvollziehen.
Fazit
Die Welt wird mit Icons wieder etwas "farbenfroher" und lebendiger. In Fiori und Fiori Elements gibt es einige Regeln mehr, wo du die Icons verwenden kannst und wo du es lieber lassen solltest. Mache dich daher auch mit den Design Guidelines im Fiori Umfeld vertraut.
Quelle:
SAP - Icon Explorer
