Edit trick

Changes will be published after manual review

Title

Give your trick a describing title. Do not start with «How to...».

Your trick

Keep it short and concise! Markdown is supported.

While the Winter docs do have information on creating a [custom list column type](https://wintercms.com/docs/backend/lists#custom-column-types), 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

```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:

```yaml
columns:
    progress:
		    label: Progress
				type: graph
```

References

Add additional online resources to your trick

+ Add reference

Topics

If your trick fits more than one topic select multiple. Select at least one.

Backend Plugin Development CMS Twig Themes Deployment