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.

  • Treigh
    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.
  • Chris
    Nice tip! I love reading your Modx posts... curious to find out if you've had a chance to look at Revolution yet.
  • 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.
blog comments powered by Disqus