von Felix Reither
Business Applikationen können mit Hilfe von Icons intuitiver gestaltet werden. Aktuell bietet die SAP Analytics Cloud (SAC) standardmäßig jedoch keine Lösung, um Icons einzubinden.
SAP UI5, welches als Technologie der SAC zugrunde liegt, beinhaltet eine Icon-Schriftart mit mehr als 650 Symbolen. Mit Hilfe des SAP Icon-Explorers (Link) lassen sich diese leicht durchstöbern.
Im Folgenden möchten wir zwei Möglichkeiten aufzeigen, um diese Icon-Schriftart in der SAC einzubinden.
Die globale Methode
Weitere Schriftarten lassen sich mit Hilfe der Funktion „Add a New Web Font“ (System -> Administration -> Default Appearance) in die SAC einbinden. Die Schriftart wird durch Angabe einer URL hinzugefügt. Sowohl die Schriftart als auch eine CSS-Datei, die diese referenziert, müssen hierfür auf einem separaten Server bereitgestellt werden.
Bevor die neue Schriftart verwendet werden kann, muss dieser Server den „Trusted Origins“ (System -> Administration -> App Integration) hinzugefügt werden. Wichtig ist also, dass dem referenzierten Server wirklich vertraut wird.
Trotz des Mehraufwands scheint dies aktuell der von der SAP empfohlene Weg zu sein, um Icons in der SAC einzubinden (Link).
Die lokale Methode
In Analytics Applications besteht die Möglichkeit „Benutzerdefinierten CSS-Code“ hinzuzufügen. Dies erlaubt uns, die über SAP UI5 im SAC Web-Frontend bereits standardmäßig eingebundenen Icon-Schriftarten in der Applikation anzuwenden.
Der folgende Code zeigt wie dies über eine separate CSS-Klasse für Button- als auch Text-Komponenten möglich ist.
Tipp: Sollten Sie ein oder mehrere Themes verwenden, kann mittels der „Enable Theme CSS“-Funktion der CSS-Code direkt dort hinterlegt werden. Sobald das Theme ausgewählt wird, stehen die CSS-Klassen zur Verfügung.
Diese Lösung funktioniert aktuell leider nur innerhalb von Analytics Applications, da in SAC-Storys kein CSS-Code hinterlegt werden kann.
Einfügen eines Icons
Um nun zum Beispiel einen „Accept“-Button zu erstellen, wird im Icon-Explorer (Link) nach einem passenden Icon gesucht. In diesem Fall wurde das erste Icon ausgewählt. Dieses wird anschließend mit Hilfe des angebotenen Buttons in die Zwischenablage kopiert.
Danach wird das kopierte Icon in das Text-Feld des Buttons eingefügt. Im Allgemeinen wird das Icon zunächst als „Viereck“ bzw. unbekanntes Symbol dargestellt.
Abschließend wird bei Anwendung der oben beschriebenen globalen Methode die Schriftart auf SAP Fiori Icons geändert bzw. bei der lokalen Methode die CSS-Klasse „icon“ gesetzt. Sobald dies geschehen ist, wird aus dem „Viereck“ automatisch das gewünschte Symbol.
Ihr Ansprechpartner
ist seit der Firmengründung Geschäftsführer der ABRACON GmbH. Er ist verantwortlich für die strategische Entwicklung des Unternehmens sowie die übergreifende Kundenbetreuung und Akquisition von Großkunden. Er ist seit mehr als 25 Jahren in Kundenprojekten im Schwerpunktberatungsbereich Business Intelligence als direkter Kundenansprechpartner und Projektleiter tätig.