How to add a custom field depends on back order option in product edit page(under advance inventory) in magento 2 admin

magento.stackexchange https://magento.stackexchange.com/questions/273818

  •  28-02-2021
  •  | 
  •  

Question

How to add a custom field depends on back order option in product edit page(under advance inventory) in magento 2 admin

enter image description here

Was it helpful?

Solution

Try following way:

app/code/SR/MagentoCommunity/view/adminhtml/ui_component/product_form.xml

<?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">
    <modal name="advanced_inventory_modal">
        <fieldset name="stock_data">
            <container name="container_backorders">
                <field name="backorders" formElement="select" component="SR_MagentoCommunity/js/backorders"/>
                <field name="custom_input" formElement="input">
                    <settings>
                        <scopeLabel>[GLOBAL]</scopeLabel>
                        <label translate="true">Custom Input</label>
                        <dataScope>custom_input</dataScope>
                    </settings>
                </field>
            </container>
        </fieldset>
    </modal>
</form>

app/code/SR/MagentoCommunity/view/adminhtml/web/js/backorders.js

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

    return select.extend({

        initialize: function () {
            this._super();
            var customInput = uiRegistry.get('index = custom_input');
            if (this.value() == 1) {
                customInput.show();
            } else {
                customInput.hide();
            }
            return this;
        },
        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            var customInput = uiRegistry.get('index = custom_input');
            if (value == 1) {
                customInput.show();
            } else {
                customInput.hide();
            }
            return this._super();
        }
    });
});

Now this new field will visible if you select Allow Qty Below 0 from backorder dropdown.

[Update]

You need to change xml for M2.1

app/code/SR/MagentoCommunity/view/adminhtml/ui_component/product_form.xml

<?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">
    <modal name="advanced_inventory_modal">
        <fieldset name="stock_data">
            <container name="container_backorders">
                <field name="backorders">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="component" xsi:type="string">SR_MagentoCommunity/js/backorders</item>
                        </item>
                    </argument>
                </field>
            </container>
                <field name="custom_input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataType" xsi:type="string">number</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="label" xsi:type="string" translate="true">Custom Input</item>
                            <item name="dataScope" xsi:type="string">custom_input</item>
                        </item>
                    </argument>
                </field>
        </fieldset>
    </modal>
</form>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top