Inhaltselemente/Module für die Frontendausgabe¶
Nachdem alle Komponenten für die Dateneingabe konfiguriert sind, kann die Datenausgabe bearbeitet werden. Für die Datenausgabe stehen verschiedene Möglichkeiten zur Verfügung - in dem Beispiel soll die Ausgabe über das Artikel-Inhaltselement „MetaModel-Liste“ erfolgen.
Als Vorbereitung für die Ausgabe muss eine entsprechende Seite in Contao angelegt sein mit einem Artikel, der das Inhaltelement aufnimmt. Ein neues Inhaltselement wird angelegt und folgende Einstellungen aktiviert (siehe Screenshot):
- Elementtyp: MetaModel-Liste
- Sortieren nach: Name
- Anzuwendende Filtereinstellungen: Veröffentlicht
- Anzuwendende Render-Einstellungen: FE Liste
Nach „Speichern und schließen“ steht das Inhaltselement zur Verfügung und die Anzeige kann im Frontend geprüft werden.
Die Anzeige sollte nun den Satz „Ihre Suche lieferte keine passenden Ergebnisse.“ hervorbringen, da noch keine Daten eingeben wurden.
Für den Test der Anzeige ist es notwendig, einige Datensätze in der Mitarbeiterliste
anzulegen. Dazu klickt man in der linken Navigation des Backends unter „MetaModels“
auf das Icon „ Mitarbeiterliste“ und anschließend auf das Icon
„
Neuer Datensatz“.
Es öffnet sich die Eingabemaske mit den vorgegebenen Feldern (Attributen), welche mit den ersten Daten gefüllt werden kann (siehe Screenshot).
Nach „Speichern und schließen“ ist der Datensatz mit den aktivierten Attributen der Render-Einstellung „BE Liste“ (Name und Vorname) zu sehen (siehe Screenshot).
Der Datensatz kann über das Stift-Icon wieder bearbeitet werden und über das „Auge“ wird der Status „Veröffentlicht“ gewechselt (alternativ zur Checkbox der Eingabemaske).
Die Ausgabe im Frontend sollte nun etwa wie folgt aussehen (Screenshot).
Spielt man einige Testdaten in die Datenbank - oder gibt diese manuell ein - sieht die Mitarbeiterliste im Backend in etwa so wie in dem Screenshot aus
und wie folgt im Frontend
Für die Ausgabe im Frontend werden die Attribute über das Standard-Template in einzelne HTML-DIV-Container inklusive spezifischer CSS-Klassen ausgegeben. Eine Formatierung kann entweder über ein CSS erfolgen oder über eine Anpassung des Templates, so dass hier die Ausgabe als HTML-Tabelle erfolgt.
Mit einige CSS-Angaben wie z.B. die folgenden
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .ce_metamodel_content .item {
display: table;
width: 100%;
}
.ce_metamodel_content .item.even {
background-color: #f4f2f0;
border-bottom: 1px solid #d4cbc5;
border-collapse: collapse;
}
.ce_metamodel_content .item.odd {
background-color: #f6f6f6;
border-bottom: 1px solid #d4cbc5;
border-collapse: collapse;
}
.ce_metamodel_content .item .field {
display: table-cell;
}
.ce_metamodel_content .item .field.name {
width: 20%;
}
.ce_metamodel_content .item .field.vorname {
width: 20%;
}
.ce_metamodel_content .item .field.email {
width: 40%;
}
.ce_metamodel_content .item .field.abteilung {
width: 20%;
}
|
sieht die Ausgabe schon besser aus - siehe Screenshot