A table block for concrete5 5.7, with inline editing and asset registering
In this video I demo a block we've created for concrete5 5.7 that allows tabular data to be easily entered and cleanly displayed.
The block mentioned in the video can be downloaded from github and used and modified freely (MIT licensed). It also can be used as a default block in the composer.
It uses the amazing handsontable javascript table editor to do the heavy lifting of the table editing.
Of technical note from the video:
Asset registering
I placed a javascript file and a css file in a js and css folder of the package respectively. Then in the package controller.php file the on_start function looked like this:
public function on_start() {
$al = AssetList::getInstance();
$al->register( 'javascript', 'handsontable', 'js/handsontable.full.min.js', array('version' => '0.12.2', 'position' => Asset::ASSET_POSITION_FOOTER, 'minify' => false, 'combine' => false), $this );
$al->register( 'css', 'handsontable', 'css/handsontable.full.min.css', array('version' => '0.12.2', 'position' => Asset::ASSET_POSITION_HEADER, 'minify' => false, 'combine' => false), $this );
$al->registerGroup('handsontable',
array(
array('javascript', 'handsontable'),
array('css', 'handsontable'),
)
);
}
Then in the block's controller.php file, for the add, edit and composer functions, I simply called to require the asset:
public function add(){
$this->requireAsset('handsontable');
}
public function edit() {
$this->requireAsset('handsontable');
}
public function composer() {
$this->requireAsset('handsontable');
}
Making the block inline editable
In the block's controller.php file, I had to add the following two lines as class variables:
protected $btSupportsInlineEdit = true;
protected $btSupportsInlineAdd = true;
As an inline block doesn't then include buttons to save/cancel/whatever, these needed to be added at the top of the add.php and edit.php files:
<ul class="ccm-inline-toolbar">
<li class="ccm-inline-toolbar-button ccm-inline-toolbar-button-cancel">
<button class="btn cancel-inline"><?php echo t('Cancel'); ?></button>
</li>
<li class="ccm-inline-toolbar-button ccm-inline-toolbar-button-save">
<button class="btn btn-primary save-inline"><?php echo t('Save'); ?></button>
</li>
</ul>
Then finally some javascript was needed to add some behaviours to the buttons. So the following was added in the add/edit view files:
<script type="text/javascript">
$('.cancel-inline').click(function(){
ConcreteEvent.fire('EditModeExitInline');
Concrete.getEditMode().scanBlocks();
});
$('.save-inline').click(function(){
// trigger off any pre-save functions here
$('#ccm-block-form').submit();
ConcreteEvent.fire('EditModeExitInlineSaved');
ConcreteEvent.fire('EditModeExitInline', {
action: 'save_inline'
});
});
</script>
All that was left was for me to hook into the save button function and get it to do some behinds the scenes fetching of the data from the table, putting it into some hidden fields to be saved. The rest of the block is no different than a 'traditional' concrete5 block.
Checkout the package on github and feel free to suggest changes fixes. The block can be used in the composer as well, so it could be used to set up something like a well-structured product page.
Note that the version of handsontable used is the most recent, which doesn't support IE8 and IE9. (you shouldn't be using either to edit your site I reckon anyway!)
-Ryan