1

I need to add a colour picker as a admin form field - I have added what I believe is needed to get the JS working but it's still throwing errors and showing me no form field. The color picker I'm trying to use is: http://www.jar2.net/projects/jquery-wheelcolorpicker

I have declared my form field like:

 <field name="colour">
            <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">Colour</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">roundel</item>
                </item>
            </argument>
        </field>

The JS form element file looks like:

require(['jquery','colorwheel'],function($){
    $(window).load(function() {
        $('#color-wheel-picker').wheelColorPicker();
    });
});

The colorwheelpicker minified JS file is in the same directory as the above file. I can see it being added to the head OK.

And I have declared my require config like this and its just sitting in Vendor/Module/view/adminhtml:

var config = {
    map: {
        '*': {
            colorwheel: 'Lewis_Roundel/js/form/element/jquery.wheelcolorpicker-3.0.2.min'
        }
    }
};

But when I rebuild the admin theme, I received this error and no form field at all, let alone a color wheel:

require error

Anyone have any ideas? My JS knowledge is not up to scratch!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.