Create a Flexible Content Text-Switcher

This is a neat trick for creating a dynamic javascript text-switcher as a Flexible Content Element on your site.

Creating the HTML Template

Download text-switcher.html file linked below. Upload this file to an area in your TYPO3 fileadmin folder.

Create the TemplaVoila Flexible Content Element

• Create the Data Structure &  Mappings:
  • Click on the icon of your HTML file and select TemplaVoila from the the context menu
  • Map the ROOT element to the second <div> tag in your HTML file (<div id="text-switcher">)
  • Then, create a new field called content01
    • Mapping Type should be Element.
      Editing Type should be Text area for bodytext
      [Advanced] Mapping rules should be set to *:inner
    • Click the Update button,  then the Map button to map this field to the first div with the class “dyncontent” (<div class="dyncontent" style="display:block">)
    • Click the Set button to set the mapping
  • Next, create a field called "field_contentcontainer"
    • Mapping Type should be "Container for elements"
    • Click the "Update" button.
    • Then, click the checkbox to "Make this container a SECTION!"
    • Fill in the remaining content and update.
    • Map the container to the plain div tag (<div>) following the one you mapped the previous element to - when you set the field, set the Action to "INNER"
  • After creating the Container element, you'll notice a new field has become visible as a "subfield" of the container element.
    • In this new "subfield" creat a field named "do_message" ("do" stands for Data Object).
    • Mapping type should be "Container for elements" but once you click the "Update" button, do not select the checkbox.
    • Map this element to the second div with class "dyncontent" (<div class="dyncontent">)
    • When setting this field, its Action should be set to "OUTER".
  • You'll notice now that there is yet another (third) field to add elements to the Data Structure
    • In this new field, create a new element with fieldname "field_message".
      • Mapping Type for this element should be “Element.”
        Editing Type should be set to “Text area for bodytext.”
        Leave the [Advanced] Mapping rules blank and click the Update button
      • Map this element to the second div with class “dyncontent” but when you Set the field, be sure the Action is set to “INNER”
    • Click the Save button and use the CREATE area to enter your information
      • Enter a title for your DS/TO such as “Flex – Text Switcher”.
      • Also, be sure you set the Template Type to Content Element and select your storage folder from the Store in PID selector box.
      • Click the “CREATE TO and DS” button to save your Flexible Content Element
• Editing the TemplaVoila Data Structure XML
  • To make your Text-Switcher Rich Text Editor compatible, you will need to tweak the Data Structure XML a bit. See text-switcher-dsxml.txt file linked below for the example Data Structure XML.
  • Go to the TemplaVoila Control Center by clicking on “TemplaVoila” under the Web modules on the left of your TYPO3 admin interface. If you are not already in your Storage Folder, you'll be prompted to select the Sysfolder where your TemplaVoila Temlates are located.
  • Select the Flexible CE tab at to the top of the screen.  locate your Flexible Content Text Switcher in the list – it will be listed under the name you saved it as. Click the edit icon next to the DATASTRUCTURE (DS) record (NOT the Template Object – TO)
  • You will now be able to edit the Data Structure record, including its XML
  • To see the added / altered XML, download the text-switcher-dsxml.txt file linked below.

Add the Text Switcher to a Page

• Click on the page you want to add the text-switcher to and select “Page” from the Web modules on the left of the TYPO3 admin interface.

• Click the Create New Record icon .
• Scroll down to the Flexible Content area where your Text Switcher should be listed:
• Select this Flexible content item.
  • NOTE: If you do not see it in the listing, simply select “Regular text element” from the top of the list and once the edit screen loads select “Flexible Content” from the Pagecontent Type selector box. Then select your Text Switcher from the Data Structure dropdown. Click the Save button.
• Add a message to the first field labelled “First Message to display”. Text must always be present in this field, or your text switcher will go blank for 5 seconds each time it cycles.
• To add an additional message, select “NEW 'Message element'” from the selector box labelled “Container for subsequent messages”. Click the Save button
• A new text field will appear where you can type another text message. Continue adding New text messages in this way until you are finished.
• Be sure to click the Save button in between to record your changes.
• To move a text message further up or down in the line-up, click the check box next to the up or down arrow to the left of the message and click the Save button. To delete a text message, click the check box next to the trash can and click the Save button.
• Now, when you preview your page, you should see your text switcher in action!

To download a PDF version of this tutorial with screenshots, select the doc_flex_content_textswitcher-1_0_1.pdf file below. To see a visual of the Flexible Content template mappings, select the mappings.jpg file below.