1

I'd like to add the standard Magento color picker to a custom grid in the admin panel, as an editable field. I have been able to do this in admin forms using code like the below, but have no idea how to get it to render a color picker in a UI-component grid as opposed to a form?

The UI component seems to require all arguments to be javascript, but the devdocs refer to a color picker element which doesn't actually exist in Magento_Ui/js/form/element:

http://devdocs.magento.com/guides/v2.0/ui-components/ui-secondary-inline.html

My code below works in a form, just want to do something similar in a custom admin grid!

Thanks for any help!

BLOCK:

<?php
namespace Duel\Gallery\Block;

class Color extends \Magento\Config\Block\System\Config\Form\Field {

/**
 * @param \Magento\Backend\Block\Template\Context $context
 * @param Registry $coreRegistry
 * @param array $data
 */

public function __construct(
\Magento\Backend\Block\Template\Context $context, array $data = []
) {
    parent::__construct($context, $data);
}

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
    $html = $element->getLabelHtml() . $element->getElementHtml();
    $value = $element->getData('value');

    $html .= '<script type="text/javascript">
        require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
            $(document).ready(function () {
                var $el = $("#' . $element->getHtmlId() . '");
                $el.css("backgroundColor", "'. $value .'");

                // Attach the color picker
                $el.ColorPicker({
                    color: "'. $value .'",
                    onChange: function (hsb, hex, rgb) {
                        $el.css("backgroundColor", "#" + hex).val("#" + hex);
                    }
                });
            });
        });
        </script>';
    return $html;
}

}

FORM:

$colourpickerRenderer = $this->getLayout()->createBlock(
        'Duel\Gallery\Block\Color'
    );
    $field1 = $fieldset->addField(
        'duel_colour',
        'text',
        [
            'name' => 'duel_colour',
            'id' => 'duel_colour',
            'title' => __('Colour'),
            'class' => 'required-entry',
            'required' => true,
        ]
    );
    $field1->setRenderer($colourpickerRenderer);

In the Grid Listing ui component my columns are laid out as below - for custom component like "select" it seems to expect a javascript based component from the Magento_Ui folder - not sure how to pass my own component (which would include the color picker) in this way? Or should I try and add the javascript mentioned in the answer below to the head of the page?

<column name="gallery_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="label" xsi:type="string" translate="true">Gallery ID</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </item>
        </argument>
    </column>

    <column name="duel_rows">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Duel\Gallery\Model\Config\Source\DuelRowsAndColumns</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Rows</item>
                <item name="editor" xsi:type="string">select</item>
            </item>
        </argument>
    </column>

    <column name="duel_columns">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Duel\Gallery\Model\Config\Source\DuelRowsAndColumns</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Columns</item>
                <item name="editor" xsi:type="string">select</item>
            </item>
        </argument>
    </column>

    <column name="duel_colour">
        <argument name="data" xsi:type="array">

            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="label" xsi:type="string" translate="true">Colour</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                </item>
            </item>
        </argument>
    </column>
0

You can keep below content instead of your ,

$html .= '
        <script>
            require([
            "jquery",
            "jquery/colorpicker/js/colorpicker",
            "domReady!"
            ], function ($) {
            var $el = $("#' . $element->getHtmlId() . '");
                $el.css("backgroundColor", "'. $value .'");

                // Attach the color picker
                $el.ColorPicker({
                    color: "'. $value .'",
                    onChange: function (hsb, hex, rgb) {
                        $el.css("backgroundColor", "#" + hex).val("#" + hex);
                    }
                });
            });
        });
        </script>';

In my "listing" ui component the columns are like below - not sure how to pass custom javascript to one of these columns to include the color picker?

<column name="gallery_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="label" xsi:type="string" translate="true">Gallery ID</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </item>
        </argument>
    </column>

    <column name="duel_rows">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Duel\Gallery\Model\Config\Source\DuelRowsAndColumns</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Rows</item>
                <item name="editor" xsi:type="string">select</item>
            </item>
        </argument>
    </column>

    <column name="duel_columns">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Duel\Gallery\Model\Config\Source\DuelRowsAndColumns</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Columns</item>
                <item name="editor" xsi:type="string">select</item>
            </item>
        </argument>
    </column>

    <column name="duel_colour">
        <argument name="data" xsi:type="array">

            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="sorting" xsi:type="string">asc</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="label" xsi:type="string" translate="true">Colour</item>
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                </item>
            </item>
        </argument>
    </column>
  • Thanks, do you know what is the best way to include the custom javascript? As I don't have a block file (unlike when using forms). My "grid" columns are as above at the moment: – Benghis Ghrant Jul 11 '17 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.