Mura CMS: Display Objects Inside Display Objects

August 30, 2017

Among other changes, Mura 7 includes several new updates to Display Objects. One of the new features we learned about (and helped QA with Blue River while working on a project with them) was the ability to add Display Objects inside other Display Objects. It's actually quite simple, and gives you a lot of flexibility for more advanced UI options.

For example, let's say I have a Display Object called “Musician List Widget” that lists out all the musicians in a database table (or content feed, or whatever). As part of that UI, I want to have a “detail” Display Object that can be rendered from within Musician List Widget. I'd set up the directory structure like so:

Mura CMS Display Object folder structure

So my MusicianListWidget object is basically a standard Display Object: it's got a config.xml.cfm file, a configurator.cfm and an index.cfm as we'd expect. The new piece is that /display_objects folder that also lives inside MusicianListWidget. Notice that inside there I have “MusicianDetailItem”, which is its own Display Object: complete with its own config.xml.cfm, index.cfm (and in this case a contentRenderer.cfc, which is optional...it just depends on what you want your Display Object to do).

So how do you get the MusicianListWidget to render the MusicianDetailItem? It's literally one line of code!

#$.dspObject( object='MusicianDetailItem', objectParams=objectParams )#

So let's say your MusicanListWidget grabs entries out of a content feed or a database query or some such thing, and you need to loop over them, rendering new MusicianDetailItems for each entry:

<cfloop query='qryMyContentFeed'>
#$.dspObject( object='MusicianDetailItem', objectParams=objectParams )#
</cfloop>

Boom, done. And because it's all contained inside the same directory structure, it's all very portable too. To get both the MusicanListWidget and the MusicianDetailItems to work on a site, all you have to do is drag the MusicianListWidget onto your page, and all the Detail functionality comes along with it automatically.

Note: if you're not on the latest version(s) of Mura 7 this may not work correctly; make sure you do a site and core update to get some of the more recent changes and bug fixes.

Enjoy,
Nolan