MetaModels Backend: Eingabemaske: Unterschied zwischen den Versionen

Aus Contao Community Documentation
K (Typo)
 
(37 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
[[Category:MetaModels]]
+
[[Category:MetaModels|M3]]
−
=Allgemeines zu den Paletteneinstellungen=
+
=Allgemeines zur Eingabemaske (fka Paletteneinstellungen)=
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
Zeile 7: Zeile 7:
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
  
−
==Was sind eigentlich Paletteneinstellungen (neu: Eingabe-Masken)?==
+
==Was ist eigentlich eine Eingabemaske ?==
 
[[File:icons_paletteneinstellungen.png|left|32px]]
 
[[File:icons_paletteneinstellungen.png|left|32px]]
−
Mit den Paletteneinstellungen wird im Wesentlichen das Aussehen der Datenerfassung im Backend gesteuert. Es beantwortet die folgenden Fragen:
+
Mit der Eingabemaske wird im Wesentlichen das Aussehen der Datenerfassung im Backend gesteuert. Es beantwortet die folgenden Fragen:
 
* Wo werden die Daten erfasst?
 
* Wo werden die Daten erfasst?
 
* Wie sieht die Übersichtsliste aus?
 
* Wie sieht die Übersichtsliste aus?
Zeile 24: Zeile 24:
  
 
=Backend Liste=
 
=Backend Liste=
−
==Palette==
+
==Eingabemaske==
 
[[File:mm_backend_paletteneinstellungen_palette.png|thumb|400px]]
 
[[File:mm_backend_paletteneinstellungen_palette.png|thumb|400px]]
−
Nachdem man über '''Neue Palette''' einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:
+
Nachdem man über '''Neue Eingabemaske''' einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:
 
* '''Name''': Name der Palette
 
* '''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)
 
* '''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)
Zeile 36: Zeile 36:
 
** 5 Einträge werden als Baumstruktur dargestellt (siehe Seitenstruktur)
 
** 5 Einträge werden als Baumstruktur dargestellt (siehe Seitenstruktur)
 
* '''Sortier-Flag''': diverse Optionen
 
* '''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-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
−
* '''Backend-Icon''': Optional kann man sein eigenes Icon anzeigen lassen
+
** 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)
 
* '''Backend-Beschreibung''': Sprache, Labeltext (Name deiner BE Liste), Beschreibungstext (Tooltip)
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
Zeile 43: Zeile 44:
 
==Panel-Layout==
 
==Panel-Layout==
 
[[File:mm_backend_paletteneinstellungen_panel.png|thumb|400px]]
 
[[File:mm_backend_paletteneinstellungen_panel.png|thumb|400px]]
−
Die Einträge unter dem Panel-Laout bestimmen, ob und wie die einzelnen Funktionen erscheinen.
+
Die Einträge unter dem Panel-Layout bestimmen, ob und wie die einzelnen Funktionen erscheinen.
 +
<div style="clear: both"></div>
 +
 
 +
==Backend Liste gestalten==
 +
[[File:mm_backend_liste_rendereinstellungen.png|thumb|400px]]
 +
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'''<br />
 +
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.
 +
<div style="clear: both"></div>
  
 +
'''Das Beispiel musicbox.css'''
 +
[[File:mm_backend_liste.png|thumb|400px]]
 +
<source lang="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;
 +
}
 +
</source>
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
Zeile 50: Zeile 86:
 
==Attribute==
 
==Attribute==
 
[[File:mm_backend_paletteneinstellungen_liste.png|thumb|400px]]
 
[[File:mm_backend_paletteneinstellungen_liste.png|thumb|400px]]
−
Nachdem man über '''Alle hinzufügen''' alle Attribute hinzugefügt hast, kannt man die Liste per Drag&Drop organisieren. Die Reihenfolge legt fest, in welcher Reihenfolge die Eingabefelder im Erfassungsformular erscheinen.
+
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.
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
Zeile 68: Zeile 104:
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
−
=Paletteneinstellungen=
+
 
 +
==Das Backend-Formular mit Legenden==
 +
[[File:mm_backend_eingabemaske_legenden.png|thumb|400px]]
 +
Das Backend-Formular lässt sich noch weiter organisieren, indem man Eingabefelder, etc. über '''Legenden''' gruppiert (siehe nebenstehendes Beispiel).
 +
<div style="clear: both"></div>
 +
 
 +
[[File:mm_backend_eingabemaske_legende_erfassen1.png|thumb|400px]]
 +
Hierzu auf der Attributsübersicht auf '''Neu''' klicken.
 +
<div style="clear: both"></div>
 +
 
 +
[[File:mm_backend_eingabemaske_legende_erfassen2.png|thumb|400px]]
 +
Als Typ kann man nun den Typ '''Legende''' wählen und gibt anschliessend einen '''Legenden-Titel''' ein.
 +
<div style="clear: both"></div>
 +
 
 +
[[File:mm_backend_eingabemaske_legende_erfassen3.png|thumb|400px]]
 +
Die '''Legenden-Titel''' können nun per Drag&Drop an die gewünschte Position verschoben werden. Sie können auch jederzeit umbenannt werden.
 +
<div style="clear: both"></div>
 +
 
 +
=Einstellungen der Eingabefelder (Attribute)=
  
 
==Alias==
 
==Alias==
Zeile 80: Zeile 134:
 
==Checkbox==
 
==Checkbox==
 
[[File:mm_paletteneinstellungen_checkbox.png|thumb|400px]]
 
[[File:mm_paletteneinstellungen_checkbox.png|thumb|400px]]
 +
<div style="clear: both"></div>
 +
 +
==Color==
 +
[[File:mm_eingabemaske_color.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
Zeile 96: Zeile 154:
 
==Longtext==
 
==Longtext==
 
[[File:mm_paletteneinstellungen_longtext.png|thumb|400px]]
 
[[File:mm_paletteneinstellungen_longtext.png|thumb|400px]]
−
Es stehen 3 Richtext-Editoren zur Verfügung: tinyFlash, tinyMCE und tinyNews.
+
Standardmäßig stehen drei Richtext-Editoren zur Verfügung: tinyFlash, tinyMCE und tinyNews.<br>
 +
Eigens angepasste RTEs können hier ausgewählt werden, sofern sie auch angelegt wurden, bspw. in einer ''tinyCustom.php''
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
Zeile 115: Zeile 174:
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
−
==Timestamp (Datum)==
+
==Timestamp (Datum/Zeit)==
 
[[File:mm_paletteneinstellungen_timestamp.png|thumb|400px]]
 
[[File:mm_paletteneinstellungen_timestamp.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>

Aktuelle Version vom 17. September 2014, 21:44 Uhr

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

Von „https://de.contao.wiki/index.php?title=MetaModels_Backend:_Eingabemaske&oldid=8322“
Ansichten
Meine Werkzeuge

Contao Community Documentation

<TheTril> Stateless Template, Stateless Elements, Stateless Renderer :)
<TheTril> everything is stateles :D
<leo-unglaub> TheTril: genau wie Ed Snowden *g*

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge