Page Templates, Custom Menu, Color Schemes

You are here:
Ungefähre Lesezeit: 2 min

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 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.

1. Neues Template erstellen und anwenden

  • Öffnen Sie die Template-Konfiguration im Menü links oben auf „Repository“ und „Page Templates“.

 

  • Um ein neues Template zu erzeugen, klicken Sie auf das grüne Plus-Symbol. Es öffnet sich der Dialog zur Erstellung.
  • Anschließend wählen Sie im Drop-down bei „Templates“ 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.

Tipp: Mit der Preview Funktion können Sie den aktuellen Stand der Vorlage überprüfen.

 

 

  • Im „Placeholder“ Menü stehen vordefinierte Platzhalter-Variablen zur Auswahl. Diese können beliebig im Template (Reiter: HTML) platziert werden (z.B. HomeLink, UserLogin, UserFullName).
  • Unter „Links“ (ImageUrl und PageUrl) finden Sie Helper-Functions, um Links zu Seiten und Bildern zu 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>

 

  • Unter „Conditionals“ stehen vordefinierte Abfragen zur Verwendung im Template zur Auswahl.

Beispiel „Authenticated“: Ist der User eingeloggt werden eine Welcome Message & 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.

 

 

Tipp: 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.

 

War dieser Artikel hilfreich?
Dislike 0
Views: 573