Aus alt mach neu – Migration alter SAP-Themes vom Theme Editor auf den UI Theme Designer

SAP-Anwendungen sind heutzutage in nahezu allen großen Firmen zu finden. Damit das Design der Anwendungen den Unternehmensvorgaben entspricht, bietet SAP schon seit langem die Möglichkeit, über einen Theme-Editor eigene Themes auf Basis von SAP-Standard-Themes zu erstellen und anzupassen. Diese Themes konnten nach Bearbeitung exportiert und in anderen SAP-Portalen eingespielt werden, um über die komplette Systemlandschaft ein einheitliches Aussehen zu gewährleisten.

Bei der Arbeit mit dem Theme-Editor konnten für verschiedene Elemente (Tabellen, Buttons, Textfelder etc.) vorgegebene Attribute angepasst und die Änderung direkt betrachtet werden.

Dieser Theme-Editor kam allerdings bei speziellen Anforderungen recht schnell an seine Grenzen, weil nicht für jede gewünschte Anpassung eine Property bereitgestellt wurde. Für diese speziellen Anforderungen gab es die Möglichkeit, das Theme herunterzuladen. Das dabei erhaltene Archiv enthielt eine größere Anzahl an Property-Dateien mit tausenden Properties, welche nach Belieben bearbeitet werden konnten. Allerdings war das Ermitteln der passenden Property sehr mühsam und führte auch nicht immer zum Erfolg. So war es teilweise notwendig, den Wert bestehender Properties mit einem Semikolon zu beenden, um ein weiteres CSS-Attribut hinzuzufügen. Eine direkte Bearbeitung von CSS-Klassen war nicht vorgesehen.

Die Möglichkeiten von CSS entwickelten sich im Laufe der Jahre weiter und auch SAP machte sich an eine Überarbeitung des in die Jahre gekommenen Theme-Editors. Mit der NetWeaver Version 7.3.1 wurde daher der neue UI Theme Designer eingeführt, welcher viele Dinge komfortabler macht. Die interessanteste Neuerung für die Entwicklung dürfte sein, dass anstelle der Property-Dateien nun LESS-Dateien bearbeitet werden. Weil der NetWeaver mit der aktuell verfügbaren Version 7.5 den alten Theme-Editor nicht mehr unterstützt, muss spätestens beim Upgrade auf NetWeaver 7.5 über eine Migration der alten Themes auf den neuen Designer nachgedacht werden.

Wenn man in der glücklichen Lage ist, dass im bestehenden Theme keine CSS-Hacks (Erweiterung einer Property mittels Semikolon) verwendet wurden, gestaltet sich die Migration recht einfach. In diesem Fall muss nach dem Upgrade auf die NetWeaver-Version 7.5 lediglich der neue UI Theme Designer aufgerufen, das zu migrierende Theme ausgewählt und über den entsprechenden Button neu aufgebaut werden. Die Migration alter Properties in neue, deren Bezeichnung leicht angepasst wurde, erfolgt automatisch.

Interessanter wird hingegen die Migration der alten CSS-Hacks. Dafür müssen zunächst folgende SAP-Anwendungen aus dem NetWeaver heruntergeladen werden:

  • com.sap.portal.design.portaldesigndataless
  • com.sap.portal.design.urdesigndataless

Anschließend sollten folgende Schritte ausgeführt werden:

Schritt 1
Vor dem NetWeaver-Upgrade müssen alle CSS-Hacks herausgesucht, dokumentiert und entfernt werden. Benötigt werden folgende Informationen:

  • Name der Property
  • angewendeter Hack
  • alle Stellen, auf die sich der Hack auswirkt

Letzteres ist dabei der schwierigste Punkt. Sollten hier nicht alle Stellen bekannt sein, wird am Ende die Prüfung schwieriger, ob die Migration erfolgreich war. Ein Beispiel eines solchen CSS-Hacks sieht man in den beiden folgenden Abbildungen. An die Farbe der Überschrift einer Tabelle wurde ein zusätzliches Attribut für die Schriftart gehängt.

Abbildung 1: CSS-Hack für neue Schriftarten im Editor

Abbildung 1: CSS-Hack für neue Schriftarten im Editor

 

Abbildung 2: Zugehörige Property in Property-Datei

Abbildung 2: Zugehörige Property in Property-Datei

 

Schritt 2
Nach Abschluss des NetWeaver-Upgrades, muss im neuen Designer das Theme geöffnet und mittels „Neu aufbauen“ migriert werden.

Schritt 3
Im Designer müssen alle UI-Elemente zur Anzeige ausgewählt werden. Anschließend wird nach den alten Properties gesucht. Beim Suchen muss darauf geachtet werden, dass das „par“ am Anfang der Property entfernt wird. Als Ergebnis findet man dann den neuen Namen der Property.

Abbildung 3: Ermittlung der neuen Property

Abbildung 3: Ermittlung der neuen Property

 

Schritt 4
In den LESS-Dateien der beiden heruntergeladenen Anwendungen wird nun mittels Texteditor nach der neuen Property gesucht. Dabei werden Treffer in allen Standard-SAP-Themes angezeigt (siehe Abbildung 4). Für die Auswahl der Treffer ist dabei das Basistheme des eigenen Themes entscheidend.

Abbildung 4: Gesamte Treffermenge

Abbildung 4: Gesamte Treffermenge

 

Abbildung 5: Einzelne Verwendung

 

 

 

 

 

 

 

 

Abbildung 5: Einzelne Verwendung

Indem man die einzelnen Treffer durchgeht, erfährt man, in welchen Styleklassen die gesuchte Property verwendet wird und kann nun prüfen, für welche Fälle der CSS-Hack migriert werden soll.

Schritt 5
Nun gibt es zwei Anwendungsfälle:
(1) Entweder das über den Hack hinzugefügte CSS-Attribut ist bereits an der Style-Klasse definiert. In diesem Fall kann die Property dieses CSS-Attributes direkt angepasst werden. Möchte man im Beispiel aus Abbildung 5 die Schriftart anpassen, so muss lediglich der Wert für „@sapUrFontFamily“ geändert werden. Die Anpassung können zum einen direkt im Designer geschehen. Dies ist die komfortabelste Variante, da man im Designer auch jederzeit den selbst gesetzten mit dem ursprünglichen Wert vergleichen und sich die Auswirkung der Änderung auf die eigene Anwendung sofort anschauen kann. Alternativ kann das Theme aus dem Web Resource Repository des NetWeaver-Portals heruntergeladen werden. In den darin enthaltenen LESS-Dateien sind alle Änderungen gegenüber dem Standard-SAP-Theme enthalten. Hier können neben den bestehenden LESS-Properties auch ganze CSS-Klassen bearbeitet werden.
(2) Ist hingegen der gesuchte CSS-Hack noch nicht als Attribut an der CSS-Klasse zu finden oder soll die zugehörige Property nicht global angepasst werden, muss die Style-Klasse überschrieben und das gewünschte Attribut angepasst werden.

 

Die Schritte 3-5 werden nun für alle CSS-Hacks wiederholt. Zum Abschluss muss das fertige Theme neu aufgebaut werden, damit die Anpassungen wirksam werden.

 

Je nach Art und Anzahl der im alten Theme verwendeten CSS-Hacks ist die Migration auf den neuen Designer schnell geschafft oder kann sich über mehrere Stunden hinziehen. Am Ende lohnt sich jedoch der Aufwand. Einerseits wird die Gestaltung des CSS durch die Möglichkeit des Überschreibens von CSS-Klassen wesentlich flexibler. Anderseits wird die Bearbeitung der Themes durch die direkte Vorschau aller Änderungen im Designer komfortabler. Vor allem das Einbinden und Bearbeiten der eigenen Anwendung im Designer stellt dabei einen großen Mehrwert dar.

Kommentare sind abgeschaltet.