Formular-Theme

Geändert am Mi, 29 Jan um 12:28 NACHMITTAGS

8.3.0 Dieses Menü existiert seit Version 8.3.0. Für vorige Versionen siehe das Menü Layout (CSS).

Unter Formular-Themes werden alle Layouts für Formulare verwaltet. Ein Formular-Theme steuert, wie ein Formular gestaltet ist. Jedem Formular ist ein Theme zugewiesen.

Mit der Version 8.3.0 ist es nun auch möglich, Einfluss auf die Gestaltung der Abschlussseiten (HTML-Template) zu nehmen. Damit ist es möglich, das gleiche HTML-Template für verschiedene Formular zu verwenden und trotzdem entsprechend des Formular-Themes darzustellen.

Gleichzeitig bietet diese Version auch die MöglichkeitWeiterhin ist es auch möglich, ein Standard-Formular-Theme festzulegen, entweder für das ganze System oder pro Mandant. Das Standard-Theme wird verwendet für neue Formulare sowie als als Rückfall, wenn kein Theme ermittelt werden konnte. Auch ist es im Formular-Designer möglich, das Formular-Theme auf Auto zu setzen, sodass immer dynamisch das aktuelle Standard-Theme verwendet wird.

Für fortgeschrittene Anwendungsfälle ist es schließlich auch möglich, Plugins zu erstellen, welche neue Formular-Themes bereitstellen.

Inhalt

Aufbau eines Formular-Themes

Der Hauptbestandteil eines Formulars sind jeweils eine CSS-Datei für das Formular und eine für Abschlussseiten. Bei einer CSS-Datei handelt es sich um Vorschriften, wie verschiedene Elemente dargestellt werden sollen (Farbe, Schriftart, Abstände etc.).

Falls man ein Formular-Theme nicht von Grund auf neu erstellen möchte, kann ein bestehendes Formular-Theme als Grundlage genutzt werden. Das Layout des Themes, welches als Grundlage dient, wird dann zuerst angewandt.

Manchmal möchte man auch Bilder (Logos) oder Schriftarten einbinden. Hierzu können am Formular-Theme beliebig viele Bilder und Schriftarten hochgeladen und im CSS via url(...) referenziert werden (siehe unten für ein Beispiel).

Falls für fortgeschrittene Layout-Anforderungen zusätzliches JavaScript erforderlich ist, können pro Formular-Theme auch eine oder mehrere JavaScript-Dateien hochgeladen werden. Beispielsweise könnte es erforderlich sein, zusätzliche CSS-Klassen zu setzen oder das Formular anders zu modifizieren, damit es per CSS entsprechend gestaltet werden kann.

In dieser Hinsicht sind die CSS- und JavaScript-Dateien eines Formular-Themes ähnlich zu Mandant-Dateien. JavaScript- und CSS-Mandant-Dateien werden aber in alle Formular eingebunden, die des Formular-Themes nur dann, wenn das entsprechende Theme ausgewählt ist.

Konfiguration eines Formular-Themes

Zur Konfiguration eines Formular-Themes stehen 2 Ansichten bereit: Einfach und Fortgeschritten. Das Wechseln erfolgt über den Umschalter rechts oben.

In der einfachen Ansicht lassen sich nur die 2 Haupt-CSS-Dateien für das Formular und für Abschlussseiten bearbeiten. Dieser Modus ist ähnlich zum Menü Layout (CSS), das es vor Version 8.3.0 von formcycle gab.

In der fortgeschrittenen Ansicht lassen sich alle Dateien in einer Datei-Explorer-Ansicht bearbeiten. Zur besserern Strukturierung werden auch Ordner unterstützt.

Einfache Ansicht

Einfacher Bearbeitungsmodus für Formular-Themes. Hier lässt sich das CSS für das Formular und für Abschlussseiten bearbeiten. Rechts oben lässt sich in den fortgeschrittenen Bearbeitungsmodus wechseln.

In der Mitte kann zwischen dem CSS für das Formular und für Abschlussseiten gewechselt und das CSS entsprechend bearbeitet werden.

Rechts in der Leiste lassen sich noch einige Details zum Theme konfigurieren:

Name Der interne Name des Themes. Der Name ist nicht für den Endanwender sichtbar und wird etwa im Formular-Designer bei der Auswahl des Themes verwendet.
Beschreibung Die Beschreibung ist ebenfalls intern und nur in diesem Menü sichtbar. Hier können bei Bedarf interne Anmerkungen hinterlegt werden.
Basierend auf Optionale Auswahl eines Formular-Themes, welches als Grundlage dienen soll. Standardmäßig ist hier das Standard-Theme ausgewählt, welches von formcycle bereitgestellt wird. Es können dann kleine Anpassungen wie Farbe oder Schriftgröße vorgenommen werden. Wird hier kein Theme ausgewählt, muss das komplette Layout selber vorgenommen werden.

Fortgeschrittene Ansicht

Fortgeschrittener Bearbeitungsmodus für Formular-Themes. In dem Datei-Explorer lassen sich alle Dateien der einzelnen Themes bearbeiten. Dateien können auch per Drag & Drop hochgeladen oder verschoben werden. Rechts oben lässt sich in den einfachen Bearbeitungsmodus wechseln.

Zur Wahrung der Übersicht werden leere Ordner beim Beenden der Bearbeitung eines Formular-Themes entfernt.

Bei der fortgeschrittenen Ansicht handelt es sich um einen Datei-Explorer, der in 3 Bereiche untergliedert ist. Links ist ein Baum mit allen Formular-Themes sowie den Ordnern der einzelnen Themes. Rechts wird der Inhalt des aktuell ausgewählten Ordners angezeigt. Überhalb dieser beiden Bereiche findet sich die Aktionsleiste, wo etwa Themes erstellt und gelöscht oder zwischen der Icon-Ansicht und der Listen-Ansicht gewechselt werden kann.

Der Datei-Upload ist per Drag & Drop möglich oder durch Nutzung des entsprechenden Buttons in der Aktionsleiste. Um eine Datei herunterzuladen, kann ebenfalls der Button in der Aktionsleiste verwendet werden. Alternativ kann auch das Kontextmenü durch Rechtsklick geöffnet und hier Herunterladen gewählt werden. Sind mehrere Dateien oder ein Ordner ausgewählt, wird beim Herunterladen eine ZIP-Datei erstellt.

Wird eine Datei hochgeladen oder in einen anderen Ordner verschoben, wird diese

Für einige Arten von Dateien steht zudem ein Editor bereit, der durch Doppelklick auf die Datei geöffnet werden kann:

Bilder Über einen einfachen Bildeditor können Bilder gedreht, skaliert und andersweitig bearbeitet werden.
Text Über einen Texteditor können Textdateien bearbeitet werden. Für spezielle Dateien wie JavaScript, CSS, HTML oder JSON bietet der Editor auch Zusatzfunktionen wie Syntax-Hervorhebung oder Autocomplete an.
Schriftarten Zwar können diese nicht bearbeitet werden, durch Doppelklick lassen sich aber Informationen wie Name, Schriftfamilie oder Lizenz der Schriftart einsehen (falls diese in der Datei enthalten sind). Zudem wird ein Beispielstext in der Schriftart angezeigt.

Hinweise zur Ordnerstruktur. Jedes Formular-Theme enthält immer 3 Hauptordner, welche nicht gelöscht werden können:

webForm Ordner für CSS- und JavaScript-Dateien, welche automatisch im Formular eingebunden werden sollen.
htmlTemplates Ordner für CSS- und JavaScript-Dateien, welche automatisch in Abschlussseiten eingebunden werden sollen.
resource Ordner für Ressourcen, die nicht automatisch eingebunden, sondern von anderen Dateien referenziert werden. Beispielsweise werden hier Bilder und Schriftarten hochgeladen, um diese im CSS zu nutzen. Weiterhin ist es auch möglich, CSS-Dateien hochzuladen und dieser via @import in einer anderen CSS-Datei einzubinden. Auf diese Weise ist es möglich, gemeinsames CSS zu erstellen, welches sowohl im Formular als auch auf Abschlussseiten vorhanden sein soll.

Um die Details eines Themes (Name, Details, Basierend auf) zu bearbeiten, kann entweder ein Rechtsklick auf das Theme ausgeführt und im Kontextmenü Info gewählt werden. Alternativ ist es auch möglich, dass Theme durch Linksklick zu markieren und auf den entsprechenden Button in der oberen Aktionsleiste zu klicken. Siehe den oberen Abschnitt zum einfachen Bearbeitungsmodus bezüglich einer Erläuterung zu den Theme-Details.

Beispiel für Logo und Schriftart

Wie erwähnt ist es möglich, an einem Formular-Theme auch Bilder und Schriftarten hochzuladen. In diesem Abschnitt wird diese an einem kurzen Beispiel illustriert. Hierzu wird die frei verfügbare Schriftart Liberation sowie das Testbild Jelly Beans als Logo verwendet.

Das CSS wurde zum Zwecke der Illustration so einfach wie möglich gehalten. Für die praktische Verwendung sind möglicherweise noch Anpassungen wie verschiedene Auflösungen für verschiedene Bildschirme oder alternative Schriftartenformate notwendig.

Aus Gründen der Performance wird der Browser die Dateien (kurzzeitig) speichern. Während der Entwicklung eines Themes empfiehlt es sich, den Cache des Browsers zu deaktivieren. In vielen Browsern ist dies beispielsweise im Netzwerk-Tab der Entwicklertools möglich.

Zuerst müssen das Logo und die Schriftarten hochgeladen werden. Hierfür wird der Ordner resource verwendet. Zur Gliederung legen wir zudem noch Unterordner an:

Hochgeladenes Logo und die Schriftarten-Dateien für das Beispiel. Zur besseren Übersichtlichkeit wurde eine entsprechende Ordnerstruktur angelegt.

Da die Schriftart sowohl im Formular als auch in den Abschlussseiten verwendet werden soll, legen wir noch eine CSS-Datei im Ordner resource an, welche sowohl in den CSS-Dateien für das Formular und für Abschlussseiten eingebunden wird.

CSS-Datei mit gemeinsamen Layout-Vorschriften für das Formular und für Abschlussseiten. Diese wird nicht automatisch eingebunden, sondern muss in den anderen CSS-Dateien importiert werden.

Innerhalb des Themes ergeben sich damit folgende Dateipfade:

htmlTemplate/template.css
resource/css/common.css
resource/font/LiberationSerif-Bold.ttf
resource/font/LiberationSerif-BoldItalic.ttf
resource/font/LiberationSerif-Regular.ttf
resource/font/LiberationSerif-Italic.ttf
resource/image/logo/jelly_beans.png
webForm/form.css

Nun müssen noch die CSS-Dateien mit Inhalt befüllt werden. Wir beginnen mit common.css, wo die Schriftart eingebunden werden soll. Dazu benötigten wir den relativen Link auf die Schriftart. Die CSS-Datei befindet sich im Pfad resource/css/common.css, die Schriftart im Pfad resource/font/LiberationSerif-Regular.ttf. Bei Dateien befinden sich im gemeinsamen Überordner resource. Der Link zur Schriftart relativ zur CSS-Datei ist folglich ../font/LiberationSerif-Regular.ttf. (Mit 2 Punkten ".." wird zum übergeordneten Ordner navigiert.) Nun können wir die Schriftart mittels @font-face definieren.

Durch Doppelklick auf die Datei common.css öffnet sich ein Editor zum Bearbeiten. In diesem Beispiel haben wir die Schriftartendateien der Schrifart Liberation für die verschiedenen Schriftstärken und Schriftlagen definiert.

Nun müssen wir die Datei common.css in den CSS-Dateien für das Formular und die Abschlussseiten einbinden und die Schriftart mittels der Eigenschaft font-family verwenden. Der relative Link von webForm/form.css zu resource/css/common.css lautet ../resource/css/common.css.

CSS für das Formular und die Abschlussseiten. Wir binden die Datei common.css ein und verwenden die Schriftart liberation-serif, welche dort definiert wurde.

Schließlich wollen wir noch das Logo im Header des Formulars einbinden. Dazu müssen wir die Datei form.css verwenden. Der relative Link von webForm/form.css zu resource/image/logo/jelly_beans.png lautet ../resource/image/logo/jelly_beans.png. Wir erweitern die Datei form.css um ein ::after-Pseudo-Element im Header des Formulars:

CSS für die Darstellung des Logos im Header des Formulars. Das Logo wird als Hintergrundbild eingebunden und entsprechend formatiert. Zur korrekten Funktionsweise ist es erforderlich, das korrekte Seitenverhältnis in der Eigenschaft aspect-ratio festzulegen.

Damit ist das Demo-Theme fertig. Wir erstellen uns ein Test-Formular, wählen das Theme im Formular-Designer (Tab Formular rechts). Nun können wir uns das fertige Ergebnis im geöffneten Formular ansehen:

Das Formular und eine Abschlussseite mit dem erstellten Demo-Theme. Man erkennt das Logo sowie die Liberation-Schriftart mit Serifen. Im Netzwertab der Entwicklertools finden sich auch die Dateien wieder, welche am Formular-Theme hochgeladen wurden.

Alle Dateien des Demo-Themes können hier heruntergeladen werden: demo_theme_logo_schriftart.zip

Anhänge (1)

zip

demo_theme_l....zip
892 KB