MetaModels Backend: Eingabemaske

Aus Contao Community Documentation

Version vom 17. September 2014, 19:44 Uhr von Lucina (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

Allgemeines zur Eingabemaske (fka Paletteneinstellungen)

  1. MetaModels Attribute
  2. MetaModels Ausgabevorgaben
  3. MetaModels Eingabemaske
  4. MetaModels Filter
  5. MetaModels Ansichtseinstellungen

Was ist eigentlich eine Eingabemaske ?

Icons paletteneinstellungen.png

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

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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

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

Backend Liste

Eingabemaske

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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 einen Bereich namens "MetaModel Boilerplate" packen
    • TIP: hat man mehrere MetaModels in einem Bereich der Navigation dann kann die Reihenfolge über das Sorting-Attribut der MetaModels gesteuert werden.
  • Backend-Icon: Optional kann man ein eigenes Icon anzeigen lassen
  • Backend-Beschreibung: Sprache, Labeltext (Name deiner BE Liste), Beschreibungstext (Tooltip)

Panel-Layout

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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

Backend Liste gestalten

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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. Hier folgend 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-Dateien kann die Datei geladen und anschliessend die Option Veröffentlichen angewählt werden. Nützlich ist in diesem Fall auch die Option Labels verbergen.

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

Das Ganze funktioniert selbstredend auch für FE-Ansichten.

Das Beispiel musicbox.css

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:
.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;
}

Backend Formular

Attribute

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

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

Das Backend-Formular

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Und so könnte das Backend-Formular in etwa aussehen. Rot gekennzeichnet die Backend-Klassen, die den Attributen mitgegeben wurden.


Das Backend-Formular mit Legenden

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Das Backend-Formular lässt sich noch weiter organisieren, indem man Eingabefelder, etc. über Legenden gruppiert (siehe nebenstehendes Beispiel).

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Hierzu auf der Attributsübersicht auf Neu klicken.

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Als Typ kann man nun den Typ Legende wählen und gibt anschliessend einen Legenden-Titel ein.

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Die Legenden-Titel können nun per Drag&Drop an die gewünschte Position verschoben werden. Sie können auch jederzeit umbenannt werden.

Einstellungen der Eingabefelder (Attribute)

Alias

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Auswahl (Select)

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Checkbox

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Color

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Datei

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Dezimal

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

GeoProtection

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Longtext

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Standardmäßig stehen drei Richtext-Editoren zur Verfügung: tinyFlash, tinyMCE und tinyNews.
Eigens angepasste RTEs können hier ausgewählt werden, sofern sie auch angelegt wurden, bspw. in einer tinyCustom.php

Numerisch

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Sprachcode

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Tags

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Text

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Timestamp (Datum/Zeit)

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

URL

Fehler beim Erstellen des Vorschaubildes: Datei scheint fehlend zu sein:

Übersetztes Alias

Details folgen

Übersetzte Datei

Details folgen

Übersetzter Longtext

Details folgen

Übersetzte Auswahl

Details folgen

Übersetzte Tags

Details folgen

Übersetzter Text

Details folgen

Ansichten
Meine Werkzeuge

Contao Community Documentation

<Kellner> und einmal Filet?
<backbone87> Nein Olli, nicht Philip!

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge