Create Admin UI Form Dependent Fields in Magento 2

How to Create show two different fields that depends on each others.

This can be done by using Knockout JS.

First we will create UI Form Fields

<field name="field1">
  <argument name="data" xsi:type="array">
    <item name="options" xsi:type="object">PME\FlashSalesPro\Model\Config\Source\DiscountValue</item>
    <item name="config" xsi:type="array">
      <item name="label" xsi:type="string" translate="true">Parent Option</item>
      <item name="component" xsi:type="string">PME_FlashSalesPro/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="discount_percentage">
  <argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
      <item name="label" xsi:type="string">Dicount Percentage</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">percentage</item>
      <item name="visible" xsi:type="boolean">false</item>
    </item>
  </argument>
</field>
<field name="discount_value">
  <argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
      <item name="label" xsi:type="string">Discount Value</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">value</item>
      <item name="visible" xsi:type="boolean">false</item>
    </item>
  </argument>
</field>

DontForget to change above classes and NameSpace according to your Module.

Now Create Options Class in PME\FlashSalesPro\Model\Config\Source\DiscountValue

<?php
namespace PME\FlashSalesPro\Model\Config\Source;

use Magento\Eav\Model\Entity\Attribute\Source\AbstractSource;
use Magento\Eav\Model\Entity\Attribute\Source\SourceInterface;
use Magento\Framework\Data\OptionSourceInterface;

class DiscountValue extends AbstractSource implements SourceInterface, OptionSourceInterface
{

    public function getAllOptions()
    {
        $result = [];

        foreach (self::getOptionArray() as $index => $value) {
            $result[] = ['value' => $index, 'label' => $value];
        }

        return $result;
    }

    public function toOptionArray()
    {
        $options = [
            0 => [
                'label' => 'Please select',
                'value' => ''
            ],
            1 => [
                'label' => 'Percentage',
                'value' => 'percentage'
            ],
            2  => [
                'label' => 'Value',
                'value' => 'value'
            ],
        ];

        return $options;
    }
}

Now Create JS file in MageKnowledge/FlashSalesPro/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 field_percerntage = uiRegistry.get('index = discount_percentage');
            if (field_percerntage.visibleValue == value) {
                field_percerntage.show();
            } else {
                field_percerntage.hide();
            }

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

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

That it.

Run Static content Deploy Command and clear the cache.

About Ejaz Alam

A Software Engineer who Believes in a simple lifestyle and follow a simple logic to make himself better than yesterday. :)

View all posts by Ejaz Alam →

Leave a Reply

Your email address will not be published. Required fields are marked *