Allgemeines zur Eingabemaske (fka Paletteneinstellungen)

Was ist eigentlich eine Eingabemaske ?

Mit der Eingabemaske wird im Wesentlichen das Aussehen der Datenerfassung im Backend gesteuert. Es beantwortet die folgenden Fragen:

Wo werden die Daten erfasst?
Wie sieht die Übersichtsliste aus?
Wie kann ich die Übersichtliste organisieren?
Wie sieht das Erfassungsformular aus?
Wie kann ich das Aussehen des Erfassungsformulars beeinflussen?

Einstieg

Nachdem man über Neue Eingabemaske einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:

Eingabemaske bearbeiten: Erstellen und organisieren der BE Liste
Einstellungen der Eingabemaske bearbeiten: Erstellen und organisieren des BE Formulars

Backend Liste

Eingabemaske

Nachdem man über Neue Eingabemaske einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:

Name: Name der Palette
Panel-Layout: Damit lässt sich die BE Liste organisieren. 4 Werte stehen zur Verfügung: filter, sort, search und limit. Mit Komma oder Semikolon steuert man die Darstellung (siehe nächster Screen)
Integration: Unabhängig, Als Kind-Tabelle
Sortiermodus:
- 0 Datensätze werden nicht sortiert
- 1 Datensätze nach festem Feld sortieren,
- 2 Datensätze nach variablen Feld sortieren,
- 5 Einträge werden als Baumstruktur dargestellt (siehe Seitenstruktur)
Sortier-Flag: diverse Optionen
Backend-Bereich: Hier kann man auswählen, wo in der Backend-Navigation (links) der Eintrag 'Musicbox' erscheinen soll. Neu lässt sich das eigene MetaModel auch in eine Bereich namens "MetaModel Boilerplate" packen
Backend-Icon: Optional kann man sein eigenes Icon anzeigen lassen
Backend-Beschreibung: Sprache, Labeltext (Name deiner BE Liste), Beschreibungstext (Tooltip)

Panel-Layout

Die Einträge unter dem Panel-Layout bestimmen, ob und wie die einzelnen Funktionen erscheinen.

BE-Liste gestalten

Es besteht die Möglichkeit, die BE-Liste etwas user-freundlicher zu gestalten, indem man eine spezifische CSS-Datei einbettet. Mit wenigen CSS-Anweisungen kriegt man recht schnell eine anständige Ansicht hin. Nebenan ein Beispiel.

CSS-Datei laden
Die CSS-Datei kann irgendwo im Verzeichnis tl_files (Contao 2) bzw. files (Contao 3) abgelegt werden. Über Zusätzliche CSS-Datei kann die Datei geladen werden und anschliessend die Option Veröffentlichen anwählen. Optional können die Labels ausgeschaltet werden.

Über die HTML-Source Ansicht der BE-Liste kann man sich die verwendeten CSS-Klassen anzeigen lassen und in der CSS-Datei entsprechend formattieren. Ein Beispiel folgt unten.

Das Beispiel musicbox.css

.item {
	overflow: hidden;
	padding: 10px 0;
}
.item .field {
	margin-bottom: 2px;
}
.item .cover {
	float: left;
	margin-right: 20px;
}
.item .title .value {
	font-size: 13px;
	font-weight: bold;
}
.item .composer .value {
	color: #c00;
}
.item .stoff ul li {
	list-style: none;
	width: 200px;
}
.item .stoff ul {
	float: none;
}

Backend Formular

Attribute

Nachdem man über Alle hinzufügen alle Attribute hinzugefügt hast, kann man die Liste per Drag&Drop organisieren. Die Reihenfolge legt fest, in welcher Reihenfolge die Eingabefelder im Erfassungsformular erscheinen.

Attribut bearbeiten

Jedes Attribut hat gemäss seinem Typ spezifische Einstelloptionen. Was sie jedoch alle gemein haben, sind die so genannten Backend-Classes. Darüber lassen sich die Eingabefelder ein wenig gestalten. Folgende CSS-Klassen stehen zur Verfügung:

w50: Die Breite auf 50% festlegen und nach links floaten.
clr: Alle Floats clearen.
long: Vergrößert das Eingabefeld, sodass es zwei Spalten umfasst.
wizard: Das Eingabefeld kürzen, sodass Platz für einen Wizard ist (z.B. einen Date-Picker).
m12: Dem Element einen oberen Abstand (top-margin) von 12 Pixel geben (für einzelne Checkboxen).