TYPO3: Zugriff auf Templavoilá Felder mit Typoscript

Im Rahmen div. TYPO3 Aufgabenstellungen kann es notwendig sein mit Typoscript auf Templavoilá FCEs oder Page Template Felder zuzugreifen. Redakteure haben dadurch unter anderem die Möglichkeit Verhalten über die Seiteneigenschaften zu steuern. Im Folgenden werden einige Ansätze dazu erläutert.

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 type="array">

       <int>0</int>

       <HSC>0</HSC>

       <stdWrap></stdWrap>

     </proc>

     <preview></preview>

  </tx_templavoila>

  <TCEforms type="array">

    <label>PageStyle</label>

    <config type="array">

    <type>select</type>

    <items type="array">

    <numIndex index="0" type="array">

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

        <numIndex index="1">s0</numIndex>

    </numIndex>

   <numIndex index="1" type="array">

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

   <numIndex index="1">s1</numIndex>

</numIndex>

</items>

<default>0</default>

</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>

   <eType>none</eType>

    <TypoScript><![CDATA[

          10 < lib.pageProperty

     ]]></TypoScript>

    <preview></preview>

   <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>

    <TypoScript></TypoScript>

    <proc type="array">

      <int>0</int>

     <HSC>0</HSC>

     <stdWrap></stdWrap>

   </proc>

   <preview></preview>

  </tx_templavoila>

  <TCEforms type="array">

    <label>Kachelhöhe</label>

    <config type="array">

       <type>select</type>

       <items type="array">

        <numIndex index="0" type="array">

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

          <numIndex index="1">h1</numIndex>

       </numIndex>

    <numIndex index="1" type="array">

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

    <numIndex index="1">h2</numIndex>

  </numIndex>

  <numIndex index="2" type="array">

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

  <numIndex index="1">h3</numIndex>

 </numIndex>

 </items>

<default>0</default>

</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>

   <eType>none</eType>

  <TypoScript><![CDATA[

     10 < lib.headerNav

     ]]></TypoScript>

   <preview></preview>

  <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.