PixelConsult - Full Service Internetagentur Dortmund

DCE Tutorial

Tabs

Auf den einzelnen Tabs lassen sich die Eingabe-Elemente für das Backend definieren, die Vorlage für das Frontend festlegen und einige weitere Einstellungen vornehmen.

Tab Allgemein

Auf dem Tab Allgemein wird unter "Titel" der Name des DCEs festgelegt, unter dem es später im Backend unter den Inhaltselementen  zu finden ist. 

Unter "Identifier" kann, muss aber nicht, die eindeutige Identifizierung des DCEs verändert werden. Diese ist standardmäßig "dceuidX" und wird in älteren Typo3s in der automatisch angelegten Klasse "frame-type-dce_dceuidX", die um Elemente gelegt wird, verwendet.

Mit Inaktiv lässt sich festlegen, ob das DCE im Backend überhaupt eingesetzt werden darf. Wenn man dieses Auswahlfeld wählt, dann werden alle Instanzen dieses DCEs als ungültig angezeigt.

PixelConsult - Full Service Internetagentur Dortmund

Eingabefelder

Unter "Felder" lässt sich festlegen, welche Eingabefelder dem Redakteur im Backend angezeigt werden und wie diese aussehen sollen. Wird ein neues Feld erzeugt, so müssen zunächst zwei Felder ausgefüllt werden.

Das erste bestimmt den "Titel dieses Feldes", der dem Redakteur im Backend zu dem Feld angezeigt wird. Im zweiten wird eine, in diesem DCE eindeutige, "Variable" angegeben. Diese wird dazu verwendet, um im Template die Stelle anzugeben, an der die Eingaben des Feldes verwendet werden sollen.

Das Feld kann drei unterschiedliche Typen besitzen: Element, Reiter (Tab) oder Abschnitt (Sektion).

PixelConsult - Full Service Internetagentur Dortmund
Element

Als Vorauswal hat ein Feld immer den Typ "Element". Ein Element ist eine bestimmte Form eines Eingabefelds im Backend. Mit Hilfe der "Konfiguration" wird das Aussehen des Eingabefelds bestimmt. Mit Hilfe von "Binde Feldwert an TCA-Spalte" ist es möglich die Eingaben aus der DCE-Instanz in der Datenbank direkt unter "tt_content" zu speichern. Dabei kann man ein schon bestehendes Feld überschreiben, oder sich direkt selbst eine neue eigene Spalte erzeugen lassen.

Konfiguration

PixelConsult - Full Service Internetagentur Dortmund
Tab

Ein "Tab" erzeugt bei der Dateneingabe im Backend einen neuen Reiter. Alle Elemente oder Sektionen, die hier unterhalb eines Tabs angeordnet sind werden im Backend auf diesem Tab dargestellt. 

Wenn nur ein Tab vorhanden ist, oder sich keine Elemente auf einem Tab befinden, wird dieses im Backend nicht angezeigt.

PixelConsult - Full Service Internetagentur Dortmund
Sektion

Eine "Sektion" besteht aus einer Gruppe von Eingabe-Elementen. 

Diese kann im Backend vom Redakteur beliebig häufig verwendet werden und wir innerhalb einer einzigen DCE-Instanz gespeichert.

PixelConsult - Full Service Internetagentur Dortmund

Tab Template

Auf dem Tab "Template" wird die Darstellung der Eingabe-Felder im Frontend definiert. Der Code besteht aus Fluid und HTML.

Das Template kann hier einerseits in das Textfeld direkt eingegeben werden und andererseits auch durch eine Datei geladen werden. Dazu wird der Template-Typ von "Inline" auf "Datei" geändert und dann der Pfad angegeben.

PixelConsult - Full Service Internetagentur Dortmund

Tab DCE-Container

Mit Hilfe des DCE-Containers werden alle Instanzen dieses DCEs, die direkt nacheinander im Backend eingefügt werden, in einen Container gelegt.

In diesem Template kann ein Rahmen definiert werden, der um die Instanzen gelget wird. Wenn jedoch eine Instanz eines anderen DCEs eingefügt wird, so wird der Container geschlossen. Wird danach wieder eine Instanz des Container-DCEs eingefügt, so wird ein neuer Container eröffnet.

Das Limit gibt an, wie viele Objekte sich in einem Container befinden dürfen. Ein Limit von "0" bedeutet unendlich viele Objekte. Bei einem Limit von zum Beispiel "5" würde nach fünf Objekten der Container geschlossen und für das sechste Objekt ein neuer Container eröffnet. Außerdem lässt sich ein neuer Container eröffnen, indem bei der Eingabe eines neuen Objektes der Haken bei "Neuen DCE-Container bilden" gesetzt wird.

PixelConsult - Full Service Internetagentur Dortmund

Tab Backend-Template

Das "Backend Template" beschreibt, wie gespeicherte Instanzen eines DCEs im Backend aussehen. Dazu ist initial der einfache Modus gewählt. Hier wird nur der Titel des DCEs und die eventuelle Containerfarbe angezeigt. Alle anderen Inhaltselemente können per Hand hinzugefügt werden.

PixelConsult - Full Service Internetagentur Dortmund

Wird die einfache Ansicht deaktiviert, kann nun ein Fluid-Template für die Backend Ansicht definiert werden. 

In der Sektion "header" wird festgelegt, wie der Name der Instanz lautet und in "bodytext" können alle anderen Inhaltselemente angegeben werden.

Konfiguration

PixelConsult - Full Service Internetagentur Dortmund

Tab Icon & Wizard

Auf diesem Tab kann das Icon ausgewählt werden, mit dem das DCE im Backend angezeigt werden soll.

Außerdem kann man hier auch bestimmen, ob das DCE überhaupt angezeigt werden soll, wenn man zum Beispiel verhindern will, das ein Element vom Redaktuer eingebunden werden kann.

Zusätzlich kann die Wizard Kategorie und diedortige Beschreibung bestimmt werden.

PixelConsult - Full Service Internetagentur Dortmund

Tab Detailseite

Auf der Detailseite kann ein Fluid-Template angegeben werden, welches zunächst verborgen ist und mit Hilfe eines Buttons eingeblendet werden kann.

Konfiguration

PixelConsult - Full Service Internetagentur Dortmund

Tab Sonstiges

Auf dem Tab "Sonstiges" können die Caching Eigenschaften verändert werden.

Außerdem kann unter "Flexform Label" eingestellt werden, welcher Text über den eigenen Tabs oder Eingabefeldern angezeigt wird. Dieser ist standartmäßig "Inhalte".

Unter den nächsten beiden Punkten kann eingestellt werden, welche typischen tt_conent-Eigenschaften angezeigt werden sollen, wie zum Beispiel die Tabs "Zugriff" oder "Medien" und die Auswahlfelder "Sprache", "Sichtbar" und so weiter.

PixelConsult - Full Service Internetagentur Dortmund

Konfiguration

Mit Hilfe der Konfiguration lässt sich bestimmen, wie ein Eingabe-Element im Backend aussehen soll. Es gibt eine Reihe von Standard-Vorgaben, die direkt aus dem Drop-Down Feld "Konfiguration" ausgewählt werden können. Diese können entweder so gelassen, oder noch angepasst werden.

Wir aus dem Feld der Konfiguration nichts ausgewält, so wird folgendes gezeigt:

  1. <config>
  2.     <type>input</type>
  3. </config>

Diese Eingabe erzeugt ein einfaches leeres Eingabefeld, ohne jegliche Vorgaben.

TYPE: input

Simple input field

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>input</type>
  3.     <size>30</size>
  4.     <eval>trim,required</eval>
  5. </config>

Damit ergibt sich ein einfaches Inputfeld, das im Backend ausgefüllt werden muss. Das"required" kann auch einfach entfernt werden, dann ist das Eingabefeld optional.

 

Wenn das "trim" durch ein "date" ersetzt wird, erhält man eine einfache Datumseingabe.

PixelConsult - Full Service Internetagentur Dortmund
  1. <config>
  2.     <type>input</type>
  3.     <size>30</size>
  4.     <eval>date</eval>
  5. </config>

Fluid

PixelConsult - Full Service Internetagentur Dortmund
  1. <options>
  2.     <blindLinkOptions>mail,url</blindLinkOptions>
  3.     <blindLinkFields>params</blindLinkFields>
  4. </options>

Die Option "Ordner" lässt sich auch aus dem Link Browser entfernen, indem man die <blindLinkOptions> um die Option "folder" erweitert.

Wenn unter <options> die Eigenschaft <allowedExtensions> ergänzt wird, kann bestimmt werden, welche Datei-Typen nur ausgewählt werden dürfen:

  1. <options>
  2.     <allowedExtensions>pdf</allowedExtensions>
  3. </options>
PixelConsult - Full Service Internetagentur Dortmund
PixelConsult - Full Service Internetagentur Dortmund

TYPE: text

RTE

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>text</type>
  3.     <rows>5</rows>
  4.     <cols>30</cols>
  5.     <eval>trim,required</eval>
  6.     <enableRichtext>1</enableRichtext>
  7.     <richtextConfiguration>default</richtextConfiguration>
  8. </config>

Mit dieser Konfiguration wird ein CKEditor RTE aufgerufen mit der im Typo3 festgelegten Standardkonfiguration.

Hier können im Feld <richtextConfiguration> auch "minimal" und "full" eingetragen werden, um jeweils den minimalen bzw. vollständigen CKEditor zu erhalten. Auch, wenn eine eigene Konfiguration des CKEditors angelegt wurde, wird die entsprechende Variable hier eingetragen.

PixelConsult - Full Service Internetagentur Dortmund

Simple textarea

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>text</type>
  3.     <rows>5</rows>
  4.     <cols>30</cols>
  5.     <eval>trim,required</eval>
  6. </config>

Diese Konfiguration erzeugt eine einfache Textbox.

PixelConsult - Full Service Internetagentur Dortmund

TYPE: check

Simple checkbox

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>check</type>
  3.     <default>0</default>
  4. </config>

Setzt man <default> auf "1", wird die Checkbox beim Erstellen einer neuen Instanz direkt angehakt.

Wenn man die Konfiguration etwas erweitert, können auch mehrere verschiedene Checkboxen erzeugt werden.

PixelConsult - Full Service Internetagentur Dortmund
  1. <config>
  2.     <type>check</type>
  3.     <items type="array">
  4.         <numIndex index="0" type="array">
  5.             <numIndex index="0">Label A</numIndex>
  6.             <numIndex index="1">0</numIndex>
  7.         </numIndex>
  8.         <numIndex index="1" type="array">
  9.             <numIndex index="0">Label B</numIndex>
  10.             <numIndex index="1">1</numIndex>
  11.         </numIndex>
  12.         <numIndex index="2" type="array">
  13.             <numIndex index="0">Label B</numIndex>
  14.             <numIndex index="1">2</numIndex>
  15.         </numIndex>
  16.     </items>
  17.     <minitems>0</minitems>
  18.     <maxitems>3</maxitems>
  19. </config>

FLUID

PixelConsult - Full Service Internetagentur Dortmund

TYPE: select

Automatical list of items

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>select</type>
  3.     <!-- uncomment this, if you want to add an empty option before -->
  4.     <!-- <items type="array">
  5.         <numIndex index="0" type="array">
  6.             <numIndex index="0"></numIndex>
  7.             <numIndex index="1"></numIndex>
  8.         </numIndex>
  9.     </items> -->
  10.     <foreign_table>pages</foreign_table>
  11.     <size>1</size>
  12.     <minitems>0</minitems>
  13.     <maxitems>1</maxitems>
  14. </config>
PixelConsult - Full Service Internetagentur Dortmund

Wenn man die Standard Konfiguration nicht verändert, wird eine Liste aller vorhandenen Seiten in der Reihenfolge ihrer Seiten-Ids gezeigt.

Das <foreign_table> zeigt an, aus welcher Datenbankspalte die Werte ausgelesen werden sollen. Hier können auch eigene Werte verwendet werden, wichtig ist nur, das es eine über $GLOBALS['TCA'] definierte Datenbankspalte gibt.

Mit Hilfe von <foreign_table_where> kann die Reihenfolge der Seiten geändert werden. Zum Beispiel nach dem Alphabet:

  1. <foreign_table_where>ORDER BY pages.title</foreign_table_where>

Außerdem kann auch die Auswahl der Seiten begrenzt werden, zum Beispiel auf die Unterseiten einer bestimmte, oder der aktuellen Seite:

  1. <foreign_table_where>AND pages.pid = ###CURRENT_PID### ORDER BY pages.title</foreign_table_where>

 

Es gibt auch die Möglichkeit nur auf Elemente des tt_content zuzugreifen, und dabei nur die zu wählen, die auf der selben Seite, oder einer Unterseite dieser Seite, sind und ein bestimmtes Datenbankfeld ausgefüllt haben:

  1. <foreign_table>tt_content</foreign_table>
  2. <foreign_table_where>AND tt_content.pid = ###CURRENT_PID###  AND dceid != ''</foreign_table_where>

FLUID

 

Oder für Kategorien:

  1. <foreign_table_where>AND sys_category.sys_language_uid IN (0,-1) ORDER BY sys_category.title ASC</foreign_table_where>

 

Die Ansicht der Auswahlliste kann auch verändert werden. Mit Hilfe von:

  1. <renderType>selectMultipleSideBySide</renderType>
  2. <size>10</size>
PixelConsult - Full Service Internetagentur Dortmund

Mit Hilfe von <multiple> kann eine Mehrfach-Auswahl zugelassen werden:

  1. <multiple>1</multiple>

Mit Hilfe von <enableMultiSelectFilterTextfield> kann eine Suche angezeigt werden:

  1. <enableMultiSelectFilterTextfield>1</enableMultiSelectFilterTextfield>

 

Eine weitere Möglichkeit ist die Checkbox-Ansicht:

  1. <renderType>selectCheckBox</renderType>
PixelConsult - Full Service Internetagentur Dortmund

Außerdem gibt es noch eine Baumansicht:

  1. <config>
  2.     <type>select</type>
  3.     <renderType>selectTree</renderType>
  4.     <foreign_table>pages</foreign_table>
  5.     <treeConfig>
  6.         <parentField>pid</parentField>
  7.         <appearance>
  8.             <expandAll>1</expandAll>
  9.             <showHeader>1</showHeader>
  10.         </appearance>
  11.     </treeConfig>
  12.     <maxitems>5</maxitems>
  13.     <size>20</size>
  14. </config>

Diese lässt sich mit:

  1. <rootUid>5</rootUid>

direkt unter <parentField> auf die ID einer Unterseite beschränken.

PixelConsult - Full Service Internetagentur Dortmund

Manual list of items

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>select</type>
  3.     <items type="array">
  4.         <numIndex index="0" type="array">
  5.             <numIndex index="0">Label A</numIndex>
  6.             <numIndex index="1">0</numIndex>
  7.         </numIndex>
  8.         <numIndex index="1" type="array">
  9.             <numIndex index="0">Label B</numIndex>
  10.             <numIndex index="1">1</numIndex>
  11.         </numIndex>
  12.     </items>
  13.     <size>1</size>
  14.     <minitems>1</minitems>
  15.     <maxitems>1</maxitems>
  16. </config>
  17. <!-- <onChange>reload</onChange> -->

 

PixelConsult - Full Service Internetagentur Dortmund

Die Auswahl lässt sich mit Symbolen versehen:

  1. <numIndex index="0" type="array">
  2.     <numIndex index="0">Layout 1</numIndex>
  3.     <numIndex index="1">0</numIndex>
  4.     <numIndex index="2">EXT:eigene_extension/layout1.png</numIndex>
  5. </numIndex>

Und auch mit einer Symbolliste unter dem Drop-Down:

  1. <showIconTable>1</showIconTable>

 

PixelConsult - Full Service Internetagentur Dortmund

Wenn man

  1. <renderType>selectCheckBox</renderType>

verwendet, dann kann auch noch eine Beschreibung (description) hinzufügen mit Hilfe von:

  1. <numIndex index="0" type="array">
  2.     <numIndex index="0">Layout 1</numIndex>
  3.     <numIndex index="1">0</numIndex>
  4.     <numIndex index="2">EXT:eigene_extension/layout1.png</numIndex>
  5.     <numIndex index="3">Beschreibung</numIndex>
  6. </numIndex>
PixelConsult - Full Service Internetagentur Dortmund

TYPE: group

File Upload

Die Standardkonfiguration lautet:

  1. <config>
  2.     <type>group</type>
  3.     <internal_type>file</internal_type>
  4.     <allowed>jpg,jpeg,png,gif</allowed>
  5.     <size>1</size>
  6.     <minitems>0</minitems>
  7.     <maxitems>1</maxitems>
  8.     <uploadfolder>uploads/pics</uploadfolder>
  9.     <show_thumbs>1</show_thumbs>
  10. </config>

Über den Button "Ordner" können Bilder aus dem fileadmin eingebunden werden und über "Datei auswählen" vom PC direkt.

PixelConsult - Full Service Internetagentur Dortmund

Dadurch wird die im Backend ausgewählte Datei zu dem Ordner "uploads/pics" hinzugefügt. Jede erneute Auswahl des Bildes fügt das Bild wieder zu diesem Ordner hinzu und versieht es hinten mit einer fortlaufenden Nummer. Dadurch ist die Verwaltung der Bilder relativ schwer und sie lassen sich nicht so einfach ersetzen, da das Bild an jeder Stelle von Hand ausgetauscht werden muss. Man kann den Ordner natürlich ändern, aber auch entfernen. Dazu löscht man die gesamte Zeile <uploadfolder>. Dann wird keine neue Datei erzeugt, sondern direkt die Datei aus dem Backend verwendet. Es wird jedoch keine Verknüpfung auf die Datei gelegt. Das bedeutet, sie kann ohne Fehlermeldung über das Backend gelöscht werden und kann dann im Frontend nicht mehr angezeigt werden.

  1. <config>
  2.     <type>group</type>
  3.     <internal_type>db</internal_type>
  4.     <allowed>pages</allowed>
  5.     <size>5</size>
  6.     <minitems>0</minitems>
  7.     <maxitems>999</maxitems>
  8.     <show_thumbs>1</show_thumbs>
  9.  
  10.     <!-- This enables the access on properties/attributes of given table/object
  11.          example: {field.yourvariable.title} -->
  12.     <dce_load_schema>1</dce_load_schema>
  13.     <!-- If enabled, will automatically translate pages or records if translation exists. -->
  14.     <dce_enable_autotranslation>1</dce_enable_autotranslation>
  15. </config>

Mit Hilfe von "Link Pages and get pages as associative array" kann eine Reihe von internen Seiten ausgewählt werden, zu denen verlinkt werden kann.

PixelConsult - Full Service Internetagentur Dortmund
  1. <config>
  2.     <type>group</type>
  3.     <internal_type>db</internal_type>
  4.     <allowed>pages</allowed>
  5.     <size>2</size>
  6.     <minitems>0</minitems>
  7.     <maxitems>1</maxitems>
  8.     <show_thumbs>1</show_thumbs>
  9.     <wizards>
  10.         <_PADDING>1</_PADDING>
  11.         <_VERTICAL>1</_VERTICAL>
  12.         <suggest>
  13.             <type>suggest</type>
  14.             <default>
  15.                 <searchWholePhrase>1</searchWholePhrase>
  16.             </default>
  17.         </suggest>
  18.     </wizards>
  19. </config>

 

Mit Hilfe von "Link internal page with suggest wizard" kann eine interne Seite ausgewählt werden, zu der verlinkt wird.

PixelConsult - Full Service Internetagentur Dortmund

Nest DCE content elements

Die Standardkonfiguration lautet:

  1. <config>
  2.   <type>group</type>
  3.   <internal_type>db</internal_type>
  4.   <allowed>tt_content</allowed>
  5.   <size>5</size>
  6.   <minitems>0</minitems>
  7.   <maxitems>999</maxitems>
  8.   <show_thumbs>1</show_thumbs>
  9.   <dce_load_schema>1</dce_load_schema>
  10. </config>

 

Mit Hilfe von "Nest DCE content elements" können andere tt-content Elemente mit Hilfe eines Wizards ausgewählt werden.

FLUID

PixelConsult - Full Service Internetagentur Dortmund

TYPE:miscellaneous

Color Picker

Die Standard Konfiguration lautet:

  1. <config>
  2.     <type>input</type>
  3.     <size>10</size>
  4.     <eval>trim</eval>
  5.     <wizards>
  6.         <_PADDING>2</_PADDING>
  7.         <link>
  8.             <type>colorbox</type>
  9.             <title>Color Picker</title>
  10.             <module>
  11.                 <name>wizard_colorpicker</name>
  12.                 <urlParameters>
  13.                     <mode>wizard</mode>
  14.                 </urlParameters>
  15.             </module>
  16.             <icon>link_popup.gif</icon>
  17.             <script>browse_links.php?mode=wizard</script>
  18.             <JSopenParams>height=500,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
  19.             <!--
  20.                 Color can be picked from image if provided:
  21.                 <exampleImg>EXT:introduction/Initialisation/Files/images/theme/IntroductionPackage.png</exampleImg>
  22.             -->
  23.         </link>
  24.     </wizards>
  25. </config>

 

Mit "Color Picker" lässt sich ein Eingabefeld erzeugen, in das mit Hilfe eines Wizards eine Farbe eingetragen werden kann.

PixelConsult - Full Service Internetagentur Dortmund

Display Conditions

Die "Display Conditions" lassen sich zu jedem Elemententyp hinzufügen. Sie sorgen dafür, dass ein Element bei der Backendeingabe nur unter bestimmten Bedingungen angezeigt wird. 

Die "Display Conditions" lassen sich auf viele verschiedene Arten verwenden. Mit der direkt vorgegebenen Standard-Version kann überprüft werden, ob ein bestimmtes Feld einen bestimmten Wert hat:

  1. <displayCond>FIELD:settings.relatedField:=:1</displayCond>

Dabei wird auf demselben Tab also demselben "Sheet" überprüft, ob das Feld mit der Variablen "relatedField" auch dem Wert "1" entspricht. Stimmt dies, so wird das Feld eingeblendet. 

 

Es kann aber auch eine Oder-Abfrage

  1. <displayCond>
  2.   <OR>
  3.     <numIndexindex="0">FIELD:settings.detailauswahl:=:1</numIndex>
  4.     <numIndexindex="1">FIELD:settings.detailauswahl:=:2</numIndex>
  5.   </OR>
  6. </displayCond>

und eine Und-Abfrage gestellt werden:

  1. <displayCond>
  2.   <AND>
  3.     <numIndexindex="0">FIELD:settings.detailauswahl:=:1</numIndex>
  4.     <numIndexindex="1">FIELD:settings.bildauswahl:=:2</numIndex>
  5.   </AND>
  6. </displayCond>
     

Die Display Conditions können aber nicht nur innerhalb eines Tabs, sondern auch Tab übergreifend (Sheet übergreifend), innerhalb einer Sektion und sogar Sektion und Tab übergeifend verwendet werden. Und durch einen Trick kann man sogar ganze Tabs, bzw Sheets ausblenden, wenn sie nicht benötigt werden.

Mit Hilfe von 

  1. <displayCond>FIELD:sheet.layouttab.settings.layout:=:1</displayCond>

wird auf dem Tab (sheet) mit der Variablen "layouttab" das Feld mit der Variablen "layout" überprüft. Dieser Code funktioniert auch aus einer Sektion heraus. Das heißt, man kann auf einem anderen Tab bestimmen, welche Elemente in der Sektion angezeigt werden.

Soll innerhalb einer Sektion ein Wert abgefragt werden, so wird 

  1. <displayCond>FIELD:layout:=:1</displayCond>

dazu verwendet.

Will man einen ganzen Tab erst bei Auswahl einer bestimmten Option zeigen, so kann die <displayCond> ganz einfach bei jedem der Felder auf dem ensprechenden Tab eingefügt werden. So wird ein leerer Tab erzeugt. Leere Tabs werden jedoch im Backend nicht gezeigt. Das heißt der Tab erscheint erst, wenn die Option gewählt wurde.

TYPE:FAL

Mit Hilfe der "File Abstraction Layer" kann eine beliebige Datei aus dem fileadmin ausgewählt und eingebunden werden. Dabei wird zwischen zwei Typen unterschieden, einmal das normale FAL und dann das FAL für die Sectionen.

FLUID

  1. <config>
  2.     <type>inline</type>
  3.     <foreign_table>sys_file_reference</foreign_table>
  4.     <foreign_field>uid_foreign</foreign_field>
  5.     <foreign_sortby>sorting_foreign</foreign_sortby>
  6.     <foreign_table_field>tablenames</foreign_table_field>
  7.     <foreign_match_fields>
  8.         <fieldname>{$variable}</fieldname>
  9.     </foreign_match_fields>
  10.     <foreign_label>uid_local</foreign_label>
  11.     <foreign_selector>uid_local</foreign_selector>
  12.     <foreign_selector_fieldTcaOverride>
  13.         <config>
  14.             <appearance>
  15.                 <elementBrowserType>file</elementBrowserType>
  16.                 <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</elementBrowserAllowed>
  17.             </appearance>
  18.         </config>
  19.     </foreign_selector_fieldTcaOverride>
  20.     <foreign_typestype="array">
  21.         <numIndexindex="2">
  22.             <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
  23.         </numIndex>
  24.     </foreign_types>
  25.     <minitems>0</minitems>
  26.     <maxitems>99</maxitems>
  27.     <appearance>
  28.         <useSortable>1</useSortable>
  29.         <headerThumbnail>
  30.             <field>uid_local</field>
  31.             <width>45c</width>
  32.             <height>45</height>
  33.         </headerThumbnail>
  34.         <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
  35.         <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
  36.         <showSynchronizationLink>0</showSynchronizationLink>
  37.         <useSortable>1</useSortable>
  38.         <enabledControls>
  39.             <info>1</info>
  40.             <new>0</new>
  41.             <dragdrop>0</dragdrop>
  42.             <sort>1</sort>
  43.             <hide>1</hide>
  44.             <delete>1</delete>
  45.             <localize>1</localize>
  46.         </enabledControls>
  47.         <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
  48.     </appearance>
  49.     <behaviour>
  50.         <localizationMode>select</localizationMode>
  51.         <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
  52.     </behaviour>
  53.     <dce_load_schema>1</dce_load_schema>
  54.     <dce_get_fal_objects>1</dce_get_fal_objects>
  55. </config>

Mit "File Abstraction Layer (recommended)" lässt sich eine Datei im Fileadmin auswählen und einbinden.

PixelConsult - Full Service Internetagentur Dortmund

File Abstraction Layer (section use only)

Die Standard Konfiguration lautet:

  1. <config>
  2.     <type>group</type>
  3.     <internal_type>db</internal_type>
  4.     <appearance>
  5.         <elementBrowserType>file</elementBrowserType>
  6.         <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</elementBrowserAllowed>
  7.     </appearance>
  8.     <allowed>sys_file</allowed>
  9.     <size>5</size>
  10.     <minitems>0</minitems>
  11.     <maxitems>5</maxitems>
  12.     <show_thumbs>1</show_thumbs>
  13.     <dce_load_schema>1</dce_load_schema>
  14.     <dce_get_fal_objects>1</dce_get_fal_objects>
  15. </config>

Mit "File Abstraction Layer (section use only)" lässt sich innerhalb einer Sektion eine Datei im Fileadmin auswählen und einbinden.

PixelConsult - Full Service Internetagentur Dortmund

Fluid-Programmierung

Die Templates der DCEs werden mit Fluid-Programmierung festgelegt. Das bedeutet, sie alleine bestimmen, wie die Backend-Eingaben im Frontend ausgegeben werden.

Fluid ist eine "Template engine". Sie ist einfach zu verwenden und zu erweitern. Diese Art der Programmierung wird seit einiger Zeit in Typo3 selbst und auch in den neueren Extensionen verwendet. Daher kommt sie auch in der Extension DCE zum Einsatz.

Ein großer Vorteil von Fluid ist es, dass sich bequem Abfragen, Schleifen und Bedingungen mit HTML und CSS verbinden lassen. Das Template kann entweder als Datei oder Inline definiert werden. 

Als Datei lassen sich Templates schnell in verschiedenen Typo3 Systemen verwenden und einfacher in verschiedene Unter-Templates aufteilen. Das Template direkt "Inline" auf diesem Reiter zu definieren, ist jedoch sinnvoller, wenn ein einfaches Template verwendet wird, welches sich nicht in einem anderen DCE wiederholt.

Über Die Schaltfläche "Template-Inhalt" lassen sich Variablen und einige "ViewHelper" direkt auswählen. 

 

Verfügbare Variablen

Die verfügbaren Variablen sind diejenigen, die vorher mit Hilfe der Konfigurationen festgelegt wurden.

 

Verfügbare Basis-Variablen

Die Basis Variablen sind System eigene Variablen, die bestimmte systemweite Werte enthalten, beispielsweise die ausgewählte Sprache.

  • {dce} – Informationen über das DCE
    • {dce.uid} – gibt die ID des DCE zurück
    • {dce.title} – gibt den Titel des DCEs zurück
  • {contentObject} – Informationen über die Instanz
    • {contentObject.uid} – gibt die ID der DCE-Instanz zurück
    • {contentObject.pid} – gibt die Seiten-ID zurück, auf der sich die DCE-Instanz befindet
  • {TSFE} – TSFE-Objekt (tslib_fe)
    • {TSFE.id} – gibt die Seiten-ID zurück
    • {TSFE.lang} – gibt die aktuelle Sprache zurück
  • {page} – Informationen über die Seite
    • {page.uid} – gibt die Seiten-ID zurück
    • {page.pid} – gibt die DCE-ID zurück
    • {page.title} – gibt den Seitentitel zurück
  • {tsSetup} – ermöglicht Zugriff auf das Seiten TS

 

PixelConsult - Full Service Internetagentur Dortmund

Meist verwendete ViewHelper

f:count - Zählt die Anzahl der Elemente inerhalb eines Arrays

  1. <f:if condition="{field.items -> f:count()} > 1">

 

f:debug - Gibt alle Eigenschaften des Objekts als Debug aus

  1. <f:debug>{field.item}</f:debug>

 

f:for - Lässt eine FOR-Schleife über ein Array laufen

  1. <f:for each="{items}" as="item" iteration="iterator">
  2.  
  3. </f:for>

 

f:format.crop - Verkürzt einen Text auf maximal 30 Buchstaben.

  1. {text -> f:format.crop(maxCharacters="30")}

 

f:format.html - Verwendete HTML-Tags werden auch als solche umgesetzt

  1. {text -> f:format.html()}

 

f:format.nl2br - Rahmen für PHPs nl2br Funktionen

  1. {text -> f:format.nl2br()}

 

f:if - IF-Abfrage zur Überprüfung von Eigenschaften

  1. <f:if condition="">
  2.   <f:then>
  3.  
  4.   </f:then>
  5.   <f:else>
  6.  
  7.   </f:else>
  8.   </f:if>
  1. <div class="{f:if(condition:'{field.cc}',then:'color',else:'nocolor')}"></div>

 

f:image - Bindet ein Bild ein

  1. <f:image image="{field.image}"/>

 

f:link.email - E-Mail-Verlinkung

  1. <f:link.email email="your@mailaddress.tld">Content</f:link.email>

 

f:link.external - Verlinkt auf eine externe Website

  1. <f:link.external uri="www.typo3.org"  target="_blank">Website</f:link.external>

 

f:link.page - Verlinkt per Seiten-ID auf eine interne Seite

  1. <f:link.page pageUid="1">Page</f:link.page>

 

f:link.typolink- Verlinkt auf interne oder externe Seite, für Bild Meta-Verlinkungen geeignet

  1. <f:link.typolink parameter="{field.link}" target="_blank" class="ico-class" title="some title" useCacheHash="true">
  2.     Linktext
  3. </f:link.typolink>

 

f:render - Rendert eine externe Partial-Datei

  1. <f:render partial="NameOf/Partial" arguments="{fields:fields}" />

 

f:uri.typolink - Verlinkt auf eine interne Seite

  1. {f:uri.typolink(parameter:'{field.link}')}

DCE Viewhelper

dce:GP - Gibt php Variablen zurück

  1. <!-- Gets get or post variables. Never use this viewhelper for direct output!! This would provoke XSS (Cross site scripting). -->
  2. {dce:GP(subject:'myCoolGetParameter')}

 

dce:arrayGetIndex - liefert den Wert eines Indexes aus einem nicht-numerischen Array

  1. <!-- normally you can access array values with: {array.0}, {array.1}, etc. if they have numeric keys. This viewhelper
  2.      converts named keys to numeric ones. Futhermore if you are able to set the index dynamically (codemirrorCycle.e. from variable).-->
  3. {array -> dce:arrayGetIndex(index:'{iteration.index}')}

 

dce:explode - wandelt einen String in ein Array um und trennt die Werte anhand des gegebenen Delimeters

  1. {string -> dce:explode(delimiter:'\n')}

 

dce:fileInfo - gibt den entsprechenden Wert einer Datei wieder

  1. <dce:fileInfofileUid="{fileUid}"attribute="width"/>

 

dce:format.addcslashes - fügt Slashes an eine gegebene Variable

  1. <dce:format.addcslashes>{field.myVariable}</dce:format.addcslashes>

 

dce:format.raw - stellt Text nach dem raw-Format da

  1. <!-- use f:format.raw on TYPO3 4.6 or higher -->
  2. <dce:format.raw>{code}</dce:format.raw>

 

dce:format.tiny - entfernt Zeilenumbrüche

  1. <dce:format.tiny>
  2.     Removes tabs and
  3.     linebreaks.
  4. </dce:format.tiny>

 

dce:format.ucfirst - konvertiert den ersten Buchstaben eines strings zu einem Großbuchstaben

  1. {variable -> dce:format.ucfirst()}

 

dce:format.wrapWithCurlyBraces - umrahmt den Text mit schweiften Klammern

  1. <!-- Use this viewhelper if you want to wrap something with curly braces {} -->
  2. <dce:format.wrapWithCurlyBracesprepend=""append="">{field.myVariable}</dce:format.wrapWithCurlyBraces>

 

dce:isArray - testet, ob eine Variable ein Array ist

  1. <!-- Returns TRUE or FALSE, should be used in if conditions -->
  2. {variable -> dce:isArray()}

 

dce:thisUrl - gibt die aktuelle URL zurück

  1. {dce:thisUrl(showHost:1, showRequestedUri:1, urlencode:0)}

Datumskonfiguration

Wenn in der Konfiguration ein Datumsfels definiert wurde, so kann das Datum mit folgedem Code ausgegeben werden:

  1. <f:format.date format="Y-m-d">{field.datumposted}</f:format.date>

Mit format="Y-m-d" kann bestimmt werden, in welcher Reihenfolge und mit welchen Trennzeichen die Zahlen gezeigt werden,

If-Abfragen

Eine IF-Abfrage besteht aus einer "condition", der Bedingung, einem "then"-Teil und einem "else"-Teil. Zunächst wird abgefragt, welche Bedingung erfüllt sein muss, um entweder bei Erfüllung den "then"-Teil, oder bei nicht Erfüllung den "else"-Teil auszuführen. Wobei der "else"-Teil auch weggelassen werden kann. IF-Abfragen können beliebig oft verschachtelt werden.

  1. <f:if condition="">
  2.   <f:then>
  3.  
  4.   </f:then>
  5.   <f:else>
  6.  
  7.   </f:else>
  8. </f:if>

Mit einer IF-Abfrage kann gesteuert werden, welcher HTML-Code im Frontend ausgegeben wird. Zunächst kann überprüft werden, ob ein Inputfeld generell ausgefüllt worden ist. Und dann gibt es zwei Möglichkeiten, wie die Eingaben für IF-Abfragen aussehen können. Mit einer Checkbox kann zum Beispiel  "entweder - oder" abgefragt werden und mit einer manuellen Liste lassen sich die eingegebenen "conditions" abfragen.

Es kann abgefragt werden, ob das Feld "Text" ausgefüllt wurde:

  1. <f:if condition="{field.text}">

Das Gegenteil, wenn ein Feld nicht ausgefüllt wurde, wäre dann:

  1. <f:if condition="!{field.text}">

Es kann eine "OR" (||) und eine "AND" (&&) Abfrage gestellt werden:

  1. <f:if condition="{field.header} || {field.text}">

Es kann ein konkreter Wert überprüft werden (auch <, <=, >, <= und !=):

  1. <f:if condition="{field.text} == 1">

 

Die if-Abfrage kann auch mit einer verkürzten Schreibweise durchgeführt werden:

  1. <f:ifcondition="{test}==0">
  2.   <f:then>Option A</f:then>
  3.   <f:elseif="{test}==1">Option B</f:else>
  4.   <f:else>Option C</f:else>
  5. </f:if>

FOR-Schleifen

Wenn eine Sektion verwendet wird, dann müssen die Eingaben aus dieser mit einer FOR-Schleife ausgegeben werden:

  1. <f:for each="{field.testsektion}" as="test">
  2.   <h1>{test.header}</h1>
  3. </f:for>

Sollen nicht alle Elemente aus seiner Sektion verwendet werden, so lässt sich das zum Beispiel über einen Iterator steuern:

  1. <f:for each="{field.testsektion}" as="test" iteration="iterator">
  2.   <f:if condition="{iterator.index} <= 5">
  3.     <f:then>
  4.       <h1>{test.header}</h1>
  5.     </f:then>
  6.   </f:if>
  7. </f:for>

Das bedeutet, dass nur die ersten fünf Iterationen der Sektion ausgegeben werden. Achtung, der Iterator beginnt bei 0 zu zählen! Mit folgendem Code lässt sich nur die erste Iteration ausgeben:

  1. <f:for each="{field.testsektion}" as="test" iteration="iterator">
  2.   <f:if condition="{iterator.isFirst}">
  3.     </f:then>
  4.       <h1>{test.header}</h1>
  5.     </f:then>
  6.   </f:if>
  7. </f:for>

Analaog kann mit {iterator.isLast} das letzte Element gewählt werden, {iterator.isEven} und {iterator.isOdd} geben die entsprechenden geraden und ungeraden Durchläufe aus.

Wenn mit "Link Pages and get pages as associative array" eine Dateisammlung eingefügt werden soll, wird auch dafür eine FOR-Schleife verwendet:

  1. <f:for each="{field.testgroup}" as="collection">
  2.   <f:for each="{collection.items}" as="item">
  3.     <f:image src="{item.uid}" treatIdAsReference="{f:if(condition:'{item.originalFile}',then: '1', else: '0')}" />
  4.   </f:for>
  5. </f:for>

Mit Hilfe von FOR-Schleifen ist es auch möglich einer Reihe von <div>-Elementen eine fortlaufende ID zuzuweisen:

  1. <f:for each="{field.items}" as="item" iteration="iterator">
  2.   <div id="unique-name-{iterator.index}"></div>
  3. </f:for>

Soll die ID nicht nur auf dieser Seite, sondern allgemein einzigartig sein, so ist dies über die UID der Seite möglich. Diese wird mit {contentObject.pid} ausgelesen:

  1. <f:for each="{field.items}" as="item" iteration="iterator">
  2.   <div id="unique-name-{contentObject.pid}-{iterator.index}"></div>
  3. </f:for>

Werte aus manueller Liste oder Checkbox auslesen

Variablen

Mit Hilfe von

  1. <f:variable name="myvar" value="{field.anzahl}" />

lässt sich eine Variable namens {myvar} erzeugen. Diese kann zum Beispiel so verwendet werden:

  1. <f:if condition="{myvar} > 8">

Wenn eine "Manuel List" erzeugt worden ist und man aus dieser eine Reihe von abfragbaren Variablen erzeugen will, geht dies zum Beispiel so:

  1. <f:if condition="{field.einstellungen}">
  2.     <f:then>
  3.         <f:for each="{field.einstellungen -> dce:explode(delimiter:',')}" as="item" iteration="iterator">
  4.             <f:variable name="{item}" value="1" />
  5.         </f:for>        
  6.     </f:then>
  7. </f:if>

Abfragbar wäre das dann mit: 

  1. <f:if condition="{item}">

Bilder einbauen

Wenn ein Bild als "File Abstraction Layer"-Element hinzugefügt wird, muss zusätzlich eine FOR-Schleife verwendet werden, da das FAL ein Array zurückgibt.

  1. <f:for each="{field.image}" as="item" iteration="iterator">
  2.     <f:image image="{item}"/>
  3. </f:for>

Mit Hilfe der Angabe "width" und "cropVariant" kann das Bild verkleinert und zugeschnitten werden:

  1. <f:for each="{field.image}" as="item" iteration="iterator">
  2.     <f:image image="{item}" width="200" cropVariant="header"/>
  3. </f:for>

Wenn das Bild als Hintergrundbild verwendet werden soll, muss dazu der <f:uri.image>-Viewhelper verwendet werden:

  1. <f:for each="{field.image}" as="item" iteration="iterator">
  2.     <div style="background-image:url({f:uri.image(src:'{item.uid}', treatIdAsReference:'1')})"></div>
  3. </f:for>

Auf die Eigenschaften des Bildes kann mit 

zugegriffen werden. 

Da der Link aber nicht die Seiten Id, sondern den direkten Typo-Linkt zurück gibt, nämlich "t3://page?uid=2", muss man den <f:link.typolink>-Viewhelper verwenden.

  1. <f:link.typolink parameter="{item.link}" target="_blank" class="ico-class" title="some title" useCacheHash="true">
  2.    Linktext
  3. </f:link.typolink>

Responsive Bilder

Responsive Bilder können wieder mit Hilfe des <f:uri.image>-Viewhelpers eingebaut werden:

  1. <f:for each="{field.image}" as="item" iteration="iterator">
  2.     <picture>
  3.         <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='700' cropVariant='header' />" media="(max-width: 768px)">
  4.         <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='1000' cropVariant='header' />" media="(max-width: 1024px)">
  5.         <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='1500' cropVariant='header' />">
  6.       <f:image image="{item}" width="200" cropVariant="header"/>
  7.     </picture>
  8. </f:for>

Bild-Auswahl nach Name oder Dateiendung

Mit Hilfe von "{item.name}" kann auf den Dateinamen eines Bildes zurückgegriffen werden. Dieser kann dann direkt geprüft werden, oder mit Hilfe des <v:condition.string.contains>-Viewhelpers auf einen bestimmten Substring geprüft werden.

Konfiguration

 

In "{item.extension}" findet sich die Dateiendung eines Bildes, so kann zum Beispiel für svg-Dateien eine Ausnahme hinzugefügt werden.

Mehrsprachigkeit

Mit einem ganz einfachen Trick kann man schnell an einer Stelle einen verschiedensprachigen Button einbauen. Die Variable {page.sys_language_uid} gibt die aktuelle Sprache der Seite zurück:

  1. <f:if condition="{page.sys_language_uid}==0">
  2.   <f:then>mehr</f:then>
  3.   <f:else if="{page.sys_language_uid}==1">more</f:else>
  4.   <f:else>plus</f:else>
  5. </f:if>

 

Wenn man zum Beispiel einen Button einbauen möchte, der immer den gleichen Text enthalten soll, aber an vielen verschiendenen Stellen eingesetzt wird, so ist es leichter, ihn an einer zentralen Stelle zu definieren. Dies ist auch praktischer, wenn das, was übersetzt werden muss, später an einen Übersetzer gegeben wird. Dann muss nicht viel im Code geändert werden, sondern nur die eine Datei.
Das geht mit Hilfe einer XML Datei und einem Verweis auf diese. Man erstellt also eine lang.xml mit folgendem Inhalt:

  1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
  2. <T3locallang>
  3.   <meta type="array">
  4.     <typ>module</type>
  5.     <description>Language labels for the DCEs in backend</description>
  6.   </meta>
  7.   <data type="array">
  8.     <languageKey index="de" type="array">
  9.       <label index="buttontext">Weiter</label>
  10.     </languageKey>
  11.     <languageKey index="default" type="array">
  12.       <label index="buttontext">Next</label>
  13.     </languageKey>
  14.   </data>
  15. </T3locallang>

Und schreibt dann ins FLUID-Template:

  1. <a href="#">
  2.   <f:translate key="LLL:fileadmin/lang/dce.xml:buttontext" />
  3. </a>

Auf diese Weise können mehrere Sprachen definiert werden. Wichtig ist nur zu wissen, das Englisch, also "en" immer "default" ist. Auch wenn die eigentliche Default-Sprache Deutsch ist.

PDF einbinden

Ein PDF kann mit Hilfe von FAL-Objekten genauso wie ein Bild oder Video eingefügt werden. Wenn man aber hier den selben Code wie bei einem Bild verwendet, wird lediglich ein Bild der PDF angezeigt. 

Will man einen Button "Download" erzeugen, bei dem sich die PDF-Datei öffnet, so muss dies mit "publicUrl" umgesetzt werden:

  1. <f:for each="{field.pdf}" as="pdf">
  2.   <a href="{pdf.publicUrl}" target="_blank">Download</a>
  3. </f:for>

Gleichzeitig kann man auch ein Bild der PDF anzeigen, bei dem sich dann auch der Download auf Klick öffnet:

  1. <f:for each="{field.pdf}" as="pdf">
  2.   <a href="{pdf.publicUrl}" target="_blank">
  3.     <f:image image="{pdf}"/>
  4.   </a>
  5. </f:for>

Andere DCEs oder tt-content-Elemente einbinden und anzeigen

Wenn in einem "Nest DCE content element" oder eine "automatical list" ein oder mehrere Elemente ausgewählt wurden, kann mit Hilfe folgender Konfiguration auf alle Variablen des anderen DCEs zugegriffen werden:

  1. <f:for each="{field.image}" as="item" iteration="iterator">
  2.     {item.text}
  3. </f:for>

In einigen DCE-Versionen muss "{item.get.text}" verwendet werden, aber dieses Problem wurde in den neueren DCE-Versionen behoben.

DCEs exportieren

Mit Hilfe der Standard Export-Funktion von Typo können auch DCEs ganz leicht aus einem bestehenden System in ein neues exportiert werden. Dazu geht man direkt aus der DCE Ansicht über den Button "Die Listenansicht aufrufen". Dort dann den Export auswählen und, ganz wichtig, unter "Tabellen einschließen" muss überall "tx_dce_domain_model_dce" und "tx_dce_domain_model_dcefield" ausgewählt werden, damit nicht nur die Templates, sondern auch die Eingabefelder exportiert werden. Es können auch nur einzelne DCEs ausgewählt werden, in dem man alle ausschließt, die nicht benötigt werden. Dann kann man den Export als .t3d Datei herunterladen.

Importieren kann man das Ganze, in dem man auf der Root-Ebene auf das Typo3 Zeichen klickt und dann "Importieren aus .t3d" auswählt. Dann werden alle gespeicherten DCEs diesem System hinzugefügt und können sofort verwendet werden.

DCE-Container sortieren

DCE-Container Elemente alphabetisch sortieren

Dazu wird das Template ganz normal für jedes Element definiert und der DCE-Container folgendermaßen geändert:

  1. <f:section name="main">
  2.   <div class="team">
  3.     <f:for each="{dces->v:iterator.sort(order: 'ASC', sortBy: 'item.value')}" as="dce">
  4.       {dce.render -> f:format.raw()}
  5.     </f:for>
  6.   </div>
  7. </f:section>

 

Es wird zusätzlich die Extension VHS installiert und oben in das Template geschrieben:

  1. {namespace v=FluidTYPO3\Vhs\ViewHelpers}

DCE-Container Elemente nach bestimmten Werten sortieren.

Dazu wird zuerst mit  <f:alias> das Array angelegt, in dem sich die Werte befinden. Danach kann eine for-Schleife über das Array laufen, für jede DCE-Instanz des Containers wird überprüft, ob diese Instanz zu dem entsprechenden Wert passt, dann wird diese entweder ausgegeben oder im nächsten Array Durchlauf wieder überprüft.

  1. <f:section name="main">
  2.   <f:alias map="{alpha: {obst: 'Obst', gemuese: 'Gemüse'}}">
  3.     <f:for each="{alpha}" as="wert">
  4.       <h2>{wert}</h2>
  5.       <f:for each="{dces}" as="dce" iteration="iterator">    
  6.         <f:if condition="{dce.sorte}=={wert}">
  7.           <f:then>
  8.             {dce.name}
  9.           </f:then>
  10.         </f:if>
  11.       </f:for>
  12.     </f:for>
  13.   </f:alias>
  14. </f:section>

    Wäre die Eingabe in den Instanzen nun {dce.name} -> {dce.sorte}:

    • Bohnen -> Gemüse
    • Erdbeeren -> Obst
    • Brokkoli -> Gemüse
    • Äpfel -> Obst

      Dann ergibt sich die Ausgabe:

      • Obst
        • Erdbeeren
        • Äpfel
      • Gemüse
        • Bohnen
        • Brokkoli

      Substring auslesen

      Wenn aus einer Reihe von Bildern, die in einem FAL-Element eingebunden wurden, anhend des Dateinamens ein bestimmtes Bild ausgewählt werden soll, so kann man dafür denVHS ViewHelper <v:condition.string.contains> verwenden:

      1. <f:for each="{field.image}" as="image" iteration="iterator">
      2.   <v:condition.string.contains haystack="{image.name}" needle="icons">
      3.     <f:then></f:then>
      4.     <f:else></f:else>
      5.   </v:condition.string.contains>
      6. </f:for>

      Der ViewHelper untersucht den gegebenen String nach dem angegebenen Sub-String. Danach wird dann entweder der "then" oder der "else" Teil ausgeführt.

       

      Es wird zusätzlich die Extension VHS installiert und oben in das Template geschrieben:

      1. {namespace v=FluidTYPO3\Vhs\ViewHelpers}

      Konfiguration Backend Template

      Alle Eingabe-Felder, außer FAL Elemente, können im Backend-Template genauso ausgegeben werden, wie im normalen Template für das Frontend. Die FAL Elemente geben allerdings einen Fehler zurück, wenn kein Element vorhanden ist. Es muss dafür eine Array-Prüfung eingebaut werden, damit der Code nicht ausgeführt wird, wenn das Feld leer ist:

      1. <f:sectionname="bodytext">
      2.   <f:ifcondition="{field.image -> dce:isArray()}">
      3.     <f:then>
      4.       <f:foreach="{field.image}"as="image"iteration="iterator">
      5.         <imgsrc="<f:uri.image src='{image.uid}' treatIdAsReference='1' width='200' cropVariant='free' />"style="padding:10px;"width="200" /><br>
      6.       </f:for>
      7.     </f:then>
      8.   </f:if>
      9. </f:section>

      Mit Hilfe von Inline-Styles lassen sich alle Elemente in der Backend-Ansicht verändern.

      Konfiguration der Detailseite

      Damit eine Detailseite geöffnet werden kann muss zunächst ein Button im normalen Template untergebracht werden. Dieser lautet zum Beispiel:

      1. <f:link.page additionalParams="{detailDceUid:contentObject.uid}">Weiter</f:link.page>

      Durch diesen wird auf der aktuellen Seite die ID dieses speziellen DCE-Objektes aufgerufen und die zusätzlichen Informationen ausgelesen, die sich auf der Detailseite befinden. Mit dem Button:

      1. <f:link.page pageUid="{page.uid}">Zurück</f:link.page>

      kann dann wieder zur Original-Seite zurückgekehrt werden.