10.01.2014 TYPO3 Carlos Meyer

TYPO3: Zugriff auf Templavoilá Felder mit Typoscript

Ansatz 1. LOAD_REGISTER nutzen um Werte vom FCE an Typoscript zu übergeben:

Aufgabenstellung: Ein Redakteur soll die Möglichkeit haben über eine DropDown Box in den Seiteneigenschaften den Wert für eine CSS Klasse anzupassen. Dadurch kann z.B. das Aussehen für einen bestimmten Bereich im FE gesteuert werden.

Dazu ist es als erstes notwendig im Templavoilá ein neues Feld anzulegen. Wir nutzen hier ein 'Select'. numIndex index="0" ist dabei das was im BE angezeigt wird numIndex index="1" ist der eigentliche Value.

<field_pagestyle type="array">

<tx_templavoila type="array">

<title>SeitenStyle</title>

<description>pagestyle</description>

<sample_data type="array">

<numIndex index="0">[pageStyle]</numIndex>

</sample_data>

<eType>select</eType>

<TypoScript><![CDATA[

123 = LOAD_REGISTER

123 {

styleField.field = field_pagestyle

}

]]></TypoScript>

</proc>

</tx_templavoila>

<label>PageStyle</label>

<type>select</type>

<numIndex index="0">Style0</numIndex>

</numIndex>

<numIndex index="0">Style1</numIndex>

</numIndex>

</items>

</config>

</TCEforms>

</field_pageheight>

Wichtig ist hier aber vor allem der Bereich <TypoScript><Typoscript> dort wird der Wert des Feldes field_pagestyle in eine Register Variable geschoben.

Im nächsten Schritt muss nun das Feld angelegt werden in dem die Register Variable im FE genutzt werden soll. Dazu ein Feld vom Typ None (Typoscript only) anlegen und dort zum besseren Handling TS Code über den < Operator kopieren. Natürlich könnte man den Code auch gleich hier unterbringen, ist aber nicht schön.

<field_pageproperty type="array">

<tx_templavoila type="array">

<title>Header Navi</title>

<description>pageproperty</description>

<sample_data type="array">

<numIndex index="0">[pageproperty]</numIndex>

</sample_data>

<TypoScript><![CDATA[

10 < lib.pageProperty

]]></TypoScript>

<eType_EXTRA type="array">

</eType_EXTRA>

</tx_templavoila>

</field_pageproperty>

Jetzt kann im TS Editor der Code für lib.pageProperty angelegt werden. Dort kann nun die vorher gefüllte Register-Variable Verwendung finden. Z.B über {register:styleField}. Beachte: das Feld field_pageheight muss vor dem Feld field_pageproperty angelegt werden, sonst steht die Register-Variable nicht zur Verfügung. Das Beispiel ist natürlich stark konstruiert, einfacher wäre es sicher den Wert gleich im Frontend als Attribut an die richtige Stelle zu mappen. Allerdings geht es hier auch nur um die Beschreibung der Vorgehensweise und die Datenübergabe von Templavolá an TS.

Der 2. Ansatz hat hier schon mehr Praxisbezug ist aber auch komplexer.

Ansatz 2. Werte vom FCE an Typoscript übergeben und im Menüobjekt (HMENU) verwenden:

Aufgabenstellung: Wir wollen eine Seitenhöhe beim Rendern eines entsprechenden Menüpunktes verwenden. Jeder Menüpunkt kann aber seine eigene Seitenhöhe haben, die wir aus den Seiteneigenschaften der jeweiligen Seite auslesen müssen.

Wie im ersten Beispiel zuerst das Element im Templavoila anlegen, gemappt muss es nicht werden, da es ja keinen direkten FE Output hat:

<field_pageheight type="array">

<tx_templavoila type="array">

<title>Kachelhöhe</title>

<description>map to the pageheight</description>

<sample_data type="array">

<numIndex index="0">[pageHeight]</numIndex>

</sample_data>

<eType>select</eType>

</proc>

</tx_templavoila>

<label>Kachelhöhe</label>

<type>select</type>

<numIndex index="0">normal</numIndex>

</numIndex>

</numIndex>

</numIndex>

</items>

</config>

</TCEforms>

</field_pageheight>

Der zweite Schritt ist das anlegen des Elementes für die Navigation:

<field_headernav type="array">

<tx_templavoila type="array">

<title>Header Navi</title>

<description>map to the headerNav</description>

<sample_data type="array">

<numIndex index="0">[headerNav]</numIndex>

</sample_data>

<TypoScript><![CDATA[

10 < lib.headerNav

]]></TypoScript>

<eType_EXTRA type="array">

</eType_EXTRA>

</tx_templavoila>

</field_headernav>

Gemappt wird dieses Element auf das entsprechende HTML im Template wo es benötigt wird.

Um nun auf die gefüllten FCEs auf den jeweiligen Seiten zuzugreifen, wir wollen ja das Menü mit spezifischen Eigenschaften erstellen, ist es notwendig das Templavoilá XML auf den Seiten auszuwerten. Wir nutzen dazu die Erweiterung flexform_getfield. Diese bitte aus dem Repo installieren. Da wir an diese Extension eine dyn. Seiten´ID aus Typoscript übergeben müssen, ist es erforderlich einige Modifikationen vorzunehmen. Die Extension kommt in der im Repo verfügbaren Version nicht mit stdWrap Objekten klar. Das müssen wir zumindest für den Parameter uid einbauen. Dazu ist die Zeile

if(isset($this->conf["uid"])) $lookup_uid = $this->conf["uid"]; else $lookup_uid = $GLOBALS['TSFE']->id;

durch

if(isset($this->conf["uid"])) $lookup_uid = $this->cObj->cObjGetSingle($this->conf["uid"],$this->conf["uid."]); else $lookup_uid = $GLOBALS['TSFE']->id;

zu ersetzen. $this->cObj->cObjGetSingle kümmert sich dabei um das Rendern des stdWrap.

Warum das notwendig ist wird im folgenden Typoscript ersichtlich:

lib.headerNav = HMENU

lib.headerNav {

1 = TMENU

1 {

#wrap = <ul>|</ul>

# Always unfold all sub-levels of the menu

expAll = 1

# Remove the (old) default behaviour which adds onfocus="blurLink(this);" to all links

noBlur = 1

# Define the normal state (not active, not selected) of menu items

# Using NO=1 to activate normal state is not necessary, but useful when copying

NO = 1

NO {

# Use the page title field the title property on the A-tag, but only if the navigation title is set

ATagTitle {

field = title

fieldRequired = nav_title

}

stdWrap.cObject = COA

stdWrap.cObject {

10 = LOAD_REGISTER

10.pageWidth.cObject = CASE

10.pageWidth.cObject {

key.cObject = USER

key.cObject {

userFunc = tx_flexformgetfield_pi1->main

field = field_pagewidth

uid = TEXT

uid.field = uid

}

tx_flexform_get_null = TEXT

tx_flexform_get_null.value = w1

default = USER

default {

userFunc = tx_flexformgetfield_pi1->main

field = field_pagewidth

uid = TEXT

uid.field = uid

}

20 = LOAD_REGISTER

20.pageHigh.cObject = CASE

20.pageHigh.cObject {

key.cObject = USER

key.cObject {

userFunc = tx_flexformgetfield_pi1->main

field = field_pageheight

uid = TEXT

uid.field = uid

}

tx_flexform_get_null = TEXT

tx_flexform_get_null.value = h1

default = USER

default {

userFunc = tx_flexformgetfield_pi1->main

field = field_pageheight

uid = TEXT

uid.field = uid

}

30 = TEXT

30.field = subtitle // title

}

wrapItemAndSub.insertData = 1

wrapItemAndSub = <div class="kachel kachel-main-nav nav gradient {register:pageHigh} {register:pageWidth}">|</div>

# HTML-encode special characters according to the PHP-function htmlSpecialChars

stdWrap.htmlSpecialChars = 1

}

# Copy properties of normal to active state, and then add a CSS class for styling

ACT < .NO

ACT {

#ATagParams = class="active"

wrapItemAndSub.insertData = 1

wrapItemAndSub = <div class="kachel kachel-main-nav nav current gradient {register:pageHigh} {register:pageWidth}">|</div>

}

# Copy properties of normal to current state, and then add a CSS class for styling

CUR < .NO

CUR {

#ATagParams = class="selected"

wrapItemAndSub.insertData = 1

wrapItemAndSub = <div class="kachel kachel-main-nav nav current gradient {register:pageHigh} {register:pageWidth}">|</div>

}

Über die userFunc = tx_flexformgetfield_pi1->main holen wir uns für jede Seiten Id

uid = TEXT

uid.field = uid

den Wert aus dem Feld field_pageheight und übergeben ihn an das Menü mit einer Register Variablen. Die zusätzlich CASE Struktur fängt nur nicht ausgefüllte Werte ab und gibt dafür einen Standard Wert zurück.

Zurück zur Übersicht