Outsource TemplaVoila TypoScript code

The centralization of code is an important characteristic of a well-structured system. This applies when programming in PHP, as well as in the creation of TypoScript templates.

To get a better overview of TypoScript code of TemplaVoila data structures, you should store it in an external template.

Definition of an element in TemplaVoila

The graphic on the right side illustrates, how an exemplary TemplaVoila element is created. It is named 'field_content' and can contain multiple content elements and flexible content elements (FCEs) of TemplaVoila. The type of the element is selected with the drop down box "Preferences element" (see marking).

Once you assigned the basic settings to the element and saved it, TemplaVoila then generates an XML code that reflects the data structure of the element.

The section of the definition of our - very simple - 'field_content' element is shown below:

In lines 9 to 11, some TypoScript code had been generated. This code is responsible for the output of all content elements that our TemplaVoila element will contain. It can be extended if special formatting or a completely different representation is required.

Let's suppose that there are a lot of page templates and FCEs in our TemplaVoila-based Web site: This can get very complex soon, as the TypoScript code is distributed across many XML data structures.

A clean and better solution to this problem is to remove all TypoScript code from the XML data structures of TemplaVoila and store it in one or more external TypoScript templates. The outsourced code is later inserted into the respective data structure by a single statement.

• The code for all TemplaVoila objects is centralized in one place and thus more clearer.
• You can edit the code with the editor you are familiar with.
• You don't need to modify the XML data structure when changing the TypoScript code.
• You can use inheritance in TypoScript.

Simply create a TypoScript template and put the code from the data structure (everything between the <TypoScript> tags) into it. Replace the number '10' with any descriptive name for the outsourced code.

For FCEs, we use this convention: "lib." is followed by "fce", its name (here: "test"), and the name of the field (here: "content", because of 'field_content'):

lib.fce_test.content = RECORDS
lib.fce_test.content {
  source.current = 1
  tables = tt_content
  wrap = <div class="fce-test">|</div>
}

# ... more TypoScript Code for TemplaVoila elements ...

Just for demonstration purposes, we extended the original code by a "wrap". Of course, much more complex extensions are possible

In the XML data structure you then replace the outsourced code with a simple assignment:

<field_content type="array">
	<tx_templavoila type="array">
		<title>Content</title>
		<sample_data type="array">
			<numIndex index="0"></numIndex>
		</sample_data>
		<eType>ce</eType>
<TypoScript><![CDATA[
10 < lib.fce_test.content
]]></TypoScript>
		<proc type="array">
			<stdWrap></stdWrap>
		</proc>
		<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
	</tx_templavoila>
	<TCEforms type="array">
<!-- further definitions omitted here -->
	</TCEforms>
</field_content>

This approach can be applied to all your flexible content elements and page templates that you create with TemplaVoila. Soon you will notice the benefits of outsourcing TypoScript code from XML data structures.