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!

1

0

Your Answer

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