I am currently using magento2.1.3 and am trying to create an colorpicker attribute. I have created the install script and it has ran successfully showing the attribute in the db. I have added the below code into a category_form.xml file

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">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Content</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">99</item>
        <field name="cat_bannercolour">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">category</item>
                    <item name="label" xsi:type="string" translate="true">Category Banner Colour</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">40</item>

My problem is that I don't know where to go from here. I have seen other colorpicker examples for grids but they seem to use a frontend_model which doesn't seem to be available in the ui_component. Any help would be great.


1 Answer 1


In my case i have to use color picker as a one of the cateogry attribute using ui componant.so i have followed the below steps

Step 1- Create a category attribute with some name (ex:-color_picker_attribute) enter image description here

Step 2:- Add below field in app/code/your vendor/yourmodule/view/adminhtml/ui_component/category_form.xml

Input:- enter image description here

Output:- enter image description here

  • Please don't upload images of code. Commented Nov 20, 2023 at 17:53

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.