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}, $ {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
