Create a re-usable custom list column type with assets and partials
4
While the October docs do have information on creating a custom list column type, they unfortunately use direct method callbacks, which can make it tricky to use assets for the column type.
By leveraging a List widget event and following the instructions below, you can create a complex custom list column type that supports asset injection into the controller, as well as partial rendering.
For the purposes of this trick, we are creating a graph list column type within the Acme.Demo plugin.
/plugins/acme/demo/columntypes/Graph.php
<?php namespace Acme\Demo\ColumnTypes;
use Event;
class Graph
{
use \System\Traits\ViewMaker;
use \System\Traits\AssetMaker;
/**
* @var \Backend\Classes\Controller Controller instance
*/
protected $controller;
/**
* @var bool Has the column type been rendered?
*/
protected $rendered = false;
/**
* @var bool Has the CSS been injected?
*/
protected $addedCss = false;
/**
* Constructor.
*/
public function __construct()
{
// Inject CSS into controller, only if the column type is actually used
Event::listen('backend.list.overrideColumnValue', function ($listWidget) {
if ($this->rendered && !$this->addedCss) {
$this->controller = $listWidget->getController();
$this->addCss(
'/plugins/acme/demo/columntypes/graph/assets/css/graph.css',
'Acme.Demo'
);
// Add any additional CSS/JS assets here as required.
$this->addedCss = true;
}
});
}
/**
* Renders the "graph" column type.
*
* This is the callback which is registered in `registerListColumnTypes` in the Plugin definition file.
*
* @param mixed $value
* @param \Backend\Classes\ListColumn $column
* @param \October\Rain\Database\Model $record
* @return array|string
*/
public function renderValue($value, $column, $record)
{
$this->rendered = true;
return $this->makePartial('graph', [
// Add params for partial here
]);
}
}/plugins/acme/demo/Plugin.php
// ...
public function registerListColumnTypes()
{
return [
'graph' => [
new \Acme\Demo\ColumnTypes\Graph,
'renderValue',
],
];
}
// ...You can now create the following partials and assets:
/plugins/acme/demo/columntypes/graph/_graph.htm- Contains the HTML content to output for the column./plugins/acme/demo/columntypes/graph/assets/css/graph.css- Contains the CSS content that will be injected into the controller and added to the<head>.
The custom column type will now be available for use in all list widgets under the graph type.
For example:
columns:
progress:
label: Progress
type: graph
There are no comments yet
Be the first one to comment