Magento-2.1 – Create Custom Form Component Field Based on Another Field Value

magento-2.1ui-formuicomponent

I have one field select which has some options. One of them will have some fields depend on value, another field will hidden. I have copied and extended component js for my field but it didn't work or I did it wrong way. Ui component supports this feature? How I can achieve this?

Below is what I have done:

<field name="field1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Field name</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="dataScope" xsi:type="string">field1</item>
            <item name="component" xsi:type="string">Pathto/js/form/element/options</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="field2Depend1"></field>
<field name="field3Depend1"></field>

jsComponent js/form/element/options:

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select) {
    'use strict';

    return select.extend({

        onChange: function () {
            this.enableDisableFields();
        },

        /**
         * Enable/disable fields on Coupons tab
         */
        enableDisableFields: function () {
            // code check field
        }
    });
});

Best Answer

Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):

<field name="field1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Parent Option</item>
            <item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="dataScope" xsi:type="string">field1</item>
            <item name="sortOrder" xsi:type="number">210</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="field2Depend1">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Field 1</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">220</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">2</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>
<field name="field3Depend1">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Field 2</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">230</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">0</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>

Where:

The child elements visibility is set by default as false;
The visibleValue - is field1 value when element should be visible;

Namespace\ModuleName\Model\Config\Source\Options

namespace Namespace\ModuleName\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class Options implements ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        $options = [
            0 => [
                'label' => 'Please select',
                'value' => 0
            ],
            1 => [
                'label' => 'Option 1',
                'value' => 1
            ],
            2  => [
                'label' => 'Option 2',
                'value' => 2
            ],
            3 => [
                'label' => 'Option 3',
                'value' => 3
            ],
        ];

        return $options;
    }
}

app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';

    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            console.log('Selected Value: ' + value);

            var field1 = uiRegistry.get('index = field2Depend1');
            if (field1.visibleValue == value) {
                field1.show();
            } else {
                field1.hide();
            }

            var field2 = uiRegistry.get('index = field3Depend1');
            if (field2.visibleValue == value) {
                field2.show();
            } else {
                field2.hide();
            }

            return this._super();
        },
    });
});

Result:

Value 0 selected:

Value 1 selected:

Value 2 selected:

Value 3 selected:

PS: Possibly it not the best solution, but it shall help you

Related Solutions

Magento 2.1 – Create Custom Modal UI Form Component

[UPDATED MY ANSWER]
etc/adminhtml/di.xml
Add modifier to add custom form modal

<virtualType name="Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="item-form-modal" xsi:type="array">
                <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Item</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
    </arguments>
</virtualType>

Button action for render modal

return [
        'label' => __('Add New Item'),
        'class' => 'primary button-add-item',
        'data_attribute' => [
            'mage-init' => [
                'Magento_Ui/js/form/button-adapter' => [
                    'actions' => [
                        [
                            'targetName' => 'item_form.item_form.item_form_modal',
                            'actionName' => 'toggleModal'
                        ],
                        [
                            'targetName' => 'item_form.item_form.item_form_modal.insert_item_form',
                            'actionName' => 'render'
                        ]
                    ]
                ]
            ]
        ],
        'on_click' => '',
        'sort_order' => 20
    ];
}

File Modifier where i defination form

return $this->arrayManager->set(
        'item_form_modal',
        $meta,
        [
            'arguments' => [
                'data' => [
                    'config' => [
                        'isTemplate' => false,
                        'componentType' => 'modal',
                        'options' => [
                            'title' => __('New Item'),
                        ],
                        'imports' => [
                            'state' => '!index=insert_item_form:responseStatus'
                        ],
                    ],
                ],
            ],
            'children' => [
                'insert_item_form' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'label' => '',
                                'componentType' => 'container',
                                'component' => 'Magento_Ui/js/form/components/insert-form',
                                'dataScope' => '',
                                'update_url' => $this->urlBuilder->getUrl('mui/index/render'),
                                'render_url' => $this->urlBuilder->getUrl(
                                    'mui/index/render_handle',
                                    [
                                        'handle' => 'megamenuadmin_item_form',
                                        'store' => $this->_storeManager->getStore()->getId(),
                                        'buttons' => 1
                                    ]
                                ),
                                'autoRender' => false,
                                'ns' => 'item_add_form',
                                'externalProvider' => 'item_add_form.item_add_form_data_source',
                                'toolbarContainer' => '${ $.parentName }',
                                'formSubmitType' => 'ajax',
                            ],
                        ],
                    ]
                ]
            ]
        ]
    );

item_form_modal has child element form ui insert_item_form insert via ajax. Handle layout megamenuadmin_item_form contain ui-form. Between children [] you can add any components such as: fieldsets, fields, selects, inputs v.v or ui-form like i do

layout megamenuadmin_item_form

 <page>
    <referenceContainer name="content">
     <uiComponent name="item_add_form"/>
   </referenceContainer>
 </page>

form ui-component item_add_form

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="deps" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="namespace" xsi:type="string">item_add_form</item>
    </item>
    <item name="buttons" xsi:type="array">
        <item name="cancel" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Cancel</item>
        <item name="save" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Save</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
    <item name="config" xsi:type="array">
        <item name="ajaxSaveType" xsi:type="string">simple</item>
    </item>
</argument>
<dataSource name="item_add_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Module\Model\Item\DataProvider</argument>
        <argument name="name" xsi:type="string">item_add_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">menu_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="url" path="megamenuadmin/item/save"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
    </argument>
</dataSource>
<fieldset name="filedset1">
    Fields go here
</fieldset>
<fieldset name="fieldset2">


</fieldset>
</form>

Magento 2.1 – UI Component Image Upload Form

The Catalog model image uploader is a bit abstract. It can be used to upload images/files basically anywhere. It does not have a path and a tmp path set for image uploading.
You can create a virtual type based on it and use that one.
You can do that by adding this in the di.xml file of your module.

<virtualType name="[entity]ImageUploader" type="Magento\Catalog\Model\ImageUploader"><!-- replace [entity] with your entity name -->
    <arguments>
        <argument name="baseTmpPath" xsi:type="string">path/to/upload/tmp</argument>
        <argument name="basePath" xsi:type="string">path/to/upload</argument>
        <argument name="allowedExtensions" xsi:type="array"><!-- you can add here file extension restrictions -->
            <item name="jpg" xsi:type="string">jpg</item>
            <item name="jpeg" xsi:type="string">jpeg</item>
            <item name="gif" xsi:type="string">gif</item>
            <item name="png" xsi:type="string">png</item>
        </argument>
    </arguments>
</virtualType>

and then you need to tell magento that your image upload controller uses this virtual type to upload the file. This virtual type instance is basically an instance of the catalog image uploader but with baseTmpPath, basePath and allowedExtensions set to certain values.

Add this also to the di.xml of your module

<type name="[Namespace]\[Module]\Controller\Adminhtml\[Entity]\Image\Upload">
    <arguments>
        <argument name="imageUploader" xsi:type="object">[entity]ImageUploader</argument><!-- again, replace [entity] with the name of your entity. Make sure it matches the name of the virtual type above. -->
    </arguments>
</type>

Best Answer

Related Solutions

Magento 2.1 – Create Custom Modal UI Form Component

Magento 2.1 – UI Component Image Upload Form

Related Topic