Author Image

Ruud Silvrants

Developer

TYPO3 Wizard. Also magical with Web applications. Always want to help. Has finally domesticated Dachshund Meggie.

Blog Header

Dataprocessing in TYPO3 Fluid

Are your designers a bit handy with fluid but not with advanced typescript? Do you also get tired of extra viewhelpers just to get your data from tt_content or pages structured? Are you curious about the way TYPO3 fluid styled content offers the data to your fluid templates? Then learn more about data processing in TYPO3!

Data processing are php classes that make it easier to manipulate or add your data before it is passed to your fluid templates. Preparing the data. This method of preparation ensures that the data is available in fluids in the desired manner, which promotes clarity. In addition, it requires less typoscript to generate certain elements. This makes it easier, especially for beginners, to get more out of TYPO3. 

How does a TYPO3 data processor work?

We take an FilesProcessor as an example. This processor retrieves all files from a content element (CE) and passes them on to your Fluid template. The configuration for the processor is defined in TypoScript as follows.

tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
    templateName = Textmedia
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
           references.fieldName = assets
           as = bestanden
        }
        #other processors
}

Configure in TypoScript

The first part is configuring the CE in TypoScript. An array with key `dataProcessing` and the desired processors can be added to this configuration. This array contains a list of class references (using full name spaces), each containing the interface menuProcessor. This menu will implement all underlying pages as a directory with a deep `DataProcessorInterface` implement.

Array

Each data processor can also contain an array of settings, some of which are mandatory. Which settings are required and which ones are possible depends on the processor. Some data processors may even contain an array of data processors that are then executed over the data. The documentation of each processor describes which settings are possible and is often well described in the php class itself.

Settings filesProcessor

The settings for these filesProcessor, to retrieve the files and give them to your CE, are `references.fieldName` and` as`. The `references.fieldName 'indicates which field in your database contains the references to your files. `As` indicates which variable the data should be available in your Fluid template. By default, this variable is `assets`, but it is desirable to adapt it to a meaningful variable for which it is used.

MenuProcessor

Another processor that I do not want to leave untouched is the `menuProcessor`. This processor simplifies in my opinion making a menu in TYPO3 substantial. Especially if you do not have much experience in typoscript. To create a menu of pages with corresponding images:

Configuration of the menu in TypoScript:

page.10 {
   dataProcessing {
       10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
       10 {
           special = directory
           special.value = your_menu_pid
           levels = 2
           as = navigation
           dataProcessing {
               10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
               10 {
                   references.fieldName = media
               }
           }
       }
   }
}

In brief; the configuration above configures the page to be one of the 2 levels for the pid `your_menu_pid`. This data is added to your page as the variable `navigation` and for each underlying page the images are retrieved by means of the FilesProcessor. For more information about the configuration of the menu see link:https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html#special-directory

 

To be able to build the menu now you can use the next fluid snippet in your template, and you have a simple menu.

<f:if condition="{navigation}">
   <ul>
       <f:for each="{navigation}" as="menuItem">
           <li>
               <a href="{menuItem.link}" target="{menuItem.target}">
                   {menuItem.title}
               </a>
               <f:if condition="{menuItem.children}">
                   <ul class="dropdown-menu">
                       <f:for each="{menuItem.children}" as="childMenuItem">
                           <li>
                               <a href="{childMenuItem.link}" target="{childMenuItem.target}">
                                   {childMenuItem.title}
                               </a>
                           </li>
                       </f:for>
                   </ul>
               </f:if>
           </li>
       </f:for>
   </ul>
</f:if>

An overview of the current data processor in TYPO3 (version 8.7 LTS) can be found in the typo3 core extension `frondend`:

CommaSeparatedValueProcessor
DatabaseQueryProcessor
FilesProcessor
GalleryProcessor
MenuProcessor
SplitProcessor

Read more