5th February 2013
If you're familiar with Chris' Twitter account, you'll know that we're big fans of MODX and recently have been using MIGX for quite a few of our projects. It gives us huge flexibility and has massively cut down our development time when it comes to custom manager pages (CMPs) in MODX. In a nutshell, you can build a fully functioning control panel for your extra without having to get involved with the multitude of Javascript files and PHP controllers that run it.
The main view is a grid - rows and columns of data from your custom database tables. MIGX comes with a number of renderers; ways of formatting your data to make it display in a user friendly format. For example renderImage will show a thumbnail of an image field and renderCrossTick will show a cross or a tick based on a 0 or 1 value.
There comes a point however when the standard renders don't quite cut it. This is where you can get creative. Have a look at this file:
core/components/migx/configs/grid/grid.config.inc.php
This contains the standard renderers which you can use for inspiration. You can go ahead and edit this file, BUT if you update MIGX, it is likely to be overwritten. Luckily, you can add your own functions in a new file. In the same folder, create a file called grid.XXXX.config.inc.php where XXXX is the unique MIGX id you defined when you created the CMP.
Simple! Once the renderer is available to MIGX you will be able to choose it when you're editing your column. If it's not there, you haven't set it up correctly.
Here's a starter for you - this will format the date in a UK friendly format:
$renderer['this.renderUKDate'] = "
renderUKDate : function(val, md, rec, row, col, s) {
var date;
if (val && val != '') {
date = Date.parseDate(val, 'Y-m-d H:i:s');
return String.format('{0}', date.format('d-m-Y'));
} else {
return '';
}
}
";