Frontend-Editing (FEE)

Warnung

Noch im Aufbau!
Bitte die Tickets auf Github beachten!

Die Erweiterung Frontend-Editing (FEE) ermöglicht die Bearbeitung von MetaModels-Daten im Frontend. Das bedeutet, dass Webseitenbesucher neue Datensätze anlegen und bearbeiten können.

Üblicherweise wird die Bearbeitung nicht für alle Webseitenbesucher zugänglich gemacht, sondern nur einer bestimmten Nutzergruppe. Dafür werden die in Contao üblichen Module für den Login und die Zugangsberechtigungen eingesetzt.

Außerdem ist es möglich, an Mitgliedergruppen individuelle Eingabemasken zuzuweisen, um zum Beispiel im Frontend nur bestimmte Felder zur Bearbeitung frei zu geben. Diese Zuweisungen der Bearbeitungsfreigaben erfolgen zurzeit ausschließlich auf Ebene der Mitgliedergruppen.

Im Frontend werden dieselben Eingabewidgets („Formularfelder“) des DC_General wie im Backend ausgegeben. Da im Frontend nicht so viele Restriktionen wie im Backend vorliegen (z.B. MooTools als JavaScript-Framework), ist die Anzeige der Widgets inklusive zugehöriger Picker wie Datum, Farbe oder dem RichTextEditor eine schwierige Aufgabe.

Aus diesem Grund stehen aktuell noch nicht alle Attribute für ein Frontend- Editing zur Verfügung. Der Stand der Freigabe ist im folgenden Ticket auf Github zusammengefasst: FEE Issue #15

Die erste Implementierung des Frontend-Editing wurde über ein Fundraising finanziert. Für den weiteren Ausbau, Bugfixing und neue Funktionen ist die Mitarbeit am Projekt und auch die finanzielle Unterstützung wichtig!

Installation

Das FEE wird über die Paketverwaltung (Composer) von Contao installiert - eine „Nightly-Build-Version“ steht nicht zur Verfügung.

Für die Installation wechselt man in die Paketverwaltung

img_paketverwaltung

In der Suche der Paketverwaltung gibt man „metamodels/contao-frontend-editing“ ein und klickt anschließend auf den Button „Suchen“.

img_paket

Als Suchergebnis sollte sich nun folgende Erweiterung zeigen. Man klickt auf das Icon rechts, um das Paket zur Installation vorzumerken.

img_paketzwei

Als Pakettyp ist „dev-master“ auswählen und über den Button „Paket für die Installation vormerken“ die Installation vorzubereiten.

img_paketvormerken

Zurück in der Liste der Paketverwaltung klickt man auf „Pakete aktualisieren“ und die Erweiterung wird installiert.

img_paketaktualisieren

Einrichtung im Backend

In der folgenden Beschreibung wird davon ausgegangen, dass bereits ein MetaModel „Mitarbeiterliste“ eingerichtet wurde. Es werden daher nur die Änderungen an diesem MetaModel bzw. an den Modul-Einstellungen dargestellt.

Für den Test-Aufbau gibt es zwei Seiten in Contao:

  • eine Listen-Seite, auf der eine Mitarbeiterliste zu sehen sein wird
  • eine Detail-Seite, auf der die Bearbeitung eines Mitarbeiter-Datensatzes stattfindet

img_seitenstruktur

Auf der Listenseite setzt man ein Inhalts-Element vom Typ „Metamodel List“ ein. Dies wurde entsprechend der Anleitung first_index konfiguriert - mit zwei Ergänzungen, die einem die neue Erweiterung ermöglicht:

  • die Frontend-Bearbeitung aktivieren und
  • eine Editor-Seite auswählen.

img_metamodellist

img_metamodellistedit

Auf der Detail-Seite setzt man ein neues Inhalts-Element „Metamodels Frontend Editing“ ein.

img_metamodelfee

In diesem wählt man das MetaModel aus, welches bearbeitet werden soll.

img_metamodelfeeedit

Als letzter Schritt, muss die Eingabemaske, die für das Backend konfiguriert wurde, noch für das Frontend freigeschaltet werden. Dazu öffnet man im Backend die Seite der „Eingabe-/Render-Zuordnungen“ img_dca_combine und wählt in der Spalte „Mitgliedergruppe“ den Eintrag „Anonymous“ (PR #1189 beachten)

img_fee-dca-zuordnung

Damit sind die Einstellungen im Backend abgeschlossen und man kann nun im Frontend die Einstellungen bzw. die Bearbeitung der Mitarbeiter prüfen.

Arbeiten im Frontend

Bei der Liste des MetaModels sind nun zwei neue Möglichkeiten hinzugekommen:

  • einen Datensatz hinzuzufügen und
  • einen Datensatz zu bearbeiten.

Für die Anzeige des Links „Datensatz hinzufügen“ muss im CE-/FE-Modul MM-Liste das Template ce_metamodel_list_edit.html5 ausgewählt werden - die Links „Datensatz bearbeiten“ werden über das Standardtemplate der Liste im Block „action“ hinzugefügt.

img_liste

Die Maske zum Anlegen eines neuen Datensatzes enthält standardmäßig alle Felder des MetaModels. Nach dem Speichern hat man einen Eintrag mehr in der Liste.

img_newfile

Beim Bearbeiten des Datensatzes kann man alle Felder des MetaModels ändern. „Speichern“ bringt einen zurück zur Liste.

img_editfile

Einstellen der Zugangsberechtigung für die Bearbeitung

In den meisten Fällen soll die Bearbeitung der Daten nicht für alle Webseitenbesucher zur Verfügung stehen. Die Detailseite kann über die üblichen Zugangsberechtigungen von Contao geschützt werden und die Bearbeitung nur einer oder mehreren freigegebenen Mitgliedergruppen ermöglicht werden.

Einrichtung unterschiedlicher Eingabemasken für BE/FE

Möchte man für die Bearbeitung im FE nur bestimmte Felder frei geben, so muss hierfür eine separate Eingabemaske erstellt werden.

Die Erstellung der Eingabemaske erfolgt analog der Maske für das Backend. Über die Auswahl bzw. Aktivierung der Attribute werden die Formularfelder für die Bearbeitung definiert.

Die Eingabemaske kann nun über die „Eingabe-/Render-Zuordnungen“ img_dca_combine für das FE ausgewählt werden.

img_fee-dca-zuordnung2

Die Reihenfolge der Zuordnungseinstellung ist wichtig, da diese „von oben nach unten“ abgearbeitet wird. Dabei wird beispielsweise die im Backend für die Benutzergruppe „Administrator“ definierte Eingabemaske als erstes gefunden und entsprechend angezeigt. Für die Mitgliedergruppe „general Members“ wird als erstes die Maske „FEE Eingabe“ gefunden und angezeigt.