{"id":158,"date":"2019-08-24T11:40:54","date_gmt":"2019-08-24T11:40:54","guid":{"rendered":"https:\/\/magebrew.com\/blog\/?p=158"},"modified":"2019-08-24T11:42:51","modified_gmt":"2019-08-24T11:42:51","slug":"magento-2-dependent-fields-in-ui-component-form","status":"publish","type":"post","link":"https:\/\/magebrew.com\/blog\/magento-2-dependent-fields-in-ui-component-form\/","title":{"rendered":"Magento 2 dependent fields in UI component form"},"content":{"rendered":"\n

There are numerous tutorials about how to make one field dependent on other field value in UI Form. Many of them tells you to write some JS logic. However in most cases it is enough to add switcherConfig<\/code> to form declaration xml.<\/p>\n\n\n\n\n\n\n\n

Let’s check how switcherConfig<\/code> works on Admin Category edit form. <\/p>\n\n\n\n

In our custom module we create app\/code\/Magebrew\/DependentFieldsExample\/view\/adminhtml\/ui_component\/category_form.xml<\/code> and add three fields: Source, Target 1, Target 2. Then add switcherConfig<\/code> to Source field with rules to show Target 1, disable Target 2 if Source value is false<\/code> and hide Target 1, enable Target 2 if Source value is true<\/code>. See the code below, it is pretty self-explanatory:<\/p>\n\n\n\n

<form xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\n    <fieldset name=\"general\">\n        <field name=\"source\" formElement=\"select\">\n            <settings>\n                <dataType>text<\/dataType>\n                <dataScope>source<\/dataScope>\n                <label translate=\"true\">Source<\/label>\n                <switcherConfig>\n                    <rules>\n                        <rule name=\"0\">\n                            <value>0<\/value>\n                            <actions>\n                                <action name=\"0\">\n                                    <target>category_form.category_form.general.target1<\/target>\n                                    <callback>show<\/callback>\n                                <\/action>\n                                <action name=\"1\">\n                                    <target>category_form.category_form.general.target2<\/target>\n                                    <callback>disable<\/callback>\n                                <\/action>\n                            <\/actions>\n                        <\/rule>\n                        <rule name=\"1\">\n                            <value>1<\/value>\n                            <actions>\n                                <action name=\"0\">\n                                    <target>category_form.category_form.general.target1<\/target>\n                                    <callback>hide<\/callback>\n                                <\/action>\n                                <action name=\"1\">\n                                    <target>category_form.category_form.general.target2<\/target>\n                                    <callback>enable<\/callback>\n                                <\/action>\n                            <\/actions>\n                        <\/rule>\n                    <\/rules>\n                    <enabled>true<\/enabled>\n                <\/switcherConfig>\n            <\/settings>\n            <formElements>\n                <select>\n                    <settings>\n                        <options class=\"Magento\\Config\\Model\\Config\\Source\\Yesno\"\/>\n                    <\/settings>\n                <\/select>\n            <\/formElements>\n        <\/field>\n        <field name=\"target1\" formElement=\"input\">\n            <settings>\n                <dataType>string<\/dataType>\n                <label translate=\"true\">Target 1<\/label>\n            <\/settings>\n        <\/field>\n        <field name=\"target2\" formElement=\"input\">\n            <settings>\n                <dataType>string<\/dataType>\n                <label translate=\"true\">Target 2<\/label>\n            <\/settings>\n        <\/field>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
Source code also can be found on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2 dependent fields in UI component form<\/p>\n","protected":false},"author":1,"featured_media":160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[26,20,23],"_links":{"self":[{"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/posts\/158"}],"collection":[{"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/comments?post=158"}],"version-history":[{"count":5,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/posts\/158\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/posts\/158\/revisions\/164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/media\/160"}],"wp:attachment":[{"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/media?parent=158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/categories?post=158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magebrew.com\/blog\/wp-json\/wp\/v2\/tags?post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}