I am developing new extension in which I need to add color picker and date picker as well in an admin form. I am developing form using a component. Please check sample screenshot of the form field. I want to implement in UI Form. Could any one help me for that?
Thank You in Advance
I recently needed to add a color picker to a category form. Here is what wound up working:
Vendor/Module/view/adminhtml/ui_component/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">
<field name="my_color_picker">
<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">My Color Picker</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">input</item>
<item name="source" xsi:type="string">category_form</item>
</item>
</argument>
</field>
</fieldset>
</form>
It's essentially a generic text input, but we've defined a unique elementTmpl and component.
Vendor/Module/view/adminhtml/web/js/form/element/color-select.js
define([
'Magento_Ui/js/form/element/abstract',
'mageUtils',
'jquery',
'jquery/colorpicker/js/colorpicker'
], function (Element, utils, $) {
'use strict';
return Element.extend({
defaults: {
visible: true,
label: '',
error: '',
uid: utils.uniqueid(),
disabled: false,
links: {
value: '${ $.provider }:${ $.dataScope }'
}
},
initialize: function () {
this._super();
},
initColorPickerCallback: function (element) {
var self = this;
$(element).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
self.value(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
}).bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
}
});
});
I'm initiating the color picker with an afterRender callback. In my use case the element was not rendered on the page when my component was initialized, so adding the color picker in the initial method did not work for me.
Vendor/Module/view/adminhtml/web/template/form/element/color-select.html
<input class="admin__control-text" type="text"
data-bind="
event: {change: userChanges},
value: value,
hasFocus: focused,
valueUpdate: valueUpdate,
afterRender: initColorPickerCallback,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': noticeId,
id: uid,
disabled: disabled
}"/>
You'll also want to add the color picker css as a layout update, so the filename will vary:
Vendor/Module/view/adminhtml/layout/{frontName}_{controller}_{action}.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="jquery/colorpicker/css/colorpicker.css"/>
</head>
</page>
End Result (Input Focus State)
I added onChange event
$(element).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
self.value(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function(hsb, hex, rgb, el) {
self.value('#'+hex);
}
The best way to add color picker in field is .
<field name="md_label_background_color">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/color-picker</item>
<item name="label" xsi:type="string">Background Color (hex)</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">input</item>
<item name="source" xsi:type="string">category_form</item>
</item>
</argument>
</field>
No need to addd any file!!
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>
Simple way to add colorpicker in admin ui form
Vendor/Module/view/adminhtml/ui_component/custom_form.xml
<field name="background_color" sortOrder="2" formElement="colorPicker" component="Magento_Ui/js/form/element/color-picker">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">category_slider</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label translate="true">Slider background color</label>
<dataScope>background_color</dataScope>
<elementTmpl>ui/form/element/color-picker</elementTmpl>
</settings>
<formElements>
<colorPicker class="Magento\Ui\Component\Form\Element\ColorPicker">
<settings>
<colorFormat>hex</colorFormat>
<colorPickerMode>full</colorPickerMode>
</settings>
</colorPicker>
</formElements>
</field>
