How to add Color Picker in Admin Ui Component in Magento 2?

Question

My file path is

app/code/ColorPicker/Sample/view/adminhtml/ui_component

How can I add color picker in Admin Ui Component in Magento 2?

Answer 1

There is already a ColorPicker Component defined in the core.

vendor/magento/module-ui/view/base/ui_component/etc/definition/colorPicker.xsd

Try adding this to your form:

<colorPicker name="colors_picker" class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/color-picker" template="ui/form/element/color-picker" provider="${ $.parentName }">
    <settings>
        <label translate="true">Color</label>
        <colorFormat>HEX</colorFormat>
        <colorPickerMode>full</colorPickerMode>
        <dataScope>colors_picker</dataScope>
    </settings>
</colorPicker>

Answer 2

Magento has default color picker element.

You can use that by following below xml code for your ui_component form.

<field name="FIELD_NAME">
                 <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string">Select Color</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">colorPicker</item>
                        <item name="source" xsi:type="string">REPLACE_YOUR_SOURCE_HERE</item>
                        <item name="colorFormat" xsi:type="string">hex</item>
                        <item name="colorPickerMode" xsi:type="string">full</item>
                    </item>
                </argument>
            </field>

Answer 3

I have made one module in which colorpicker css and images included.

• Magento2 ColorPicker