October CMS resources and help articles

Simple and to the point. Optimized by the community.

Create a re-usable custom list column type with assets and partials

3
by BennoThommo, last modified on January 25th, 2021

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

Discussion

0 comments

We use cookies to measure the performance of this website. Do you want to accept these cookies?