NEW!Incredible offer for our exclusive subscribers! Read More

Markets

Use of SwitcherConfig – How to show/hide ui elements depending on another field’s value

2 Mins read

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 3. “​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 :-

“service_type”>
  “data” xsi:type=“array”>
      “config” xsi:type=“array”>
        “dataType” xsi:type=“string”>select
        “label” xsi:type=“string” translate=“true”>Type
        “formElement” xsi:type=“string”>select
        “component” xsi:type=“string”>Magento_Ui/js/form/element/select
     

      “options” xsi:type=“array”>
        “0” xsi:type=“array”>
            “value” xsi:type=“string”>branch
            “label” xsi:type=“string” translate=“true”>Branch
       

        “1” xsi:type=“array”>
            “value” xsi:type=“string”>home
            “label” xsi:type=“string” translate=“true”>Home
       

     

 

 
     
       
            “0”>
              home
             
                  “0”>
                    ${ $.ns }.${ $.ns }.fieldset-name.home_service_charge
                    show
                 

                  “1”>
                    ${ $.ns }.${ $.ns }.fieldset-name.branch_address
                    hide
                 

             
           

*Note – Make sure to replace with your fieldset name “fieldset-name” in target

2.Dependable “home_service_charge” input field. As the input form element already has a show/hide callback, no extra changes are required.

“home_service_charge”>
  “data” xsi:type=“array”>
      “config” xsi:type=“array”>
        “dataType” xsi:type=“string”>number
        “label” xsi:type=“string” translate=“true”>Charge
        “formElement” xsi:type=“string”>input
        “dataScope” xsi:type=“string”>home_service_charge
        “validation” xsi:type=“array”>
            “validate-digits” xsi:type=“boolean”>true
            “validate-greater-than-zero” xsi:type=“boolean”>true
         

     

   

3.Dependable “branch_address” a link 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

switcherConfig

switcherConfig

The post Use of SwitcherConfig – How to show/hide ui elements depending on another field’s value appeared first on CedCommerce Blog.

Related posts
Markets

What are Cron Job in Magento | How it Helps in Multichannel Selling?

7 Mins read
Cron jobs are an integral part of multichannel selling, without which selling on different channels can become distressing! Why is that? It…
Markets

Shops on WhatsApp Opens New Channel for Growth: Here’s How You can Raise your Multichannel Game

4 Mins read
Commerce is not a whole new phenomenon to Facebook. Bringing people closer and driving more engagement has always been the force behind…
Markets

Everything on Walmart Shipping Services: Next Day, 2-Day, SWW and More

6 Mins read
Quick Brief – When Fast and free are the driving incentives for eCommerce customers to shop online, you must focus on fulfilling…
Power your team with Getecomstore

Add some text to explain benefits of
subscripton on your services.

Leave a Reply

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