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

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

• Magento2 ColorPicker

Answer 2

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>