blusol.io - ColdFusion and VueJS Playground

Flexible and Advanced ContentBox Layouts for Custom Modules

UPDATE: Check out ColdBox CBT instead.

https://github.com/coldbox-modules/cbox-cbt

Origional Post:

I had an epiphany today trying to figure out a flexible way to re-use a ContentBox module in such a way that each view could be customized per client without the need of creating hundreds of individual "view" files.

If you have not already created a custom ContentBox Themed Module let me suggest you stop what you're doing and head over to https://www.ortussolutions.com/blog/the-12-tips-of-contentbox-christmas-day-6-themed-modules and get started.

Sample Handler:

component {

	// DI
	property name='ContactService' inject='ContactService';
	property name='MessageBox' inject='MessageBox@cbMessageBox';

	function index() {
		list( argumentCollection=arguments );
	}

	function list(event,rc,prc){
		// Query our data just like normal.
		prc.qContacts		=	contactService.list();
		
		// To use the data in ContentBox as a dynamic variable we need to flatten things out a bit.
		prc.demoName 		=	prc.qContacts.name;
		prc.demoAddress1 	=	prc.qContacts.address1;
		prc.demoCity 		=	prc.qContacts.city;
		prc.demoState 		=	prc.qContacts.state;
		prc.demoZip 		=	prc.qContacts.zip;
		cbHelper.prepareUIRequest('pagesNoHeader');
		event.setView( "home/list" );

}

Sample View home/list.cfm

<cfoutput>
#cb.contentStore('demo-list', 'ContentStore item not found')#
</cfoutput>

The above view will look for a ContentStore item slug called demo-list.

ContentBox ContentStore demo-list

This is where you will create the layout for your data that can be edited and modified without having to edit the core view files. This concept is a work in progress, but it does work and I have a feeling it will be expanded on in the future.

<div class="row">
	<div class="col-md-8">
		<h1>$ {prc:demoName}</h1>
		$ {prc:demoAddress1}<br />
		$ {prc:demoCity},&nbsp; $ {prc:demoState} $ {prc:demoZip}<br />
	</div>
	<div class="col-md-4">
		<h4>Custom/Editable Section</h4>
		<p>This section can contain specific information outside of the module.</p>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		{ {{RenderView view='home/demoView' module='myModule' cache='false'}} }
	</div>
</div>

RenderView demoView

Renders the above view.

Live Demo

Below is an example of the finished result I've been working on:

Editor Preview

NOTE: This was put together quickly so I wouldn't forget about it, check back later for updates

Blog