Allgemein

In diesem Dokument erfahren Sie, wie man ein 4ALLPORTAL styled. Das Styling setzt einiges an Basiswissen voraus. So sollten Sie zumindest wissen, was ein Hex Wert (#ff8200) ist und was der Unterschied zwischen einer Vektorbasierten- und einer Pixelgrafik ist.  

Das 4ALLPORTAL hat einen eigenen Stylemanager. Dieser hat die Aufgabe, alles rund um Farben, Themes, Hintergründe oder Icons im 4ALLPORTAL zu verwalten. Sie können sich den Stylemanager als eine Art "Creative Director" vorstellen, der alles Umsetzt was Sie ihm sagen. Wenn Sie es ihm falsch sagen, dann reagiert er nicht oder meckert über die schlechte Kommunikation (wink).

Theming

Die Theming Funktion eröffnet neue Möglichkeiten ein 4ALLPORTAL zu stylen. So können wir beispielsweise einzelnen Rollen eine anderes Aussehen nach dem Login geben oder eine dunkle Benutzeroberfläche implementieren. Wie das ganze funktioniert erfahren Sie in den untenstehenden Punkten. 


Datenstruktur Allgemein

Die Ordnerstruktur muss in der folgenden Reihenfolge in dem "custom" Ordner aufgebaut sein damit das neue Styling im System erkannt wird: 

custom/global/styles/"theme_name"/theme.4aptheme
custom/global/styles_pre_login/"theme_name"/"icon_library"/"icon_name"
custom/modules/"module_name"/styles/"theme_name"/"ICON-NAME"/"icon_library"/"icon_name"
CODE

Wenn Sie den "default" überschreiben möchten, können Sie in dem "custom" Ordner die Dateien mit dem gleichen Namen anlegen und einzelne Werte verändern.

Ab der Version 3.2 haben wir die Möglichkeit, Icon Librarys aufzubauen. Dies bedeutet, Sie können eigene Bibliotheken an Icons importieren und sich an dieser einfach bedienen. 



Login Bereich Stylen

In dem Login Bereich können wir die folgenden Punkte im Produktstandard stylen:

• Hintergrundbild(.png)

• Logo (.svg, .png, 4apicon)

• Akzentfarbe (Hex)

• Schriftfarbe auf Akzentfarbe (Hex)


Sie finden diese Einstellung unter der folgenden URL: https://DEINE_URL/?module=admin&group=default&snap_in=theme&sub_group=root 

oder Sie navigieren im 4ALLPORTAL zu: Allgemeine Systemkonfigurationen → Systemeinstellungen → Darstellungsoptionen → Theme → Login Darstellung



Alle weiteren Veränderungen sind nicht im Produktstandard vorgesehen und bedarf einer gesonderten Schätzung über einen Feature Request)

Anwendungsdarstellung

In der Anwendung nach dem Login können wir die folgenden Punkte im Produktstandard stylen:

• Logo Anwendung (.svg, .png, 4apicon)

• E-Mail Logo (.png)

• Hauptfarbe/Akzentfarbe (Hex)

• Schriftfarbe auf der Hauptfarbe (Hex)

• Hauptfarbe-Hell (Hex)

• Primäre Schriftfarbe (Hex)

• Farbe Kopfbereich (Hex)

• Schriftfarbe im Kopfbereich (Hex)



E-Mail Benachrichtigungen

Durch das Hochladen von einem individuellem "mail_logo", wird das 4ALLPORTAL-Logo aus dem Produktstandard durch das individuelle Logo für jede E-Mail Benachrichtigung ersetzt. Das gleiche Verhalten passiert auch bei den verwendeten Farben für E-Mail Benachrichtigungen. Die Farben für Buttons in den Mails aus dem 4ALLPORTAL werden durch die individuell definierte Hauptfarbe ersetzt. 
Falls Sie E-Mail Templates anpassen möchten, sollten Sie wie folgt vorgehen:

Beispiel

Legen Sie zu erstes die folgende Struktur an: 

custom/modules/file/templates/resourcen/mail
CODE


In dem Mail Ordner legen Sie eine HTML Datei an. Diese Datei sollte der folgenden Syntax folgen:

name.language_territory.html => beispielEticketMail.de_DE.html
CODE


Haben Sie die gewünschten Änderungen durchgeführt, müssen Sie Ihr Template jetzt mit einer Konfigurationsdatei am 4ALLPORTAL registrieren.


Hierzu sind folgende Schritte durchzuführen:


Navigieren in das zuvor angelegte Verzeichnis

custom/modules/file/templates
CODE


Erstellen einer Datei mit dem folgenden Namen

beispielEticketMail.4aptpl
CODE

Weitere Informationen zu der .4aptpl Datei


Die .4aptpl Dateien sagen dem 4ALLPORTAL, dass es ein neues E-Mail Template für das eTicket gibt mit dem Namen "beispielEticketMail.html"


In die erstellte Datei schreiben Sie folgendes rein, um die Mail zu registrieren

<?xml version="1.0" encoding="UTF-8"?>
<template version="1">
  <default_lang>de_DE</default_lang>

  <file lang="de_DE">mail/beispielEticketMail.de_DE.html</file>
</template>
XML


Um noch weitere Konfigurationen vornehmen zu können, welche sich auf die "create" Ansicht auswirken, ist wie solltest vorzugehen:


In das angelegte Verzeichnis navigieren

custom/modules/file/templates
CODE


Erstellen einer Datei mit dem folgenden Namen

Hier haben Sie die Möglichkeit, gewisse Dinge zu konfigurieren. Den ganzen Umfang der Konfigurationen findest Sie in der technischen Dokumentation "Sphinx".


Hiermit ist das neue E-Mail Template erfolgreich angelegt (thumbs up)



PDF-Übersicht

Mit dem Feature PDF-Übersicht kann das 4ALLPORTAL Vorschauen von gewählten Assets und deren Metadaten, in einem vordefinierten Seiten-Template als PDF exportieren. Der 4ALLPORTAL Produktstandard bietet drei vordefinierte Seiten-Templates an. Die keine-, mittlere- und große PDF-Übersicht. Beim Erstellen einer PDF-Übersicht, weisst das das 4ALLPORTAL seine "Template Engine" an, das Seiten-Template mit den entsprechenden Vorschaubildern und Metadateninhalten zu erstellen und anschließend eine PDF zum Download auszugeben. Die Template Engine bezieht die Metadaten aus der CoreEngine. Damit können i.d.R. alle Metadatenfelder- und Informationen aus der CoreEngine, modulunabhängig, zu Erstellung einer PDF-Übersicht genutzt werden. Das Seiten-Template basiert auf einer Microsoft Word (.docx) Datei. 


Sie müssten jedoch auf einige Besonderheiten achten und sich die folgenden Fragen vorab stellen:

  • Welche Typenklassifizierungen haben die Metadatenfelder?
    Zum Beispiel: Text- oder List-Felder
     
  • Enthalten Felder ValueOptions (vordefinierte Metadatenwerte)?

Abhängig der Typenklassifizierung muss die Anweisung für die Template Engine entsprechend angepasst werden. 


Als Tool für die Erstellung und Konfiguration von Seiten-Templates ist Microsoft Word (2012, 2016, 2019 oder neuer) zu verwenden. 


Um ein neues Template einzuspielen, gehen Sie wie folgt vor:


Erstellen Sie das folgende Verzeichnis.

custom/modules/file/templates/resourcen/pdf
CODE


Legen Sie dort Ihr neues Template ab.

Navigieren Sie jetzt in das folgende Verzeichnis.

custom/modules/file/templates
CODE


Auch hier müssen Sie dem 4ALLPORTAL mitteilen, dass Sie ein neues Template eingespielt haben. Dies machen Sie am besten wie folgt.

Legen Sie in diesem Verzeichnis eine Datei in der folgenden Syntax an: 

template_name.4aptpl
XML

In diese Datei ist die folgende XML Anweisung einzutragen. Hiermit teilen wir dem System mit, dass dort ein neues Template liegt.

<?xml version="1.0" encoding="UTF-8"?>
<template version="1">
  <default_lang>de_DE</default_lang>
  
  <file lang="de_DE">pdf/template_name_de.docx</file>
  <file lang="en_GB">pdf/template_name_en.docx</file>
  
  <output_format>PDF</output_format>
  <engine>DOCX_V2</engine>
</template>
XML


Um die Eigenschaften des Templates im System zu beeinflussen, müssen wir noch eine weitere Datei anlegen. Diese Datei sollte den folgenden Namen tragen.

template_name.4aptplcond
XML


Öffnen Sie diese Datei mit Ihrem bevorzugten Editor und schreiben folgende XML Anweisung hinein.

<?xml version="1.0" encoding="UTF-8"?>
<template_operation version="1">
	<label>L-FILE-CO-OVERVIEW_LARGE</label>
	<info>L-FILE-CO-OVERVIEW_LARGE-INFO</info>
	<icon>FILE-CO-OVERVIEW_LARGE</icon>
	<min_beans>1</min_beans>
	<order>3</order>
	<group>Templates</group>
	<group_label>L-TG-TEMPLATES</group_label>
	<group_info>L-TG-TEMPLATES-INFO</group_info>

	<supports_multiple>true</supports_multiple>
	<!--Hier sollte auf die Datei template_name.4aptpl verwiesen werden  -->
	<template>template_name</template>
	<output_format>PDF</output_format>
	<output_name>PDF Asset Overview Large</output_name>

	<views>
		<view visible="true">main</view>
		<view visible="true">detail</view>
	</views>

	<conditions>
		<condition>
			<sql>
				'{getFeature("file.pdf_export")}' = 'true'
			</sql>
		</condition>
	</conditions>

	<parameter></parameter>
</template_operation>
XML

Einige Anweisungen für den PDF-Druck, welche man öfters benötigt

Prüfen, ob das Feld einen Wert hat
Falls ja iteriere die Liste und gebe alle Elemente aus der Liste aus

{if feldname}{feldname}{/if}
CODE


Prüfen, ob das Feld einen Wert hat
Falls ja iteriere die Liste und gebe alle Elemente aus der Liste aus und trenne diese mit einem ","

{if feldname}{feldname.join(",")}{/if}
CODE



Icons ändern

Da wir ab der Version 3.2 über die Icon Bibliotheken arbeiten, verwenden wir sogenannte "Redirects" in unserem .4apicon Format. Ein typischer Redirect sieht wie folgt aus. Gehen wir in diesem Fall von dem FILE-CO-READ.4apicon Icon aus.


Dieses Icon hat folgenden Inhalt.

<svg>
	<redirect>icon_library/eye</redirect>
</svg>
XML

Das Icon FILE-CO-READ.4apicon nutzt ein bereits vorhandenes Icon in der Icon Bibliothek. Auf diese Art und Weise haben wir die Möglichkeit schnell, Systemweit Icons an mehreren Stellen gleichzeitig zu ersetzen.



Lizenzmodell


FEATURE ODER APP IST AUFPREISPFLICHTIG

FEATURE ODER APP ENTHÄLT KOSTEN FÜR DIE INITIALE KONFIGURATION