f:be-ViewHelpers

f:be.container

Parameter

  • pageTitle: BE-Module werden in einem Frame dargestellt, von daher macht ein Seitentitel wenig sind. Einfach leer lassen
  • enableJumpToUrl (Standard: aktiviert): Lasst diesen Parameter eingeschaltet, wenn Ihr den ActionMenu-ViewHelper verwenden wollt, da dieser die entsprechenden JavaScripte dazu liefert.
  • enableClickMenu (Standard: aktiviert): Wenn aktiviert, wird das JavaScript für die Contextmenüs eingebunden
  • loadPrototype (Standard: aktiviert): Wenn aktiviert, wird das Prototype-JS-Framework eingebunden
  • loadScriptaculous (Standard: deaktiviert): Wenn aktiviert, wird das Zusatzpaket für Prototype eingebunden
  • scriptaculousModule (Standard: aktiviert): Ihr könnt hier noch weitere Module für das Scriptaculouspaket aktivieren
  • loadExtJs (Standard: deaktiviert): Wenn aktiviert, wird das ExtJS-Framework eingebunden
  • loadExtJsTheme (Standard: aktiviert):Wenn aktiviert, werden Vorgaben für die Grafischen Elemente eingebunden.
  • extJsAdapter: Statt dem Standard ext-base kann hier ein anderer Adapter angegeben werden.
  • enableExtJsDebug (Standard: deaktiviert): Sollte nur aktiviert werden, wenn man auf Basis von ExtJS entwickelt.
  • addCssFile: Eine CSS-Datei einbinden
  • addJsFile: Eine JavaScript-Datei einbinden

Zu allererst solltet Ihr Euch eine grundsätzliche Frage stellen: Willst Du etwas entwickeln ganz im Stile von TYPO3 oder willst Du etwas völlig Eigenes bauen. Wenn Ihr Euch für etwas völlig Eigenes entscheidet, dann braucht Ihr diesen ViewHelper überhaupt nicht. Bindet in diesem Falle Eure benötigten StyleSheets und JavaScripte selbst ein.

Wenn Ihr allerdings etwas bauen wollt, dass sich an das TYPO3-Design anlehnt und möglichst kompatibel ist, dann solltet Ihr diesen ViewHelper auf jeden Fall verwendet. Das was damals zu Zeiten von MediumDoc und Co. eingebunden wurde, benötigt heute nur noch diesen Zweizeile mit knapp 10 Parametern.

Beispiel

f:be.pageInfo

Dieser ViewHelper benötigt keine Parameter. Er zeigt einfach nur das Icon der aktuellen Seite an mit der Information, um welche pid es sich dabei handelt.

Beispiel

<f:be.pageInfo />

f:be.pagePath

Dieser ViewHelper benötigt keine Parameter. Er zeigt den Pfad zur aktuell gewählten Seite an. Diese Information ist vor allem bei sehr großen Webseiten nützlich, wenn Seiten eher über eine Suche gefunden werden. Dann ist es schon mal schwierig herauszufinden, wo sich diese Seite im Wust der ganzen Navigationen und Unterseiten im Seitenbaum überhaupt befindet.

f:be.tableList

Parameter

  • tableName (Pflichtangabe): Der Name der Tabelle
  • fieldList: Welche Spalten der Tabelle sollen angezeigt werden (Arraynotation)
  • storagePid: Die Daten welcher Seite sollen angezeigt werden? Wenn nichts anderen angegeben wurde, werden die Datensätze der Seite angezeigt, die über persistence.storagePid angegeben wurde.
  • levels (Standard: nur die Seite aus storagePid): Falls die Seite aus storagePid noch Unterordner enthält, könnt Ihr hier angeben wie viele Ebenen tiefer nach weiteren Datensätzen gesucht werden soll.
  • filter: Gebt hier ein Suchwort ein, nach dem Eure Datensätze gefiltert werden sollen.
  • recordsPerPage (Standard: Angabe aus TCA, sonst 100): Wie viele Datensätze dürfen maximal auf einer Seite angezeigt werden.
  • sortField: Nach welchem Feld sollen die gefundenen Datensätze sortiert werden
  • sortDescending (Standard: deaktiviert): Wenn aktiviert, dann werden die Datensätze rückwärts sortiert.
  • readOnly (Standard: deaktiviert): Wenn aktiviert, dann werden die Bearbeitungssymbole nicht mehr angezeigt.
  • enableClickMenu (Standard: aktiviert): Wenn aktiviert, dann kann das Contextmenü verwendet werden
  • clickTitleMode: Auswahl von "edit", "info" und "show". Falls Ihr show auswählt, dann klappt das nur bei der Tabelle pages und tt_content. Normalerweise müsst Ihr immer erst über das Kontextmenü oder über ein anderes Modul in diese Bereich klicken. Nun reicht ein Klick auf den Titel des Datensatzes.
  • alternateBackgroundColors (Standard: deaktiviert): Wenn aktiviert, wechseln sich die Hintergrundfarben je Datenzeile ab.

Sehr geiles Teil. Was wir aus dem Modul Web->Liste kennen können wir nun selbst verwenden und super einfach konfigurieren, wie die folgenden Beispiele zeigen.

Minimalistisches Beispiel

Dieses Beispiel zeigt die Tabelle tt_content mit den beiden Feldern header und bodytext. Die Tabelle wird nur dann angezeigt wenn sich auf der Seite, die durch storagePid angegeben wurde auch tatsächlich Datensätze dieser Tabelle befinden. Alle Backendmodule, die zumindest über den extension_builder erzeugt wurden bringen ein Extensiontemplete mit, das auf der Rootseite eingebunden werden sollte. Über den Konstanteneditor kann nun eine Seiten-UID eingetragen werden, die als Fallback dienst, falls wie hier in unserem Beispiel keine storagePid angegeben worden ist.

<f:be.tableList tableName="tt_content" fieldList="{0: 'header', 1: 'bodytext'}" />

Beispiel: Maximale Datensatzanzahl

Obwohl wir hier den Parameter recordsPerPage nicht angegeben haben, werden uns innerhalb des Introductionpackage nur 100 Datensätz auf der ersten Seite angezeigt von etwas über 150. Denn wenn dieser Parameter nicht angegeben wird, gilt erstens der Wert aus dem TCA ($TCA[TabellenName]['interface']['maxSingleDBListItems']) und wenn dieser nicht angegeben ist 100. Mit Hilfe von recordsPerPage ist es auch möglich mehr als 100 Datensätze anzeigen zu lassen.

<f:be.tableList tableName="tt_content" fieldList="{0: 'header', 1: 'bodytext'}" storagePid="1" levels="5" />

Beispiel: Datensatz direkt anzeigen

Normalerweise muss man immer über das Modul Web->Anzeigen oder über das Kontextmenü navigieren, um eine erste Preview seines gewählten Datensatzes zu erhalten. Viel einfacher geht es, wenn man den Titel eines Datensatzes (Der Wert aus der ersten Spalte) mit dieser Möglichkeit verlinkt. Hierfür gibt es den Parameter clickTitleMode, den Ihr auf "show" setzen müsst. Zusätzlich habe ich in dieses Beispiel nach einen Wechselnden Hintergrund je Datenzeile implementiert.

<f:be.tableList tableName="tt_content" fieldList="{0: 'header', 1: 'bodytext'}" storagePid="1" levels="5" alternateBackgroundColors="TRUE" clickTitleMode="show" />