Question
How to implement Radio Button Show/Hide for Variations in AEM Dialog
I have a requirement involving two variations: Variation 1 and Variation 2.
- When the Variation 1 radio button is selected, the Variation 1 items such as isiTitle and isiDescription (multifield) should be displayed, and all other variation items should be hidden.
- When the Variation 2 radio button is selected, the Variation 1 items should be hidden, and only Variation 2 fields should be visible.
like isiTitle1 , isibuttonlabel and isiDescription
In another tab, contentDescription should be visible by default.
I have the dialog configuration and Sling model ready. Can you please verify and guide me on how to implement this functionality..
Can you please guide me on how to achieve this scenario? I want to implement the radio button show/hide behavior for the variations in the dialog.
If you have already worked on this scenario, could you mention where the issue might be fixed and provide the replaced or updated code that I can use?
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="ISI Component Configuration"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<!-- Variations Tab -->
<variations
jcr:primaryType="nt:unstructured"
jcr:title="Variations"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<!-- Variation Selection -->
<variationtypes
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
jcr:title="Select Variation"
name="./selectedVariation"
value="variation1"
vertical="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<variation1
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radio"
text="Variation 1"
value="variation1"
granite:class="cq-dialog-radio-showhide">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-radio-showhide-target=".variation1-fields"/>
</variation1>
<variation2
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radio"
text="Variation 2"
value="variation2"
granite:class="cq-dialog-radio-showhide">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-radio-showhide-target=".variation2-fields"/>
</variation2>
</items>
</variationtypes>
<!-- Variation 1 Fields with Multifield -->
<variation1fields
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
jcr:title="Variation 1 Fields"
granite:class="variation1-fields">
<items jcr:primaryType="nt:unstructured">
<variation1items
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldLabel="Variation 1 Items"
fieldDescription="Add ISI items"
composite="{Boolean}true"
name="./variation1Items">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<isititle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ISI Title"
name="./isiTitle"/>
<isidescription
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="ISI Description"
name="./isiDescription"
useFixedInlineToolbar="{Boolean}true"/>
</items>
</field>
</variation1items>
</items>
</variation1fields>
<!-- Variation 2 Fields -->
<variation2fields
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
jcr:title="Variation 2 Fields"
granite:class="variation2-fields hide">
<items jcr:primaryType="nt:unstructured">
<isititle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ISI Title"
name="./variation2IsiTitle"/>
<isibuttonlabel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="ISI Button Label"
name="./variation2IsiButtonLabel"/>
<isidescription
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="ISI Description"
name="./variation2IsiDescription"
useFixedInlineToolbar="{Boolean}true"/>
</items>
</variation2fields>
</items>
</column>
</items>
</variations>
<!-- Content Tab -->
<contenttab
jcr:primaryType="nt:unstructured"
jcr:title="Content"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<contentdescription
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Content Description"
name="./contentDescription"
useFixedInlineToolbar="{Boolean}true"/>
</items>
</column>
</items>
</contenttab>
</items>
</tabs>
</items>
</content>
</jcr:root>
@Getter
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class IsiModel {
@ValueMapValue(name = "selectedVariation")
private String selectedVariation;
@ChildResource(name = "variation1Items")
private List<Variation1Item> variation1Items;
@ValueMapValue(name = "variation2IsiTitle")
private String variation2IsiTitle;
@ValueMapValue(name = "variation2IsiButtonLabel")
private String variation2IsiButtonLabel;
@ValueMapValue(name = "variation2IsiDescription")
private String variation2IsiDescription;
@ValueMapValue(name = "contentDescription")
private String contentDescription;
@Getter
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public static class Variation1Item {
@ValueMapValue(name = "isiTitle")
private String isiTitle;
@ValueMapValue(name = "isiDescription")
private String isiDescription;
}
}
(function(document, $, Coral) {
"use strict";
$(document).on("foundation-contentloaded", function(e) {
$(".cmp-list_editor div.cq-dialog-radio-showhide", e.target).each(function(i, element) {
var target = $(element).data("cq-dialog-radio-showhide-target");
if (target) {
Coral.commons.ready(element, function(component) {
showHideRadio(component, target, null);
$(component).on("change", function(event) {
showHideRadio(component, target, event.target.value);
});
});
}
});
showHideRadio($(".cq-dialog-radio-showhide", e.target));
});
function showHideRadio(component, target, value) {
$(target).each(function(i, element) {
var tabDiv = $(element).attr("data-istab");
if (!checkUndefined(tabDiv)) {
showHideFields(element, value);
}
if (checkUndefined(tabDiv)) {
showHideTabs(element, value);
}
});
}
function showHideFields(element, value) {
var containerShow = $(element).attr("data-showhideradiovalue");
if (value == containerShow) {
$(element).removeClass("hide");
} else {
$(element).addClass("hide");
}
}
function showHideTabs(target, value) {
var tabsContent = $(target).closest("coral-panelstack");
var tabsList = tabsContent.siblings("coral-tablist");
tabsContent.children().each(function(i, element) {
var tabShowValue = $(element).find("div").attr("data-showhideradiovalue");
if (checkUndefined(tabShowValue)) {
if (value == tabShowValue) {
var tabIDShow = $(element).attr("aria-labelledby");
$(element).attr("selected", "");
$(tabsList).children("[id='" + tabIDShow + "']").removeClass("hide");
$(element).find("div").filter("[data-showhideradiovalue='" + value + "']");
} else if (value != tabShowValue) {
var tabIDHide = $(element).attr("aria-labelledby");
$(tabsList).children("[id='" + tabIDHide + "']").addClass("hide");
}
}
});
}
function checkUndefined(target) {
if (typeof target === "undefined") {
return false;
}
return true;
}
return true;
})(document, Granite.$, Coral);