5

I am developing new extension in which I need to add color picker and date picker as well in an admin form. I am developing form using a component. Please check sample screenshot of the form field. I want to implement in UI Form. Could any one help me for that?

enter image description here

Thank You in Advance

  • is there anyone who can help? – Sameer Bhayani Aug 16 '17 at 7:16
  • I found your question :) I'll write the answer when I have a free time. It will be like text field (hidden) with a colorpicker and HEX-value of the color. – Siarhey Uchukhlebau Aug 16 '17 at 10:33
  • Hi, could you give answer please – Sameer Bhayani Aug 26 '17 at 12:18
  • This is possible & need to add color picker script. I wil send you 100% solution – Sourav Nov 10 '17 at 3:43
  • I also want to add color picker to category attribute. Could anyone help please. – Vish Nov 25 '17 at 5:54
11

I recently needed to add a color picker to a category form. Here is what wound up working:

Vendor/Module/view/adminhtml/ui_component/category_form.xml

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content">
        <field name="my_color_picker">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Vendor_Module/js/form/element/color-select</item>
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/color-select</item>
                    <item name="label" xsi:type="string">My Color Picker</item>
                    <item name="labelVisible" xsi:type="boolean">true</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">category_form</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

It's essentially a generic text input, but we've defined a unique elementTmpl and component.

Vendor/Module/view/adminhtml/web/js/form/element/color-select.js

define([
    'Magento_Ui/js/form/element/abstract',
    'mageUtils',
    'jquery',
    'jquery/colorpicker/js/colorpicker'
], function (Element, utils, $) {
    'use strict';

    return Element.extend({
        defaults: {
            visible: true,
            label: '',
            error: '',
            uid: utils.uniqueid(),
            disabled: false,
            links: {
                value: '${ $.provider }:${ $.dataScope }'
            }
        },

        initialize: function () {
            this._super();
        },

        initColorPickerCallback: function (element) {
            var self = this;

            $(element).ColorPicker({
                onSubmit: function(hsb, hex, rgb, el) {
                    self.value(hex);
                    $(el).ColorPickerHide();
                },
                onBeforeShow: function () {
                    $(this).ColorPickerSetColor(this.value);
                }
            }).bind('keyup', function(){
                $(this).ColorPickerSetColor(this.value);
            });
        }
    });
});

I'm initiating the color picker with an afterRender callback. In my use case the element was not rendered on the page when my component was initialized, so adding the color picker in the initial method did not work for me.

Vendor/Module/view/adminhtml/web/template/form/element/color-select.html

<input class="admin__control-text" type="text"
       data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        afterRender: initColorPickerCallback,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }"/>

You'll also want to add the color picker css as a layout update, so the filename will vary:

Vendor/Module/view/adminhtml/layout/{frontName}_{controller}_{action}.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="jquery/colorpicker/css/colorpicker.css"/>
    </head>
</page>

End Result (Input Focus State) End Result (Input Focus State)

  • Hi is this work? I tried, its working also but it does not auto fill color code to textbox. Can you please let us know how to solve this? thank you. – Vish Nov 20 '17 at 7:00
  • @Vish see post below – John Mar 19 at 15:58
  • i followed same tutorial but got a problem can u please check [Here](magento.stackexchange.com/questions/275929/… ) – Waqar Ali May 24 at 4:53
8

I added onChange event

            $(element).ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                self.value(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {
                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function(hsb, hex, rgb, el) {
                self.value('#'+hex);
            }

enter image description here

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.