Custom Styling

MicroApp Styling ab ANDP 8.2

Überblick: Bisheriges Website-Styling (data/styles-src)

In den fürheren Versionen (ANDP Versionen bis inklusive 2.5) war das zentrale Styling der Anwendung unter data/styles-src abgelegt. Dieses SCSS-basierte Styling galt global für die gesamte Website, also für alle templates und alle Seiten im Portal und wurde mit klassischen Web-Technologien (CSS, SCSS) umgesetzt.

Neues Styling für MicroApps ab ANDP 8.2

Hinweis: Folgendes gilt nur für Versionen ab ANDP 8.2

Mit ANDP 8.2 wurde aufgrund vom Umstieg auf React-Nativ ein neues Styling-System eingeführt, das speziell für die verschiedene MicroApps gedacht ist. Dieses basiert auf React Native StyleSheets und ist technisch unabhängig vom bisherigen styles-src. Somit hat das alte style-src überhaupt keinen Einfluss mehr auf die MicroApps:

  • Nachrichten MicroApp
  • Geschäftsfälle MicroApp
  • Aufgaben MicroApp
  • FormGen MicroApp

Das alte style-src wird nur mehr für das Portal, welches die MicroApps integriert, verwendet. (Also für Sachen wie zum Beispiel die Navigationsleiste, das Login Menü, den Footer, den Servicekatalog, etc.)

Anpassung von MicroApp-Styling in Projekten

Mit dem Umstieg auf React Native wird ein neues Styling-Konzept verwendet, das nicht mehr mit klassischem CSS oder SCSS kompatibel ist. Der Grund dafür ist, dass React Native Styles nicht nur für Web, sondern auch für native Plattformen (iOS, Android) generiert werden – klassische Web-Stylesheets können dafür nicht direkt übernommen werden.

🔧 Wie funktioniert Styling jetzt?
Statt CSS-Klassen verwendet man jetzt JavaScript-Objekte, die dem Prinzip von CSS sehr ähnlich sind – allerdings in einer eigenen Syntax:
  • Jede Stildefinition ist ein JS-Objekt, das wie eine CSS-Klasse funktioniert.
  • Statt Bindestrich-Notation (font-size) wird CamelCase verwendet (fontSize).
  • Werte werden direkt als Strings oder Zahlen angegeben – jeweils mit Doppelpunkt
Eine css-class headline welche die font size auf 18px, die font weight auf bold und die Farbe auf #333 stellt, würde man also beispielsweise wie folgt schreiben 


const styles = StyleSheet.create({

  headline: {

    fontSize: 18,

    fontWeight: 'bold',

    color: '#333',

  },

});
🔗 Mehr Informationen und eine vollständige Property-Referenz gibt es in der offiziellen React Native Dokumentation:
Unterschied zwischen .native.ts und .web.ts 

In manchen Fällen kann es notwendig sein, plattformabhängiges Styling zu verwenden – also unterschiedliches Aussehen für Web und native App (iOS/Android).

Dafür gibt es in React Native eine eingebaute Möglichkeit über Dateiendungen:

  • .native.ts: Wird auf mobilen Plattformen verwendet (iOS, Android) 
  • .web.ts: Wird auf Web-Plattformen verwendet
Also wenn folgende zwei Dateien exisiteren:
  • styles.native.ts
  • styles.web.ts

Dann wird beim Kompilieren automatisch die passende Datei verwendet – je nachdem, ob die App im Webbrowser oder als native App läuft.

💡 Diese Technik kann z. B. genutzt werden, wenn auf mobilen Geräten andere Abstände, Schriftgrößen oder Touch-spezifische Anpassungen nötig sind.

Custom vs. Common
Wie bereits aus früheren Projekten bekannt, wird das Styling auch im neuen System in zwei Bereiche unterteilt:
  • Common Styles: Basis-Styling, das von Gentics vorgegeben ist
  • Custom Styles: Projektspezifische Anpassungen
🚫 Wichtig:
  • common darf nicht verändert werden – diese Styles sind zentral und updatefähig.
  • Eigene Anpassungen und Überschreibungen erfolgen ausschließlich in custom.
  • Dort können definierte Objekte aus common gezielt überschrieben oder ergänzt werden.
Vorgehen im Projekt
Die Struktur des Projekts so vorbereitet, dass im custom-Styling bereits alle relevanten JavaScript-Objekte angelegt sind, die im Code verwendet werden. Das bedeutet:
  • Man muss keine neuen Objekte definieren
  • Man kann einfach die vorhandenen Objekten mit eigenen Style-Properties befüllen
Beispiel: 


// Im custom-style von FormGen

const overlayFooterStyles = StyleSheet.create({

  footer: {},

  footerText: {},

});
Hier könnte man z.B. die Farbe des Text im Footer der Overlays auf Rot setzten, indem man im footerText { color: 'red' } einfügt. Diese werden automatisch über das bestehende common-Styling gelegt und überschreiben es bei gleichnamigen Objekten.

Theming: Zentrale Steuerung für konsistentes Styling

Neben dem komponentenbasierten Styling über common und custom gibt es ein zentrales Theming-System, das dazu dient, visuelle Eigenschaften einheitlich über alle MicroApps hinweg zu konfigurieren.

Das Theming bietet ein zentrales Interface, mit dem sich zum Beispiel Farben, Schriftgrößen oder Abstände gleichzeitig in allen MicroApps anpassen lassen – ohne jede App einzeln ändern zu müssen.

🎨 Aufbau des Themes
Das Theme besteht aus zwei Ebenen:
  • Theme-Properties
    Diese werden direkt in den Komponenten aller MicroApps verwendet und sind unter andp-cpa/packages/core/src/styles/theme.web.ts (bzw. .../theme.native.ts) zu finden
    Wenn man z. B. primaryBackgroundColor im zentralen Theme von weiß auf rot ändert, werden automatisch alle Komponenten, die diese Property verwenden, rot dargestellt – egal in welcher MicroApp.
  • Variablen
    Eine Ebene darüber liegen die Definitionen von Variablen, welche unter andp-cpa/packages/core/src/styles/variables.ts zu finden sind.
    Diese Variablen werden im Theme verwendet bzw. können dort an verschiedenen Stellen eingefügt werden.
    Sie dienen dazu, Style-Definitionen wie Farben, Abstände, Größen usw. einheitlich an einem Ort festzulegen, um so eine Art Design-System zu schaffen.

Fonts anpassen

Um eigene Schriftarten in den MicroApps zu verwenden, sind folgende Schritte notwendig:
  1. Font-Dateien ablegen
    Lege die .ttf - oder .otf -Dateien im folgenden Ordner ab: core/src/styles/custom/fonts    
  2. Fonts in font-config.ts registrieren
    Öffne die Datei: core/src/styles/custom/font-config.ts 
    Dort können die Fonts als Key-Value-Paare definiert werden. Beispielweise 
    

export const fontFamilies = {
    
  'Inter-Regular': require('./fonts/Inter-Regular.ttf'),
    
  'Inter-Bold': require('./fonts/Inter-Bold.ttf'),
    
  'MyFont-Italic': require('./fonts/MyFont-Italic.ttf'),
    
};
    Der Key ist der interne Name, den man später als fontFamily im Styling verwenden kann.

    Der Value ist der Pfad zur Font-Datei, eingebunden mit require(...) 

  3. Fonts im Theme zuweisen
    Innerhalb des zentralen Themes können diese Fonts dann den verschiedenen Stilarten zugeordnet werden – z. B.: 
    

export const theme = {
    
  fonts: {
    
    regular: 'Inter-Regular',
    
    bold: 'Inter-Bold',
    
    italic: 'MyFont-Italic',
    
    thin: 'Inter-Thin',
    
    thinItalic: 'Inter-ThinItalic',
    
		...
    
  },
    
};

Dadurch kannst man festlegen, welcher Font für welchen Textstil in allen MicroApps verwendet werden soll – zentral und konsistent.