0

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?

1

3 Answers 3

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>
2
1

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>

enter image description here

1
  • it's working fine. Commented Nov 8, 2022 at 7:03
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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