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

img_contentelements_01

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 „img_metamodels Mitarbeiterliste“ und anschließend auf das Icon „img_new Neuer Datensatz“.

Es öffnet sich die Eingabemaske mit den vorgegebenen Feldern (Attributen), welche mit den ersten Daten gefüllt werden kann (siehe Screenshot).

img_contentelements_02

Nach „Speichern und schließen“ ist der Datensatz mit den aktivierten Attributen der Render-Einstellung „BE Liste“ (Name und Vorname) zu sehen (siehe Screenshot).

img_contentelements_03

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

img_contentelements_04

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

img_contentelements_05

und wie folgt im Frontend

img_contentelements_06

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

img_contentelements_07