Content Component Variables (CCV)

Content component variables (CCVs) are a handy way to capture small pieces of content for use later in the page processing. CCVs make it extremely easy to create and capture modular pieces of content that you can assemble into a final page. CCVs in Fusebox extend the idea of <cf_bodycontent> (old school Fusebox Custom Tag), while utilizing CFSAVECONTENT to capture the Fusebox output code into your contentvariable.

The contentvariable attribute of either the <do> or <include> fusebox circuit elements are used to capture and set the variable with the actions output.

Fusebox includes the capability of calling multiple fuseactions within another fuseaction using the <do/> verb. Calling the <do> verb also includes the ability to "stuff" any output for display into a variable of your choice rather than outputting it at the moment of creation. This attribute of the <do> command, "contentvariable," opens up a world where Web standards become easy.

Imagine a portal system where you want to create menus, and pull in news, articles of interest, and other items. The code for each item can become complex. By separating out each item as fuseactions, we simplify the task by breaking it down to simpler components.

Using CCV's

The following example shows a simple circuit.xml file fuseaction using the contentvariable attribute:

<fuseaction name="Welcome">
<do action="ShowHeader" contentvariable="content.Header"/>
<include template="dsp_Welcome" contentvariable="content.BODY"/>
<do action="ShowFooter" contentvariable="content.Footer"/>
<include template="dsp_ShowContent"/>
</fuseaction>

Running this code would result in an empty page being displayed because we have captured all display data in the 'content' scope. We have set all display data within the following three variables:

  1. content.Header
  2. content.BODY
  3. content.Footer

I have included the 'dsp_ShowContent' page to allow for the display, or output, or these three variables as follows:

<CFOUTPUT>
#content.Header#
#content.BODY#
#content.Footer#
</CFOUTPUT>

This obviously give us some extended capabilities in the placement of your output data, where in previous versions of fusebox you were forced to stack the output.

Tests for the existence of CCVs and setting default values

In the above examples we are relying on the creation of these content variables, but you can also set up some really easy params for your CCVs.

OPTION 1: Param in your circuit.xml

Adding a null set value to your CCVs will ensure they exist in your code. Adding this to the above example would give us:

<fuseaction name="Welcome">
<set name="content.Header" value="" overwrite="false"/>
<set name="content.BODY" value="" overwrite="false"/>
<set name="content.Footer" value="" overwrite="false"/>
<do action="ShowHeader" contentvariable="content.Header"/>
<include template="dsp_Welcome" contentvariable="content.BODY"/>
<do action="ShowFooter" contentvariable="content.Footer"/>
<include template="dsp_ShowContent"/>
</fuseaction>

Of course, this is only a simple example and if you were using this for your Header and Footer you would likely not be doing this as shown.

OPTION 2: Checking variable existence for display

In your display code file, I used 'dsp_ShowContent' above, you can also wrap the output code variables with some logic to ensure they contain your desired data as follows:

<CFOUTPUT>
<cfif IsDefined("content.Header") AND Len(trim(content.Header))>
#content.Header#
</cfif>
<cfif IsDefined("content.BODY") AND Len(trim(content.BODY))>
#content.BODY#
</cfif>
<cfif IsDefined("content.Footer") AND Len(trim(content.Footer))>
#content.Footer#
</cfif>
</CFOUTPUT>

Relating back to normal coldfusion

You can accomplish the same thing in ColdFusion using the <cfsavecontent> tag (in CF5 or CFMX) or the custom tag <cf_bodycontent>, written by Steve Nelson for older versions. In each case you would wrap all the output between the tags and save it and then have your layout at the end of your .cfm file, possibly via a <cfinclude>. However, one of the benefits to using the Fusebox framework is that a lot of the grunt work is already done for you, as the Fusebox Core files performs its magic.

More Information