Configuring Extension Output with TypoScript for Extensibility and Reusability

By: Lucas Thurston

Here's how I would approach this abstraction. Let's say hypothetically that I'm creating two list extensions at the same time for two different clients and which have two similar sets of requirements but completely different presentation and output. The first extension is a list of upcoming events with the following fields: date/time, location, short description, cost (if any). The second extension is a staff listing extension with these fields: name, job title, years with the company and a photo. Apart from the database query, both extensions do the same thing: get records, process them for output and push them into an HTML template. The logic that we want to share is the logic that manages the output, taking the database values, turning timestamps into readable dates, filenames into img tags, etc. Sounds like a big job, right? It is, but the solution is right in front of us as TYPO3 developers. The answer is to have TypoScript configure all (or the vast majority of) output.
Here's how we do this (probably a little refresher course for most of you):
1) Create a new extension (with or without database tables defined depending on how we see the extension being used).
2) In our new extension add three methods, 1. a getRecords() method which gets our records and puts them in an array, 2. a getMarkerArrays() method which renders marker arrays, and 3. getOutput() which takes the marker arrays and pushes them into the template. I'll give more details about these methods in a moment.
3) Create some TypoScript for the fields you want to output, setting all the field values to the database field from which the data comes and if conditions to make sure we have a value we want to display. For example:
  plugin.tx_ciclist_pi1 { outputCobjs { listView { datetime = TEXT datetime { if.isTrue.field = datetime field = datetime strftime = %m/%d/%y } location = TEXT location { if.isTrue.field = location field = location } photo = IMAGE photo { file = fileadmin/imgs/default.gif import { field = photo listNum = 0 } } } } }

  Note how we cover our bases on the photo object by putting a default image in there in case the photo field is empty. The if.isTrue conditionals on the text fields ensure that the output won't be rendered at all if it's not what we want (there's nothing worse than seeing 1969 as a date when it's obviously incorrect).