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.

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.

Typolink

Die Standardkonfiguration lautet:

1. <config>
2.     <type>input</type>
3.     <renderType>inputLink</renderType>
4.     <size>30</size>
5.     <eval>trim</eval>
6.     <softref>typolink,typolink_tag,images,url</softref>
7.     <fieldControl>
8.         <linkPopup>
9.             <options>
10.                 <!--<blindLinkOptions>file,mail,page,spec,url</blindLinkOptions>-->
11.                 <!--<blindLinkFields>class,params,target,title</blindLinkFields>-->
12.             </options>
13.         </linkPopup>
14.     </fieldControl>
15. </config>

Damit wird ein Eingabefeld erzeugt, welches das Standard-Eingabefenster für Verlinkungen in Typo3 öffnet. Es werden die üblichen Eingabemöglichkeiten erzeugt.

Diese können jedoch beeinflusst werden, indem man zum Beispiel die Optionen "mail" oder "params" ausblendet.

Simple textarea

Die Standardkonfiguration lautet:

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:

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:

Außerdem gibt es noch eine Baumansicht:

Manual list of items

Die Standardkonfiguration lautet:

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.

Link Pages and get pages as associative array

Die Standardkonfiguration lautet:

Link internal page with suggest wizard

Die Standardkonfiguration lautet:

Nest DCE content elements

Die Standardkonfiguration lautet:

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.     <numIndex index="0">FIELD:settings.detailauswahl:=:1</numIndex>
4.     <numIndex index="1">FIELD:settings.detailauswahl:=:2</numIndex>
5.   </OR>
6. </displayCond>

und eine Und-Abfrage gestellt werden:

1. <displayCond>
2.   <AND>
3.     <numIndex index="0">FIELD:settings.detailauswahl:=:1</numIndex>
4.     <numIndex index="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

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. 

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:fileInfo fileUid="{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.wrapWithCurlyBraces prepend="" 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:if condition="{test}==0">
2.   <f:then>Option A</f:then>
3.   <f:else if="{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 

• {item.title},
• {item.alternative},
• {item.description} und
• {item.link}

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>

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:section name="bodytext">
2.   <f:if condition="{field.image -> dce:isArray()}">
3.     <f:then>
4.       <f:for each="{field.image}" as="image" iteration="iterator">
5.         <img src="<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.