ModxI 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.


View Comments on “Using Ditto for tabular output”

You can track this conversation through its atom feed.

  1. Chris says:

    Nice tip! I love reading your Modx posts… curious to find out if you've had a chance to look at Revolution yet.

  2. Gregory Smart says:

    Thanks, as far as Revolution goes I have hesitated to dive in so far. It looks amazing, but we have been so busy with MODx projects over this last year that I have had trouble switching gears. I am planning on waiting until the full release, I figure I will finally redesign my site then.

  3. Treigh says:

    Thanks for sharing Greg, I've used similar technique for my events listings.

    I'm also waiting on the full release of Revo to spend some real time on it, though I've already taken a look at most of it.

  4. Carolin says:

    Yet again, found just what I was looking for on your page. Thanks!

  5. Gregory Smart says:

    Glad to hear it!

  6. Michael says:

    Hi Greg. Just one question. It works fine to get a tabular output but I cant ad my own table head. What happens is that modx automatically put in an extra

    . Do you have any ide how to fix this?

    Thanks
    M

  7. Gregory Smart says:

    I just use the Ditto to create the repeating code and then wrap the Ditto call in the opening and closing

    and/or the table headings.

Leave a Reply

You must be logged in to post a comment.

blog comments powered by Disqus