Layout-Design mittels CSS-Element

Im CSS können Angaben zu Layout, Farben und Typografie definiert werden. So können Sie unter anderem Schriftarten, -größen und -farben für Ihre Formulare festlegen. Auch feldgenaue Designs sind über das CSS möglich: Einzelne Formularfelder können verändert werden oder alle Formularfelder eines Typs.

Über CSS-Anweisungen kann zum Beispiel die Hintergrundfarbe aller Auswahllisten eines App Projektes verändert werden - oder nur die einer konkreten Auswahlliste in einem bestimmten Formular. Auch das Einbinden von Firmenlogos oder Hintergrundbildern ist über das CSS möglich - und vieles Weitere mehr.

Die entsprechenden Festlegungen werden im Projekt-Element CSS gespeichert:

Das CSS-Element findet sich im Projekt-Editor und kann auf Projekt-Ebene abgelegt werden. Ein CSS-Modell ist referenzierbar für jedes EPK-Modell oder Formular, das sich innerhalb desselben Profils befindet.

Hinweis zur Arbeit mit BPaaS bis Version 17.2

Bis Scheer BPaaS Version 17.2 war das CSS-Element auch im Prozess-Editor verfügbar und konnte auf der Arbeitsfläche einer EPK abgelegt werden.

Beispiel: CSS-Modell Layout Katalog im Prozess-Editor

Das CSS-Modell Layout Katalog enthält Design-Anweisungen für die Formulare Artikel Übersicht und Bestellübersicht . Das Modell wurde in der EPK angelegt, in der sich die zugehörigen Formulare befinden.

Da das CSS-Modell ein Projekt-Element ist, kann es nicht mit den EPK-Elementen verbunden werden.

Experten-Tipp

Zur besseren Übersicht ist es vorteilhaft, CSS-Modelle auf hoher Ebene im Projekt anzulegen: Entweder an oberster Stelle im Projekt-Editor oder auf der Einstiegsseite eines App-Projektes.

Beispiel: CSS-Modell Layout Beschaffung im Projekt-Editor

Das CSS-Modell Layout Beschaffung enthält Design-Anweisungen für das App Projekt Beschaffung. Es wurde deshalb im Projekt-Editor auf der Ebene des App Projektes abgelegt.

Die CSS-Vorlagen

Sie können für Ihre App Projekte komplett eigene CSS-Modelle erstellen. Es gibt aber auch die Möglichkeit, vorhandene Vorlagen zu nutzen, denn jedes neu angelegte App Projekt enthält drei vorkonfigurierte CSS-Modelle:

Diese drei Vorlagen enthalten bereits eine Reihe von CSS-Anweisungen. Sie können die Vorlagen Ihren EPK-Modellen direkt zuordnen oder die darin gespeicherten CSS-Anweisungen nach Ihren Wünschen verändern.

Standardmäßig ist dem Referenzmodell und dem Übersichtsmodell eines neu angelegten App Projekts die CSS-Vorlage CSS Blau zugewiesen.

Die Standard-Vorlagen sind übersichtlich strukturiert, sodass individuelle Anpassungen einfach möglich sind: