{"id":238515,"date":"2020-03-17T13:47:37","date_gmt":"2020-03-17T13:47:37","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=238515"},"modified":"2020-03-17T13:47:38","modified_gmt":"2020-03-17T13:47:38","slug":"how-to-create-dependent-fields-in-forms-using-ui-components-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/","title":{"rendered":"How to Create Dependent Fields in Forms using Ui components- Magento2"},"content":{"rendered":"\n<p>In this blog we will see how to add dependent fields in our custom forms using ui component. In many situations we need to show  fields according to option selected by end user. For e.g if we have a select drop down with option type &#8220;A&#8221;, &#8220;B&#8221; and &#8220;C&#8221; and let us suppose each option have some associated dependent fields  &#8220;F1&#8243;,&#8221;F2&#8221; and &#8220;F3&#8221;. In this scenario depending upon the user selection the dependent field associated with teh selected option type should be visible and rest of the fields should be hidden.<\/p>\n\n\n\n<p>In Magento2, we can achieve this without using external js to show and hide our fields.<\/p>\n\n\n\n<p>First you will have to  Create \u2019custom_form.xml\u2019 in folder \u2018Webkul\/Test\/view\/adminhtml\/ui_component\u2019.<\/p>\n\n\n\n<p>Within the form define your main field as mentioned below<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;field name=&quot;main_field&quot;&gt;\n            &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n                &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n                    &lt;item name=&quot;label&quot; xsi:type=&quot;string&quot; translate=&quot;true&quot;&gt;Type&lt;\/item&gt;\n                        &lt;item name=&quot;visible&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n                        &lt;item name=&quot;dataType&quot; xsi:type=&quot;string&quot;&gt;number&lt;\/item&gt;\n                        &lt;item name=&quot;formElement&quot; xsi:type=&quot;string&quot;&gt;select&lt;\/item&gt;\n                        &lt;item name=&quot;source&quot; xsi:type=&quot;string&quot;&gt;main_field&lt;\/item&gt;\n                        &lt;item name=&quot;dataScope&quot; xsi:type=&quot;string&quot;&gt;main_field&lt;\/item&gt;\n                        &lt;item name=&quot;validation&quot; xsi:type=&quot;array&quot;&gt;\n                            &lt;item name=&quot;required-entry&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n                        &lt;\/item&gt;\n                        &lt;item name=&quot;options&quot; xsi:type=&quot;array&quot;&gt;\n                                &lt;item name=&quot;0&quot; xsi:type=&quot;array&quot;&gt;\n                                    &lt;item name=&quot;label&quot; xsi:type=&quot;string&quot;&gt;Dependent Field 1&lt;\/item&gt;\n                                    &lt;item name=&quot;value&quot; xsi:type=&quot;string&quot;&gt;0&lt;\/item&gt;\n                                &lt;\/item&gt;\n                                &lt;item name=&quot;2&quot; xsi:type=&quot;array&quot;&gt;\n                                    &lt;item name=&quot;label&quot; xsi:type=&quot;string&quot;&gt;Dependent Field 1&lt;\/item&gt;\n                                    &lt;item name=&quot;value&quot; xsi:type=&quot;string&quot;&gt;2&lt;\/item&gt;\n                                &lt;\/item&gt;\n                        &lt;\/item&gt;\n                    &lt;\/item&gt;\n                &lt;\/argument&gt;\n        &lt;\/field&gt;<\/pre>\n\n\n\n<p>I have defined a select type drop down field with two options labelled &#8220;Dependent Field 1&#8221; and &#8220;Dependent Field 1&#8221;. Now to show  and hide the fields according to the selected option type all you need to  add is the &lt;switcherConfig&gt; just after the settings tag.  We need to add rules to the switcher config which defines which component will be displayed on selection from the main field.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;settings&gt;\n        &lt;switcherConfig&gt;\n            &lt;rules&gt;\n                &lt;rule name=&quot;0&quot;&gt;\n                    &lt;value&gt;0&lt;\/value&gt;\n                    &lt;actions&gt;\n                        &lt;action name=&quot;0&quot;&gt;\n                            &lt;target&gt;custom_form.custom_form.custom_form_details.dependent1&lt;\/target&gt;\n                            &lt;callback&gt;show&lt;\/callback&gt;\n                        &lt;\/action&gt;\n                        &lt;action name=&quot;1&quot;&gt;\n                            &lt;target&gt;custom_form.custom_form.custom_form_details.dependent2&lt;\/target&gt;\n                            &lt;callback&gt;hide&lt;\/callback&gt;\n                        &lt;\/action&gt;\n                    &lt;\/actions&gt;\n                &lt;\/rule&gt;\n                &lt;rule name=&quot;1&quot;&gt;\n                    &lt;value&gt;1&lt;\/value&gt;\n                    &lt;actions&gt;\n                        &lt;action name=&quot;0&quot;&gt;\n                            &lt;target&gt;custom_form.custom_form.custom_form_details.dependent1&lt;\/target&gt;\n                            &lt;callback&gt;hide&lt;\/callback&gt;\n                        &lt;\/action&gt;\n                        &lt;action name=&quot;1&quot;&gt;\n                            &lt;target&gt;custom_form.custom_form.custom_form_details.dependent2&lt;\/target&gt;\n                            &lt;callback&gt;show&lt;\/callback&gt;\n                        &lt;\/action&gt;\n                    &lt;\/actions&gt;\n                &lt;\/rule&gt;\n            &lt;\/rules&gt;\n    &lt;enabled&gt;true&lt;\/enabled&gt;\n&lt;\/switcherConfig&gt;\n&lt;\/settings&gt;<\/pre>\n\n\n\n<p> <code>&lt;target&gt;<\/code>\u00a0&#8211; define the registry key where the dependent field component is saved in the registry. Here custom_form is the name of the form and custom_form_details is the field set name.<br><code>&lt;callback&gt;<\/code>\u00a0&#8211; a callable method available in the component. If you use a custom component, you can call that method.<\/p>\n\n\n\n<p>After adding the switcher you need to define your dependent fields<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;field name=&quot;dependent1&quot;&gt;\n    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n        &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n            &lt;item name=&quot;sortOrder&quot; xsi:type=&quot;number&quot;&gt;6&lt;\/item&gt;\n            &lt;item name=&quot;dataType&quot; xsi:type=&quot;string&quot;&gt;text&lt;\/item&gt;\n            &lt;item name=&quot;label&quot; xsi:type=&quot;string&quot; translate=&quot;true&quot;&gt;Dependent Field 1&lt;\/item&gt;\n            &lt;item name=&quot;formElement&quot; xsi:type=&quot;string&quot;&gt;input&lt;\/item&gt;\n            &lt;item name=&quot;source&quot; xsi:type=&quot;string&quot;&gt;dependent1&lt;\/item&gt;\n            &lt;item name=&quot;dataScope&quot; xsi:type=&quot;string&quot;&gt;dependent1&lt;\/item&gt;\n                &lt;item name=&quot;validation&quot; xsi:type=&quot;array&quot;&gt;\n                &lt;item name=&quot;required-entry&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n            &lt;\/item&gt;\n        &lt;\/item&gt;\n    &lt;\/argument&gt;\n&lt;\/field&gt;\n&lt;field name=&quot;dependent2&quot;&gt;\n    &lt;argument name=&quot;data&quot; xsi:type=&quot;array&quot;&gt;\n        &lt;item name=&quot;config&quot; xsi:type=&quot;array&quot;&gt;\n            &lt;item name=&quot;sortOrder&quot; xsi:type=&quot;number&quot;&gt;6&lt;\/item&gt;\n            &lt;item name=&quot;dataType&quot; xsi:type=&quot;string&quot;&gt;text&lt;\/item&gt;\n            &lt;item name=&quot;label&quot; xsi:type=&quot;string&quot; translate=&quot;true&quot;&gt;Dependent Field 2&lt;\/item&gt;\n            &lt;item name=&quot;formElement&quot; xsi:type=&quot;string&quot;&gt;input&lt;\/item&gt;\n            &lt;item name=&quot;source&quot; xsi:type=&quot;string&quot;&gt;dependent2&lt;\/item&gt;\n            &lt;item name=&quot;dataScope&quot; xsi:type=&quot;string&quot;&gt;dependent2&lt;\/item&gt;\n                &lt;item name=&quot;validation&quot; xsi:type=&quot;array&quot;&gt;\n                &lt;item name=&quot;required-entry&quot; xsi:type=&quot;boolean&quot;&gt;true&lt;\/item&gt;\n            &lt;\/item&gt;\n        &lt;\/item&gt;\n    &lt;\/argument&gt;\n&lt;\/field&gt;<\/pre>\n\n\n\n<p>once defined the output will look like this!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1001\" height=\"256\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\" alt=\"first1\" class=\"wp-image-238758\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png 1001w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1-300x77.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1-250x64.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1-768x196.png 768w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"993\" height=\"302\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/second.png\" alt=\"second\" class=\"wp-image-238759\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/second.png 993w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/second-300x91.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/second-250x76.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/second-768x234.png 768w\" sizes=\"(max-width: 993px) 100vw, 993px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Hope this helps!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will see how to add dependent fields in our custom forms using ui component. In many situations we need to show fields according to option selected by end user. For e.g if we have a select drop down with option type &#8220;A&#8221;, &#8220;B&#8221; and &#8220;C&#8221; and let us suppose each option <a href=\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":316,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-238515","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog we will see how to add dependent fields in our custom forms using ui component. In many situations we need to show fields according to option selected by end user. For e.g if we have a select drop down with option type &#8220;A&#8221;, &#8220;B&#8221; and &#8220;C&#8221; and let us suppose each option [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-17T13:47:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-17T13:47:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\" \/>\n<meta name=\"author\" content=\"Kritika Bhatt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kritika Bhatt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\"},\"author\":{\"name\":\"Kritika Bhatt\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1\"},\"headline\":\"How to Create Dependent Fields in Forms using Ui components- Magento2\",\"datePublished\":\"2020-03-17T13:47:37+00:00\",\"dateModified\":\"2020-03-17T13:47:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\"},\"wordCount\":289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\",\"name\":\"How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\",\"datePublished\":\"2020-03-17T13:47:37+00:00\",\"dateModified\":\"2020-03-17T13:47:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png\",\"width\":1001,\"height\":256,\"caption\":\"first1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Dependent Fields in Forms using Ui components- Magento2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1\",\"name\":\"Kritika Bhatt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Kritika Bhatt\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/kritikabhatt-magento019\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog","og_description":"In this blog we will see how to add dependent fields in our custom forms using ui component. In many situations we need to show fields according to option selected by end user. For e.g if we have a select drop down with option type &#8220;A&#8221;, &#8220;B&#8221; and &#8220;C&#8221; and let us suppose each option [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2020-03-17T13:47:37+00:00","article_modified_time":"2020-03-17T13:47:38+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png","type":"","width":"","height":""}],"author":"Kritika Bhatt","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Kritika Bhatt","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/"},"author":{"name":"Kritika Bhatt","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1"},"headline":"How to Create Dependent Fields in Forms using Ui components- Magento2","datePublished":"2020-03-17T13:47:37+00:00","dateModified":"2020-03-17T13:47:38+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/"},"wordCount":289,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/","url":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/","name":"How to Create Dependent Fields in Forms using Ui components- Magento2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png","datePublished":"2020-03-17T13:47:37+00:00","dateModified":"2020-03-17T13:47:38+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/03\/first1.png","width":1001,"height":256,"caption":"first1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-dependent-fields-in-forms-using-ui-components-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Dependent Fields in Forms using Ui components- Magento2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/efad286900f29890c16fa57f79e763a1","name":"Kritika Bhatt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01938a8d81e38af7d0befb578ac580c2572d436ed747f1198638d56e5193a097?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Kritika Bhatt"},"url":"https:\/\/webkul.com\/blog\/author\/kritikabhatt-magento019\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/238515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/316"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=238515"}],"version-history":[{"count":17,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/238515\/revisions"}],"predecessor-version":[{"id":244515,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/238515\/revisions\/244515"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=238515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=238515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=238515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}