Applikationen CD-gerecht und effizient designen mit Page Templates, Custom Menus und Color Schemes
Zur effizienten Umsetzung eines CD-gerechten Designs bietet GAPTEQ ein eigenes Template-System und die Möglichkeit zum Arbeiten mit unterschiedlichen Farbeschemata.
Zwei Beispiele für die Variationsmöglichkeiten beim Arbeiten mit Farben und Designs.
IHRE VORTEILE
- Einheitliches Erscheinungsbild angelehnt an Ihr Corporate Design.
- Einfache Umsetzung eines Seiten-übergreifenden Navigationskonzepts.
- Unterschiedliche Navigation für verschiedene Bereiche (z.B. Admin-Menü).
DIE FEATURES
Page Templates
Für den durchgängigen Aufbau und die einheitliche Gestaltung von GAPTEQ-Lösungen empfiehlt sich das Arbeiten mit Page Templates. Möglich ist hier sowohl die Definition nur eines Templates als Standard für alle Seiten ebenso aber auch die seitenweise variable Zuordnung unterschiedlicher Templates. Das zugrunde liegende Layout der Seiten sowie die Navigation basieren entweder auf dem GAPTEQ-Standard oder können, mit Hilfe von HTML und CSS, auch völlig frei gestaltet werden.
Custom Menu
Zwei vordefinierte Menü-Templates stehen in GAPTEQ zur Auswahl (Menü oben, Menü links). Diese haben im Standard einen schwarzen Hintergrund mit fest definierten Links und lassen sich Seite 2 | 29.07.2021 © GAPTEQ | Page Templates, Custom Menus, Color Schemes mit Hilfe von HTML und CSS verändern. Darüber hinaus ist die Erstellung und Gestaltung der Menüs völlig frei.
Color Schemes
In GAPTEQ besteht die Möglichkeit, ein individuelles Farbschema zu hinterlegen. Dieses kann Komponenten wie beispielweise Buttons, Grids oder Tabellen zugewiesen sowie darauf basierend deren farbliches Erscheinungsbild im Sinne von beispielsweise Button-Hintergrundfarbe und Hover-Effekt, Schriftfarbe, Grid-Header-Farbe oder Grid-Zahlenfarbe, gestaltet werden.
SO GEHT’S – SCHRITT FÜR SCHRITT
Durch die schrittweise Anwendung und damit dem Zusammenspiel der oben beschriebenen GAPTEQ-Funktionalitäten erhalten Sie viel Gestaltungsraum für das Abbilden eines einheitlichen Erscheinungsbildes oder das Anlegen Seiten-übergreifender Navigationskonzepte.
- Neues Template erstellen und anwenden.
- Default Template für Anwendung festlegen.
- Templates für einzelne Seiten wählen.
Nachfolgend zeigen wir Ihnen exemplarisch, wie Sie die Komponenten und Funktionalitäten einsetzen.
1. Neues Template erstellen und anwenden
Template-Konfiguration öffnen: Repository -> Page Templates
Templates
Ein Klick auf 
öffnet den Dialog zur Erstellung
Jetzt wählen Sie aus, welches Standard-Template Sie verwenden möchten. Es steht ein Template mit Top-Menü und Side-Menü zur Auswahl.
Der HTML-Code mit Platzhalter wird durch Klick auf Templates und Auswahl der gewünschten Vorlage in Ihrem Template erstellt.
Entsprechende HTML- und CSS-Kenntnisse vorausgesetzt können Sie das Template nach Ihren Wünschen anpassen oder komplett selbst gestalten.
Es stehen Editor-Fenster zur Eingabe von HTML und CSS zur Verfügung. Mit der Preview Funktion können Sie den aktuellen Stand der Vorlage überprüfen.
Placeholder
Im Placeholder Menü stehen vordefinierte Platzhalter-Variablen zur Auswahl. Diese können beliebig im Template (Reiter: HTML) platziert werden.
z.B. HomeLink, UserLogin, UserFullName.
Functions (ImageUrl und PageUrl)
Mit diesen Helper-Functions lassen sich Links zu Seiten und Bilder erstellen.
Beispiel eines erstellten Links zu einer ausgewählten Page:
$[PageUrl(/Public/Pages/pageStartCustomer)]
So sieht ein funktionierender HTML-Link aus:
<a href=“$[PageUrl(/Public/Pages/pageStartCustomer)]“>Startseite Kunden</a>
Conditionals
Es stehen vordefinierte Abfragen zur Verwendung im Template zur Auswahl.
Beispiel Authenticated:
Ist der User eingeloggt werden eine Welcome Message und der Logout angezeigt.
Der nicht angemeldete User sieht den Login Link.
Beispiel isMemberOf:
Mit der Condition isMemberOf können Code-Blöcke im Template erstellt werden die im Frontend nur für die angegebenen User-Gruppen sichtbar sind. Die Condition verfügt über einen optionalen ELSE-Zweig für HTML-Code, der ausgegeben wird, wenn der User nicht Mitglied der Gruppe ist.
So können Sie beispielsweise entsprechend Ihrem Rechtemanagement Navigations-Bereiche erstellen, die nur für berechtigte User sichtbar sind.
Dieses Beispiel finden Sie in der GAPTEQ SAMPLE APP Geräteverwaltung.
2. Default Template für Ihr Projekt festlegen
Möchten Sie Ihr neu erstelltes Template als Default-Template verwenden, öffnen Sie mit einem Rechts-Klick auf das Template das Kontext-Menü und wählen „Set as default page template“.
3. Templates für einzelne Seiten wählen
Wollen Sie für eine Page ein anderes Template verwenden, kann dies in den Eigenschaften der Page gewählt werden.
