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

How to perform Keyword Research for SEO-friendly content?

7 Mins read
Keyword Research or analysis commences with thinking about how potential readers might be searching for your content or website. At present, SEO…
Markets

How Capuano Musica Store reached new heights with Shopify and eBay?

3 Mins read
The story of the Capuano Musica Store started in the mid-1950s in Montreal, Canada. Two immigrants from Italy decided to open a…
Markets

Top Southeast Asia eCommerce Platform | A Complete Magento Multichannel Selling Guide

10 Mins read
Southeast Asia has the fastest growing eCommerce market with a 90 percent population connected through their mobile phones. Many similar data suggest…
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 *