Templavoila: template object and data structure

First, you'll connect your HTML template to the Templavoila template object. Templavoila offers a wizard to create a new data structure (DS) and template object (TO). You will not use the wizard, as it will create stuff you don't need, such as a huge page tree and a partial data structure that you need to edit anyway. Furthermore Templavoila might indicate that it misses the fileadmin/templates directory, despite the fact that it does exist. This is a bug and keeps you from starting the wizard. But again; you don't need the wizard, so let's continue!

You go to the filelist, search for your HTML template. In our example it is in the fileadmin/templates folder. Right click on the icon of the HTML template and choose Templavoila, like this:

If you are able to select the Templavoila option from the right-click menu, the "Building data structure" screen fires up, so it's time to get serious. If this does not happen, please clear all caches with the lightning bolt (top right) and reload the CMS. The aim here is to configure all parts of the website that will be provided with content by TYPO3 and Templavoila. The content for those parts can be text, an image, a menu or content generated by extensions. TYPO3Buddy has 9 of those parts, although not all these parts will be used in this tutorial. In Templavoila, each part is called "data element".

In Templavoila you'll start with the part in your HTML template with the id "header_top_left". So the field name of the first Templavoila data element will be "field_header_top_left". You can give the field any name you want, but we'll use the "field_<id_of_html_element>" convention. After having entered the field name, click on the "Add" button:

Next, you'll configure the data element. Click on Configuration to open the configuration form. Title will correspond with the id of the HTML element, in this case "Header top left". Element preset will be "Typoscript object path"; this data element will be provided with content by typoscript. More on this later. Mapping instructions, sample data and mapping rules are not important nor necessary for this example. You could however add "div" to mapping rules, this will exclude other elements from being mapped. The only elements that will be mapped in our example are div elements. Then again; nearly all elements in the HTML template are div elements, so there's no need to exclude other elements explicitly with mapping rules. Then click on the "Add" button:

After clicking the "Add" button, the form changes slightly. You click on "Typoscript", below "configuration", to set the "Object path" for the "Header top left" data element, which will be the same as the field name, except the "field_" part will be replaced with "lib.". In this case the object path will be "lib.header_top_left". You can give the object path any name you want, but we'll stick to the "lib.<id_of_html_element>" convention. Then click on "update" and after that on "cancel/close":

Repeat the same steps for all other Data Elements (of course with different Data Element names, field names and object paths, which correspond with the ids of the divs they link to), until you end up with the following:

Right now, every element has the "typoscript object path" element preset. However, the main content part (field_content_main) will not be provided with content by typoscript only. It needs to show the content that you will put in TYPO3 later.

Edit the Content main (field_content_main) data element by clicking on the pencil next to it and change the element preset to "Page-Content Elements [Pos:0]", click on "Update" and after that on "Cancel/close":

Finally, an overview of the used field names, element presets and typoscript object paths:

Please note: with Templavoila Plus up to version 7.3.3 it seems impossible to update the Typoscript Object path once the element is created. The only way to update the path seems to delete and recreate the entire element.

Next step: link those data elements to corresponding parts in your HTML template...!