Magento has provided a powerful tool of UI Components to render UI elements like input field, select field, table etc. Many times we face the requirement of having an element dependent on the value of another field in our UI form. We can achieve this without writing extensive js script. Among the varying nodes that Magento UI components provide to apply different features on our ui element, one such node is “switcherConfig” which helps solve our problem of dependency between fields.
As per magento documentation switcherConfig is “Configuration of subscription to a property change of the component that is declared as “target” setting.”
Basically switcherConfig is used to define rules on how we can handle different actions on a target ui element, based on the values of another element. The action callback can be anything, eg-:- we can hide or show the target element or we can make them enable or disabled.
In this blog I would show how we can show or hide elements based on the value of another field element.
Show/Hide ui elements based on the value of another field
In my UI form I have
- A base field “service_type ” which is a select type element
And dependable fields are :-
- “home_service_charge ” input field to define the charges for home service and
- “branch_address ” a link button to open my pop-up model to define the branch address
So my rules for these fields are :-
- Show “home_service_charge ” only when the “service_type ” is “home ”
- Show the “branch_address” button only when the “service_type ” is “branch ”
1.My base field “service_type ” in form along with above rules will be like this :-
<field name=“service_type”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“dataType” xsi:type=“string”>select</item>
<item name=“label” xsi:type=“string” translate=“true”>Type</item>
<item name=“formElement” xsi:type=“string”>select</item>
<item name=“component” xsi:type=“string”>Magento_Ui/js/form/element/select</item>
</item>
<item name=“options” xsi:type=“array”>
<item name=“0” xsi:type=“array”>
<item name=“value” xsi:type=“string”>branch</item>
<item name=“label” xsi:type=“string” translate=“true”>Branch</item>
</item>
<item name=“1” xsi:type=“array”>
<item name=“value” xsi:type=“string”>home</item>
<item name=“label” xsi:type=“string” translate=“true”>Home</item>
</item>
</item>
</argument>
<settings>
<switcherConfig>
<rules>
<rule name=“0”>
<value>home</value>
<actions>
<action name=“0”>
<target>${ $.ns }.${ $.ns }.fieldset-name.home_service_charge</target>
<callback>show</callback>
</action>
<action name=“1”>
<target>${ $.ns }.${ $.ns }.fieldset-name.branch_address</target>
<callback>hide</callback>
</action>
</actions>
</rule><rule name=“1”>
<value>branch</value>
<actions>
<action name=“0”>
<target>${ $.ns }.${ $.ns }.fieldset-name.home_service_charge</target>
<callback>hide</callback>
</action>
<action name=“1”>
<target>${ $.ns }.${ $.ns }.fieldset-name.branch_address</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
*Note – Make sure to replace with your fieldset name “fieldset-name” in target
2.Dependable “home_service_charge” input field to define the charges for home service. As the input form element already has a show/hide callback, no extra changes are required.
<field name=“home_service_charge”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“dataType” xsi:type=“string”>number</item>
<item name=“label” xsi:type=“string” translate=“true”>Charge</item>
<item name=“formElement” xsi:type=“string”>input</item>
<item name=“dataScope” xsi:type=“string”>home_service_charge</item>
<item name=“validation” xsi:type=“array”>
<item name=“validate-digits” xsi:type=“boolean”>true</item>
<item name=“validate-greater-than-zero” xsi:type=“boolean”>true</item>
</item>
</item>
</argument>
</field>
3.Dependable “branch_address” a link button to open my pop-up model to define the branch address .
<button name=“branch_address”>
<argument name=“data” xsi:type=“array”>
<item name=“config” xsi:type=“array”>
<item name=“label” xsi:type=“string” translate=“true”>Branch Address</item>
<item name=“labelVisible” xsi:type=“boolean”>true</item>
<item name=“formElement” xsi:type=“string”>container</item>
<item name=“component” xsi:type=“string”>Vendor_Module/js/form/components/button</item>
<item name=“template” xsi:type=“string”>ui/form/components/button/container</item>
<item name=“buttonClasses” xsi:type=“string”>custom-button-class</item>
<item name=“actions” xsi:type=“array”>
<item name=“0” xsi:type=“array”>
<item name=“targetName” xsi:type=“string”>${ $.ns }.${ $.ns }.branch_address_model</item>
<item name=“actionName” xsi:type=“string”>toggleModal</item>
</item>
</item>
</item>
</argument>
<settings>
<componentType>button</componentType>
<displayAsLink>true</displayAsLink>
<title translate=“true”>Fill Branch Address</title>
</settings>
</button>
Unlike the input field, a button ui element does not have a hide/show callback defined in their component js Magento_Ui/js/form/components/button.
So we will have to create our own button component js Vendor_Module/js/form/components/button to add these two callbacks.
Our custom component js will extend the button component js, so that we only have to append our custom callback.
This way we can cover a custom callback along with predefined callback as used above in the input form element.
We will create a button.js at Vendor/Module/view/adminhtml/web/js/form/components.
define([
‘Magento_Ui/js/form/components/button’,
], function (Button) {
‘use strict’;
return Button.extend({
/**
* Show element.
*/
show: function () {
this.visible(true);
return this;
},
/**
* Hide element.
*/
hide: function () {
this.visible(false);
return this;
},
});
});
Results
