Rapid Prototyping in MODX CMS

Jul 10, 2015

What's it for?

Let's say you're dumping markup into MODX, but you're not building a fully functional site yet—it's more of a prototype. You're going to get client signoff at this early stage of development to ensure you're delivering everything they need and want.

Most likely you'll just make some static files and commit to a repo, etc. On the other hand, if you're a little kooky like me, you might want to do some or all of that work inside MODX. Smart and good developers have called me crazy for this but hey, I like using MODX as my "IDE" of sorts.

So here I am typing in a few <li> elements to make a menu when an idea comes to me for a rapid prototyping tool in MODX: a Snippet that iterates over some values and renders them with a template—inline. MODX makes this kind of thing easy, and so the Snippet was a relatively simple thing:

Break it down

The Snippet takes a few parameters:

  • limit — This tells it how many iterations you want.
  • tpl — This defines the markup you want to use for each "virtual item". You don't specify a Chunk here as is the norm with MODX Snippets. We're going for rapid prototyping, so no making new objects when we're not even sure we'll need them in the end, right?
  • outputSeparator — The regular MODX fare, for separating the item in the output.
  • delimiter — In case you want to customize the delimiter between the values you're going to provide.

But wait, how do you provide the values to insert into the tpl? Well we populate a $properties array with every element from $scriptProperties that isn't reserved for the Snippet itself, so you can pass an arbitrary number of parameters with values to insert.

By default the delimiter is a comma so you pass values in like this, for example:

[[prototype? 
    &limit=`8`
    &tpl=`<li><a href="[[+link]]">[[+text]]</a></li>`
    &link=`http://example.com/`
    &text=`Link Text A,Link Text B,Link Text C,Link Text D,Link Text E,Link Text F,Link Text G,Link Text H`
]]

The HTML output of this Snippet call would be:

<li><a href="http://example.com/">Link Text A</a></li>
<li><a href="http://example.com/">Link Text B</a></li>
<li><a href="http://example.com/">Link Text C</a></li>
<li><a href="http://example.com/">Link Text D</a></li>
<li><a href="http://example.com/">Link Text E</a></li>
<li><a href="http://example.com/">Link Text F</a></li>
<li><a href="http://example.com/">Link Text G</a></li>
<li><a href="http://example.com/">Link Text H</a></li>

Remember, you can map any Snippet parameter to a matching placeholder in the template, except the ones required by the Snippet itself. Another gotcha to be aware of is that you can't put output modifiers inside the tpl. You can however put output modifiers in one of the properties that lists values.

Also note that MODX will try to parse any nested tags before the Snippet even executes, so make sure that your tpl placeholders aren't being set elsewhere in the requested Resource/Template.

If you can live with those limitations, and you have the admittedly rare use case of needing this, it does make things go much more rapidly...

Another benefit is that your prototype markup becomes more compact and easy-to-read. When it comes time to add real data, it's dead easy to make a tpl Chunk from the value in the tpl property, and just call it with a "real" Snippet!

Yay for MODX :D