If you’ve built a “header” or “navigation menu” dialog in AEM, you’ve probably hit this requirement before: a content author adds multiple menu items, and for each one picks whether it’s an Internal Link or an External Link. Based on that choice, only the relevant field should show up: a path field for internal links, a text field for external.<\/p>\n
Sounds simple. AEM even has a built-in feature for exactly this. It works fine for a single dropdown. Put it inside a multifield, though, and it falls apart. Here’s how I fixed it, and what went wrong first.<\/p>\n
<\/p>\n
Build a header component with a “Configure Menu Items” multifield. For each menu item, the author enters Link Text and picks a Link Type from a dropdown, Internal or External. Depending on the choice:<\/p>\n
Both fields needed to be mandatory, but only the one actually visible. And authors should be able to add as many menu items as they want, with each one behaving independently of the others.<\/p>\n
<\/p>\n
Here’s the relevant part of the dialog _cq_dialog.xml<\/strong>. Each multifield row (.\/menuItems<\/strong>) contains a linkType<\/strong> select, and two sibling containers – one for the internal link pathfield, one for the external link textfield.<\/p>\n Notice there’s no cq-dialog-dropdown-showhide<\/strong> class anywhere. That’s on purpose, and I’ll explain why below.<\/p>\n <\/p>\n <\/p>\n How it works:<\/strong><\/span> Drop this JS into a clientlibrary folder, and reference the category via the extraClientlibs<\/strong> property on the dialog. On dialog-ready<\/strong>, we loop through every existing row and wire a change listener onto its own dropdown. When the “+” button is clicked to add a new row, we just re-run the same loop. The old rows already have listeners, so nothing breaks for them, and the new row gets wired up too. applyToggle<\/strong> always scopes its lookup to the current row’s coral-multifield-item-content<\/strong>, so flipping the dropdown in row 1 never touches row 2.<\/p>\n <\/p>\n AEM ships a built-in feature for exactly this kind of show\/hide. Add the cq-dialog-dropdown-showhide<\/strong> class to your select, point it at a target selector with data-cq-dialog-dropdown-showhide-target<\/strong>, and give your containers a data-showhidetargetvalue<\/strong> attribute matching the dropdown value. No JS required, in theory.<\/p>\n It worked fine for a single dropdown in a normal dialog. The moment I put it inside a granite\/ui\/components\/coral\/foundation\/form\/multifield<\/strong> with composite=”{Boolean}true”<\/strong>, it broke.<\/p>\n <\/p>\n This was the big one, and it took a while to actually understand why it was happening. I’d add two menu items, set the first one to “External Link,” and suddenly the second item’s fields would change too, even though I never touched its dropdown.<\/p>\n The root cause: AEM’s OOTB show\/hide handler runs document.querySelectorAll() against the target selector globally, across the entire dialog. It has no concept of “which row triggered this change.” Since every row’s target container shared the exact same class (linktype-option-showhide-target<\/strong> in earlier iterations, later .internal-link-option \/ .external-link-option), the handler toggled visibility on all of them at once, no matter which row’s dropdown actually fired.<\/p>\n This is a classic trap with multifields anything that works fine for a single instance of a field often breaks down once you have an array of repeating items, because most OOTB handlers aren’t written with multifield scoping in mind.<\/p>\n The next challenge was handling rows added dynamically via the multifield’s “+” (Add) button. Since the dialog XML only defines a <template> for new items, any JavaScript wiring done at dialog-ready time obviously won’t touch rows added afterward.<\/p>\n A few things were tried before landing on something solid:<\/p>\n This one was sneaky. Both the Internal Link and External Link fields were marked required=”{Boolean}true” in the dialog XML, which is correct, but AEM’s foundation validation doesn’t care whether a field is visually hidden. If it’s marked required and tries to save with an empty value, it blocks the dialog from saving.<\/p>\n So picking “External Link,” filling the URL, and hitting save would still throw an error on the hidden Internal Link field.<\/p>\n The fix that worked cleanly, without fighting against AEM’s own validation engine, was using the disabled attribute instead of trying to toggle required\/aria-required<\/strong> on and off. A disabled field is automatically skipped by both native browser validation and AEM’s foundation validation, no custom validator registration needed, no risk of conflicting with OOTB behavior. Whichever field is currently hidden gets disabled; the visible one gets re-enabled.<\/p>\n <\/p>\n What looks like a five-minute “just use the OOTB show\/hide” task turns into a real rabbit hole once multifields, Coral custom elements, and AEM’s validation engine are all in play. The fix isn’t complicated once you understand why the built-in feature breaks in a multifield context. It just comes down to scoping everything to the current row and letting disabled<\/strong> handle validation instead of wrestling with required<\/strong>.<\/p>\n Hopefully this saves someone else the few hours of head-scratching it took to track down.<\/p>\n","protected":false},"excerpt":{"rendered":" If you’ve built a “header” or “navigation menu” dialog in AEM, you’ve probably hit this requirement before: a content author adds multiple menu items, and for each one picks whether it’s an Internal Link or an External Link. Based on that choice, only the relevant field should show up: a path field for internal links, […]<\/p>\n","protected":false},"author":2303,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":6},"categories":[5868],"tags":[8675,5313,5314,8672,4847,5008,8674,8678,8676,8688,8690,8687,8691,8689],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/80396"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2303"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=80396"}],"version-history":[{"count":11,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/80396\/revisions"}],"predecessor-version":[{"id":80705,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/80396\/revisions\/80705"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=80396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=80396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=80396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
<multiField\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/multifield\"\r\n composite=\"{Boolean}true\"\r\n fieldDescription=\"Click the '+' to add a new menu item\"\r\n fieldLabel=\"Configure Menu Items\">\r\n <field\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/container\"\r\n name=\".\/menuItems\">\r\n <items jcr:primaryType=\"nt:unstructured\">\r\n <linkType\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/select\"\r\n fieldLabel=\"Select Link Type\"\r\n name=\".\/linkType\">\r\n <items jcr:primaryType=\"nt:unstructured\">\r\n <internalLink\r\n jcr:primaryType=\"nt:unstructured\"\r\n text=\"Internal Link\"\r\n value=\"internalLink\" \/>\r\n <externalLink\r\n jcr:primaryType=\"nt:unstructured\"\r\n text=\"External Link\"\r\n value=\"externalLink\" \/>\r\n <\/items>\r\n <\/linkType>\r\n <linkText\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/textfield\"\r\n fieldDescription=\"Enter the text for this link.\"\r\n fieldLabel=\"Link Text\"\r\n required=\"{Boolean}true\"\r\n name=\".\/linkText\" \/>\r\n <internalLinkContainer\r\n granite:class=\"internal-link-option\"\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/container\">\r\n <items jcr:primaryType=\"nt:unstructured\">\r\n <internalLink\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/pathfield\"\r\n fieldDescription=\"Select the internal page for this link.\"\r\n fieldLabel=\"Internal Link\"\r\n name=\".\/internalLink\"\r\n required=\"{Boolean}true\"\r\n rootPath=\"\/content\/aem-learning\" \/>\r\n <\/items>\r\n <\/internalLinkContainer>\r\n <externalLinkContainer\r\n granite:class=\"hide external-link-option\"\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/container\">\r\n <items jcr:primaryType=\"nt:unstructured\">\r\n <externalLink\r\n jcr:primaryType=\"nt:unstructured\"\r\n sling:resourceType=\"granite\/ui\/components\/coral\/foundation\/form\/textfield\"\r\n fieldDescription=\"Enter the URL for this link.\"\r\n fieldLabel=\"External Link\"\r\n required=\"{Boolean}true\"\r\n name=\".\/externalLink\" \/>\r\n <\/items>\r\n <\/externalLinkContainer>\r\n <\/items>\r\n <\/field>\r\n<\/multiField><\/code><\/pre>\n<\/blockquote>\nThe clientlib JS:<\/span><\/h3>\n
\n
(function (document, $) {\r\n \"use strict\";\r\n\r\n $(document).on(\"dialog-ready\", function () {\r\n process();\r\n\r\n $(\"coral-multifield[data-granite-coral-multifield-name='.\/menuItems']\").on(\"click\", \"button[coral-multifield-add]\", function () {\r\n process();\r\n });\r\n });\r\n\r\n function process() {\r\n const multifield = document.querySelector('coral-multifield[data-granite-coral-multifield-name=\".\/menuItems\"]');\r\n if (multifield) {\r\n const items = multifield.querySelectorAll('coral-multifield-item');\r\n\r\n items.forEach(function (item, index) {\r\n const itemContent = item.querySelector('coral-multifield-item-content');\r\n const linkTypeEle = itemContent.querySelector(`coral-select[name*=\"linkType\"]`);\r\n\r\n if (!linkTypeEle) {\r\n console.warn(\"Link type dropdown not found for item index:\", index);\r\n return;\r\n }\r\n applyToggle(linkTypeEle, linkTypeEle.value);\r\n\r\n linkTypeEle.addEventListener(\"change\", function (e) {\r\n applyToggle(this, this.value);\r\n });\r\n });\r\n } else {\r\n console.warn(\"Multifield not found with selector: coral-multifield[data-granite-coral-multifield-name=\\\".\/menuItems\\\"]\");\r\n }\r\n }\r\n\r\n function applyToggle(item, val) {\r\n const itemContent = item.closest(\"coral-multifield-item-content\");\r\n const internalContainer = itemContent.querySelector(\".internal-link-option\");\r\n const externalContainer = itemContent.querySelector(\".external-link-option\");\r\n\r\n const internalField = internalContainer.querySelector(\"foundation-autocomplete\");\r\n const externalField = externalContainer.querySelector(\"input[type='text']\");\r\n\r\n if (val === \"internalLink\") {\r\n internalContainer.classList.remove(\"hide\");\r\n internalField.removeAttribute(\"disabled\");\r\n externalContainer.classList.add(\"hide\");\r\n externalField.setAttribute(\"disabled\", \"true\");\r\n } else if (val === \"externalLink\") {\r\n internalContainer.classList.add(\"hide\");\r\n internalField.setAttribute(\"disabled\", \"true\");\r\n externalContainer.classList.remove(\"hide\");\r\n externalField.removeAttribute(\"disabled\");\r\n }\r\n }\r\n\r\n}(document, Granite.$));<\/code><\/pre>\n<\/blockquote>\nWhy This Needed Custom Handling:<\/span><\/h2>\n
Challenges While Building This:<\/span><\/h2>\n
#1: Selecting a value in one row affected every row<\/h3>\n
#2: The Add Button and New Multifield Items<\/h3>\n
\n
#3: Required validation blocking save on the hidden field<\/h3>\n
Conclusion<\/span><\/h2>\n