Magento – Ui-component form (Adding drop down field)in magento 2

dependencydrop-downsmagento2.2.2ui-formuicomponent

I need to create backend admin form which contains two dropdown fields.But One is dependent on other. One dropdown contains attributes like brand,color etc.. The second one contains associate options of the attribute what you select in the first dropdown. If you select Brand, It should show all the available brands in second dropdown.

If you select color It would show all the available colors in the second dropdown

Is above scenario is possible in ui-component form in magento 2. Please suggest me, Am I need to create ui-component form or php form to do my task. Thanks in advance

Best Answer

Please check example

https://github.com/Ximbo/magento2-dependent-fields

This example uses attributes color and manufaturer (as defined in di.xml). Also it does not cover dataProvider usage and other things related to the ui component. Just about dependent selects.

1) You can implement it by yourself

Take a look on fieldset.js. It can be easily extended with custom behavior. In same maner as fieldset.js extends collapsible.js.

2) You can use InsertListing Ui Component

As was pointed above its js part is a insert-listing.js file.

Sample can be used like this:

<insertListing name="testListingInsert">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="autoRender" xsi:type="boolean">true</item>
            <item name="ns" xsi:type="string">cms_page_listing</item>
        </item>
    </argument>
</insertListing>

Where to put this?

In any Form Ui Component under <fieldset>'s or <container>'s.

What does component do?

It uses namespace ns as a locator for some Ui Component, loads it, and instantiate in place.

cms_page_listing is a name of configured Listing Ui Component.

Magento 2 – How to Add Color Picker in UI Form

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)