Eigenes Theme in SAP Fiori einstellen

In SAP Fiori 2.0 ist es möglich, ein eigenes Theme zu verwenden. Normalerweise wird das SAP Belize oder SAP Quartz Theme verwendet. In diesem Artikel zeige ich Dir Schritt-für-Schritt, wie Du ein eigenes Theme in SAP Fiori verwenden kannst. Dies kann verwendet werden, wenn SAP Fiori an das eigene Corporate Design angepasst werden soll. Alternativ kann auch ein eigenes Design verwendet werden.

Die Grundlage dieses Artikels bildet der SAP-Hinweis 2337350. Dort sind vor allem die technischen Voraussetzungen näher beschrieben.

Eigenes Theme in SAP Fiori erstellen

Um ein eigenes Theme in SAP Fiori zu erstellen, sind folgende Schritte notwendig:

1. SAP Fiori Theme Designer öffnen
2. Neues Theme erstellen
3. Vorschauseiten hinzufügen
4. Eigenes Theme einrichten
5. Eigenes Theme sichern und aufbauen

SAP Fiori Theme Designer öffnen

Als Erstes öffnest Du den SAP Fiori Designer. Den SAP Fiori Designer kannst Du entweder über den Transaktionscode /UI5/THEME_DESIGNER in der SAP GUI im Kommandofeld oder über die URL https://<host>.<domain>:<port>/sap/bc/theming/theme-designer?sap-client=<client> starten.

Wenn Du den Transaktionscode /UI5/THEME_DESIGNER in der SAP GUI eingibst, erscheint ein Fenster zur SAP GUI-Sicherheit. Hier kannst Du auf den Button „Zulassen“ klicken.

Daraufhin öffnet sich der UI-Theme-Designer, mit dem man eigene Themes in SAP Fiori erstellen kann.

Neues Theme erstellen

Im UI-Theme-Designer klickst Du daraufhin auf den Button „Neues Theme erstellen“, um ein selbstdefiniertes Theme in SAP Fiori auf Grundlage eines SAP-Standard-Themes zu erstellen.

Im nächsten Popup kannst Du ein SAP-Theme als Basis für Dein selbstdefiniertes Theme in SAP Fiori auswählen. Die Themes SAP Quartz und SAP Belize stehen in verschiedenen Varianten zur Verfügung. Es handelt sich dabei um eine Vorlage. Dein eigenes Theme kannst Du dann nach Belieben anpassen und verändern. Das Kopieren und Anpassen eines bestehenden Themes ist deutlich einfacher und schneller als ein komplett neues Theme zu erstellen.

Wenn Du ein älteres Theme wie z.B. SAP Blue Crystal, SAP Chrome, SAP Coribu, SAP Gold Reflection, SAP Streamline oder SAP Tradeshow als Referenz verwenden möchtest, klicke im selben Popup-Fenster auf die Option „Legacy-Themes anzeigen“, um auch eines dieser Themes auswählen zu können.

Wenn Du ein Theme als Voralge ausgewählt hast, kannst Du auf den Button „Theme erstellen“ klicken.

Vorschauseiten hinzufügen

Nachdem Du auf den Button „Theme erstellen“ geklickt hast, gelangst Du zu einer Seite „Vorschauseiten hinzufügen“. Auf dieser Seite musst Du nun Deine Anwendung verlinken und kannst einen eigenen Namen festlegen.

In meinem Fall gebe ich das SAP Fiori Launchpad und damit den Link https://<host>.<domain>:<port>/sap/bc/ui2/flp?sap-client=<client> als Anwendung und einen passenden Namen an. Anschließend kannst Du auf den Button „Hinzufügen“ klicken. Daraufhin wurde die Anwendung erstellt und ist auf der linken Seite sichtbar.

Eigenes Theme einrichten

Im UI-Theme-Designer kannst Du nun Dein eigenes Theme anpassen und damit einrichten. Hierbei stehen zahlreiche Änderungsmöglichkeiten zur Verfügung. Auf der rechten Seite kann man zwischen verschiedenen Optionen wählen. Folgende fünf Optionen stehen hierbei zur Verfügung:

• Quick-Theming
• Detailliertes Theming
• Expert-Theming
• Unternehmensfarben in der Palette
• LESS oder CSS in Theme

Dadurch erhält man zahlreiche Anpassungmöglichkeiten bezüglich Farbe und Design. Man kann dabei sogar eigenes LESS oder CSS einfügen.

Im Editor kann zwischen Original und Vorschau gewechselt werden, um zu prüfen, wie das Design auf verschiedenen Endgeräten mit unterschiedlichen Bildschirmgrößen aussieht.

Eigenes Theme sichern und aufbauen

Wenn man das eigene Theme fertiggestellt hat, wählt man in der Menüfunktion die Option „Theme > Sichern & Aufbauen“.

Hier sieht man gut, dass man unter anderem die Möglichkeit hat, das Thema nur zu speichern, zu exportieren oder ein Thema zu importieren.

Nachdem man die Option „Sichern & Aufbauen“ gewählt hat, erscheint ein Popup, in dem man die Theme-ID und den Titel ändern kann. Klicken Sie hier auf die Schaltfläche „Sichern“. Das Theme wird gespeichert und generiert. Es kann nun verwendet werden.

Eigenes Theme in SAP Fiori verwenden

Eigenes Theme in SAP Fiori in Einstellungen aufrufen

Nach der Generierung steht das eigene SAP Fiori Theme zur Verfügung und kann in den Einstellungen ausgewählt werden. Hierfür wählst Du im Me-Bereich die Option „Einstellungen“. Im Menüpunkt „Erscheinungsbild“ kann man daraufhin das eigene Theme in SAP Fiori auswählen. Nach dem Klick auf „Sichern“ wird SAP Fiori in den festlegen Farben angezeigt.

Eigenes Theme in SAP Fiori per Parameter aufrufen

Sobald das eigene SAP Fiori Theme generiert wurde, kann man es ebenfalls über einen Parameter in der URL aufrufen. Mit dem Parameter sap-theme kannst Du die ID des Themes in der URL angeben und damit das Theme ebenfalls einfach und schnell ändern. In der URL fügst Du einfach &sap-theme=<theme-id> hinzu und bestätigst die Eingabe mit der Enter-Taste. Beachte hierbei, dass Du die Variable <theme-id> mit der Theme-ID Deines eigenen Thems austauscht. Im UI-Designer kannst Du die Theme-ID ermitteln, indem Du die Menüfunktion „Theme > Eigenschaften“ wählst.

Bei Bedarf kann man hier den Titel verändern.

In meinem Fall füge ich also &sap-theme=custom_quartzlight hinzu, damit die URL folgendermaßen aussieht: https://sap.erp-up:8443/sap/bc/ui2/flp?sap-client=100&sap-theme=custom_quartzlight#Shell-home

SAP Fiori Theme als Standard festlegen

Man kann natürlich auch im SAP-System ein Theme als Standard in SAP Fiori festlegen. Hierfür sind folgende Schritte notwendig:

• Transaktion /UI2/NWBC_CFG_SAP
  • THEME-Parameter prüfen
• Transaktion /UI2/NWBC_CFG_CUST
  • Parameterwert mit Theme-ID anlegen
• Transaktion /UI2/FLP_SYS_CONF
  • Standard Theme festlegen

In der Transaktion /UI2/NWBC_CFG_SAP prüfst Du als Erstes den Parameterwert des THEME-Parameters. Normalerweise sollte dieser auf sap_fiori_3 festgelegt sein.

Anschließend rufst Du die Transaktion /UI2/NWBC_CFG_CUST auf. Hier fügst Du einen neuen Eintrag hinzu, mit dem Filter SAP_FLP, dem Parametername THEME und als Wert die Theme-ID Deines gewünschten Themes.

Beim Speichern gibst Du einen Customizing-Transport an, indem die Änderungen gespeichert werden.

Als Nächstes rufst Du die Transaktion /UI2/FLP_SYS_CONF auf. Im Knoten „Launchpad-Konfiguration“ änderst Du den Wert von THEMING_DEFAULT_THEME auf den angelegten Wert in der Transaktion /UI2/NWBC_CFG_CUST. In meinem Fall ist das custom_quartzlight. Beim Speichern gibst Du einen Workbench-Transport an.

Nachdem Speichern wurde das Theme in SAP Fiori als Standard-Theme eingerichtet und wird zukünftig allen SAP-Benutzern in SAP Fiori angezeigt. Möchtest Du die Änderungen wieder rückgängig machen, kannst Du den Wert von THEMING_DEFAULT_THEME in der Transaktion /UI2/FLP_SYS_CONF auf sap_fiori_3 (Wert in der Transaktion /UI2/NWBC_CFG_SAP) ändern oder alle gezeigten Einstellungen entfernen.