Using Ditto for tabular output

I was recently developing a MODx site and had a page in which the customer wanted to display a table with staff contact information (30-40) that could be easily maintained by the end user. I decided to use the Ditto &tpl and &tplAlt to generate most of the table code following the scheme below:

1. Create a “Personnel” directory (uncheck display in menu and searchable) right below the page onto which the table would be displayed.
2. Create a new template, this will allow you to use the ManagerManager plugin to hook into the template and display only the fields you want the user to see when they navigate into the “Personnel” pages.
3. Set your “Personnel” page to use the new template. Although no data from this page is displayed any pages created below it (which the end user will do) will by default follow the parent’s template choice.
4. Now, you will need your specific fields which will coincide with your table heads. Just create new Template Variables (TV) for this purpose and then assign them to the template you created above and use ManagerManager to hide all unused fields. Note: You will need to use the “pagetitle” field for either last or last, first name. Once again, you can use ManagerManager to change the text that is displayed to rename the field for the end user.

At this stage you should have everything you need to create your “Personnel” pages en masse, now all you have to do is create the table code, the Ditto call and the associated TPLs. As I mentioned above, you can use the Ditto &tpl and &tplAlt because they can generate alternating code. This will allow you to use your CSS document to style different background colors for the alternating table rows by taking advantage of code (and your Ditto call) similiar to this:

<table>
<tr>
<th>Name</th>
<th>Facility</th>
<th>Telephone</th>
<th>City</th>
<th>County</th>
</tr>

[!Ditto? &startID=`20` &tpl=`tablerowTPL` tplAlt=`tablerowTPL2`!]
</table>

And then &tpl chunk:

	<tr class="d0">
		<td>[+pagetitle+]</td>
		<td>[+facility+]</td>
		<td>[+telephone+]</td>
		<td>[+city+]</td>
		<td>[+county+]</td>
	</tr>

And then &tplAlt chunk:

	<tr class="d1">
		<td>[+pagetitle+]</td>
		<td>[+facility+]</td>
		<td>[+telephone+]</td>
		<td>[+city+]</td>
		<td>[+county+]</td>
	</tr>

I realize that while this solution may not get an A+ for elegance it is a quick and easy implementation. The end user data input is completely separated from the table/page code and allows them a “systematic” means for updating important, tabular information. It is also worth noting that the data is searchable using the AjaxSearch snippet and if your structure your template appropriately each row’s data can be rendered as a single page when found through the site search feature.