1. Overview: Previous Website Styling (data/styles-src)

In earlier versions (ANDP versions up to and including 2.5), the central styling of the application was stored under data/styles-src. This SCSS-based styling applied globally to the entire website, i.e., for all templates and all pages in the portal, and was implemented using classic web technologies (CSS, SCSS).

2. New Styling for MicroApps from ANDP 8.2

Note
 The following applies only to versions starting from ANDP 8.2.

With ANDP 8.2, a new styling system was introduced due to the migration to React Native, which is specifically intended for the various MicroApps. This is based on React Native StyleSheets and is technically independent of the previous styles-src. Thus, the old style-src has no influence whatsoever on the MicroApps:

  • Messages MicroApp

  • Business Cases MicroApp

  • Tasks MicroApp

  • FormGen MicroApp

The old style-src is only used for the portal that integrates the MicroApps (i.e., for elements like the navigation bar, the login menu, the footer, the service catalog, etc.).

3. Adapting MicroApp Styling in Projects

With the move to React Native, a new styling concept is used that is no longer compatible with classic CSS or SCSS. The reason is that React Native styles are generated not only for the web but also for native platforms (iOS, Android) – classic web stylesheets cannot be directly adopted for this.

🔧 How does styling work now?

Instead of CSS classes, JavaScript objects are now used, which are very similar to the CSS principle – but in their own syntax:

  • Every style definition is a JS object that functions like a CSS class.

  • Instead of hyphen notation (font-size), CamelCase is used (fontSize).

  • Values are specified directly as strings or numbers – each with a colon.

For example, a CSS class headline which sets the font size to 18px, the font weight to bold, and the color to #333, would be written as follows:

const styles = StyleSheet.create({
  headline: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

🔗 More information and a complete property reference can be found in the official React Native documentation: * Style - Basics * StyleSheet API

Difference between .native.ts and .web.ts

In some cases, it may be necessary to use platform-dependent styling – i.e., different appearances for Web and Native App (iOS/Android).

For this, React Native has a built-in capability via file extensions:

  • .native.ts: Used on mobile platforms (iOS, Android)

  • .web.ts: Used on web platforms

So if the following two files exist: * styles.native.ts * styles.web.ts

Then, during compilation, the appropriate file is automatically used – depending on whether the app is running in a web browser or as a native app.

💡 This technique can be used, for example, if different margins, font sizes, or touch-specific adjustments are needed on mobile devices.

Custom vs. Common

As known from previous projects, styling in the new system is also divided into two areas:

  • Common Styles: Base styling provided by Gentics.

  • Custom Styles: Project-specific adjustments.

Important
 🚫 common must not be modified – these styles are central and update-compatible. Own adjustments and overrides are done exclusively in custom. There, defined objects from common can be specifically overwritten or supplemented.

Procedure in the Project

The structure of the project is prepared such that all relevant JavaScript objects used in the code are already created in the custom styling. This means:

  • You do not need to define new objects.

  • You can simply fill the existing objects with your own style properties.

Example:

// In custom-style of FormGen

const overlayFooterStyles = StyleSheet.create({
  footer: {},
  footerText: {},
});

Here, for example, you could set the text color in the footer of the overlays to red by inserting { color: 'red' } into footerText. These are automatically layered over the existing common styling and overwrite it for objects with the same name.

4. Theming: Central Control for Consistent Styling

In addition to component-based styling via common and custom, there is a central theming system that serves to configure visual properties uniformly across all MicroApps.

Theming offers a central interface with which, for example, colors, font sizes, or margins can be adjusted simultaneously in all MicroApps – without having to change each app individually.

🎨 Structure of the Theme

The theme consists of two levels:

  1. Theme Properties

    • These are used directly in the components of all MicroApps and can be found under andp-cpa/packages/core/src/styles/theme.web.ts (or …​/theme.native.ts).

    • If you change, for example, primaryBackgroundColor in the central theme from white to red, all components using this property will automatically be displayed in red – regardless of the MicroApp.

  2. Variables

    • One level above are the definitions of variables, which can be found under andp-cpa/packages/core/src/styles/variables.ts.

    • These variables are used in the theme or can be inserted there at various places.

    • They serve to define style definitions such as colors, margins, sizes, etc., uniformly in one place, creating a kind of design system.

5. Adapting Fonts

To use custom fonts in the MicroApps, the following steps are necessary:

1. Store Font Files

Place the .ttf or .otf files in the following folder: core/src/styles/custom/fonts

2. Register Fonts in font-config.ts

Open the file: core/src/styles/custom/font-config.ts

There, the fonts can be defined as key-value pairs. For example:

export const fontFamilies = {
  'Inter-Regular': require('./fonts/Inter-Regular.ttf'),
  'Inter-Bold': require('./fonts/Inter-Bold.ttf'),
  'MyFont-Italic': require('./fonts/MyFont-Italic.ttf'),
};

  • The Key is the internal name that can later be used as fontFamily in styling.

  • The Value is the path to the font file, included with require(…​).

3. Assign Fonts in the Theme

Within the central theme, these fonts can then be assigned to the various style types – e.g.:

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

This allows you to define which font should be used for which text style in all MicroApps – centrally and consistently.

6. Custom CSS for Pseudo-Classes

Official Documentation: CSS Pseudo-Classes

Idea

On mobile devices, there is no real hovering → React Native does not support :hover, :focus, etc. For the web version, we use a div wrapper with classes: <element-type>-element, e.g., string-element, number-element, reference-element.

Usage

Custom styles go into custom-style.css. Pseudo-classes can be used there.

Example (style ALL elements on hover):

div[class$="-element"]:hover {
  outline: 2px solid black;
  border-radius: 6px;
  outline-style: dashed;
  box-shadow: 0 4px 12px rgba(0, 206, 209, 0.25);
}
Warning
 Attention! In custom-style.css, use only styles with pseudo-classes if possible. Other styles may potentially be overwritten by theming, etc.