MetaModels Backend: Eingabemaske: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(→‎Attribute)
K (Typo)
 
(63 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{stub}}
+
[[Category:MetaModels|M3]]
−
[[Category:MetaModels]]
+
=Allgemeines zur Eingabemaske (fka Paletteneinstellungen)=
−
 
+
−
=Allgemeines zu den Paletteneinstellungen=
+
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
−
# [[MetaModels_Backend:_Paletteneinstellungen| MetaModels Paletteneinstellungen]]
+
# [[MetaModels_Backend:_Eingabemaske| MetaModels Eingabemaske]]
 
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
 
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
  
−
==Was sind eigentlich Paletteneinstellungen?==
+
==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 20: Zeile 18:
 
=Einstieg=
 
=Einstieg=
 
[[File:mm_backend_paletteneinstellungen.png|thumb|400px]]
 
[[File:mm_backend_paletteneinstellungen.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:
−
# Palette bearbeiten: Erstellen und organisieren der BE Liste
+
# Eingabemaske bearbeiten: Erstellen und organisieren der BE Liste
−
# Paletteneinstellungen bearbeiten: Erstellen und organisieren des BE Formulars
+
# Einstellungen der Eingabemaske bearbeiten: Erstellen und organisieren des BE Formulars
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
 
=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)
−
* '''Integration''': Als Einzeltabelle, Als Kindtabelle
+
* '''Integration''': Unabhängig, Als Kind-Tabelle
 
* '''Sortiermodus''':  
 
* '''Sortiermodus''':  
−
** 0 Datensätze unsortiert darstellen,
+
** 0 Datensätze werden nicht sortiert
−
** 1 Datensätze nach bestimmtem Feld sortiert darstellen,  
+
** 1 Datensätze nach festem Feld sortieren,  
−
** 2 Datensätze nach wählbarem Feld sortiert darstellen,  
+
** 2 Datensätze nach variablen Feld sortieren,  
−
** 5 Baumdarstellung (wie Seitenstruktur)
+
** 5 Einträge werden als Baumstruktur dargestellt (siehe Seitenstruktur)
−
* '''Sortierung''': Aufsteigend, Absteigend
+
* '''Sortier-Flag''': diverse Optionen
−
* '''Backend-Bereich''': Hier kann man auswählen, wo in der Backend-Navigation (links) der Eintrag 'MyMusic' erscheinen soll
+
* '''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-Beschreibung''': Sprache, Menutext (Name deiner BE Liste), Beschreibung (Tooltip)
+
* '''Backend-Icon''': Optional kann man ein eigenes Icon anzeigen lassen
 +
* '''Backend-Beschreibung''': Sprache, Labeltext (Name deiner BE Liste), Beschreibungstext (Tooltip)
 +
<div style="clear: both"></div>
  
 
==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 51: 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>
  
 
==Attribut bearbeiten==
 
==Attribut bearbeiten==
−
[[File:mm_backend_paletteneinstellungen_attribut.png|thumb|365px]]
+
[[File:mm_backend_paletteneinstellungen_attribut.png|thumb|400px]]
 
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:
 
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.
 
* '''w50''': Die Breite auf 50% festlegen und nach links floaten.
Zeile 65: Zeile 100:
  
 
==Das Backend-Formular==
 
==Das Backend-Formular==
−
[[File:mm_backend_paletteneinstellungen_formular.png|thumb|365px]]
+
[[File:mm_backend_paletteneinstellungen_formular.png|thumb|400px]]
 
Und so könnte das Backend-Formular in etwa aussehen. Rot gekennzeichnet die Backend-Klassen, die den Attributen mitgegeben wurden.
 
Und so könnte das Backend-Formular in etwa aussehen. Rot gekennzeichnet die Backend-Klassen, die den Attributen mitgegeben wurden.
 
<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==
−
[[File:mm_paletteneinstellungen_alias.png|thumb|365px]]
+
[[File:mm_paletteneinstellungen_alias.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
 
==Auswahl (Select)==
 
==Auswahl (Select)==
−
[[File:mm_paletteneinstellungen_select.png|thumb|365px]]
+
[[File:mm_paletteneinstellungen_select.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
 
==Checkbox==
 
==Checkbox==
−
Details folgen
+
[[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>
  
 
==Datei==
 
==Datei==
−
Details folgen
+
[[File:mm_paletteneinstellungen_file.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==Dezimal==
 
==Dezimal==
−
Details folgen
+
[[File:mm_paletteneinstellungen_decimal.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==GeoProtection==
 
==GeoProtection==
−
Details folgen
+
[[File:mm_paletteneinstellungen_geoprotection.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==Longtext==
 
==Longtext==
−
[[File:mm_paletteneinstellungen_longtext.png|thumb|365px]]
+
[[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>
  
 
==Numerisch==
 
==Numerisch==
−
Details folgen
+
[[File:mm_paletteneinstellungen_numeric.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==Sprachcode==
 
==Sprachcode==
−
Details folgen
+
[[File:mm_paletteneinstellungen_sprachcode.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==Tags==
 
==Tags==
−
Details folgen
+
[[File:mm_paletteneinstellungen_tags.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
 
==Text==
 
==Text==
−
Details folgen
+
[[File:mm_paletteneinstellungen_text.png|thumb|400px]]
 +
<div style="clear: both"></div>
  
−
==Timestamp (Datum)==
+
==Timestamp (Datum/Zeit)==
−
[[File:mm_paletteneinstellungen_timestamp.png|thumb|365px]]
+
[[File:mm_paletteneinstellungen_timestamp.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
  
 
==URL==
 
==URL==
−
[[File:mm_paletteneinstellungen_url.png|thumb|365px]]
+
[[File:mm_paletteneinstellungen_url.png|thumb|400px]]
 
<div style="clear: both"></div>
 
<div style="clear: both"></div>
−
 
−
==Timestamp (Datum)==
 
−
Details folgen
 
−
 
−
==URL==
 
−
Details folgen
 
  
 
==Übersetztes Alias==
 
==Übersetztes Alias==

Aktuelle Version vom 17. September 2014, 19: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

Mm backend paletteneinstellungen.png

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

Mm backend paletteneinstellungen palette.png

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

Mm backend paletteneinstellungen panel.png

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

Backend Liste gestalten

Mm backend liste rendereinstellungen.png

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

Mm backend liste.png 
.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

Mm backend paletteneinstellungen liste.png

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

Mm backend paletteneinstellungen attribut.png

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

Mm backend paletteneinstellungen formular.png

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

Mm backend eingabemaske legenden.png

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

Mm backend eingabemaske legende erfassen1.png

Hierzu auf der Attributsübersicht auf Neu klicken.

Mm backend eingabemaske legende erfassen2.png

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

Mm backend eingabemaske legende erfassen3.png

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

Mm paletteneinstellungen alias.png

Auswahl (Select)

Mm paletteneinstellungen select.png

Checkbox

Mm paletteneinstellungen checkbox.png

Color

Mm eingabemaske color.png

Datei

Mm paletteneinstellungen file.png

Dezimal

Mm paletteneinstellungen decimal.png

GeoProtection

Mm paletteneinstellungen geoprotection.png

Longtext

Mm paletteneinstellungen longtext.png

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

Mm paletteneinstellungen numeric.png

Sprachcode

Mm paletteneinstellungen sprachcode.png

Tags

Mm paletteneinstellungen tags.png

Text

Mm paletteneinstellungen text.png

Timestamp (Datum/Zeit)

Mm paletteneinstellungen timestamp.png

URL

Mm paletteneinstellungen url.png

Ü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.contaowiki.org/index.php?title=MetaModels_Backend:_Eingabemaske&oldid=8322“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich brauch nen Bier, es ist zwar noch nicht nach 4, aber es ist nach Oli.

Yanick Witschi
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge