Hi,
I see many posts around creating a multifield in coralui3 and with showing and hiding based on selected option. When i tried to implement this on AEM 6.5.12 , the show hide just did not work. Is this something someone can guide me with a sample please?
Regards,
Nicole
FYI
@arunpatidar
Tried the above logic,( without putting the fields within containers) and it did not work, just shows the select option and hides the rest on load and on dropdown select @mayursatav
@mayursatav got it working. The problem was that the coralui components have a different way to address class and granite data ,
eg:
solution
1. below res type Needs granite:class property at the node containing granite/ui/components/coral/foundation/form/pathbrowser and granite data as a child of the node
2.granite/ui/components/coral/foundation/form/pathbrowser Needs "class" property at the node containing the res type granite/ui/components/coral/foundation/form/pathbrowser and property you would place within granite:data to be contained within the node itself
Pending issue as i see is inheritance- perhaps cause of deep nested, the inheritance is broken and i will raise a ticket with adobe on this. If LC has a content and you break inheritance, and rollout , the contents from blueprint overrides content at LC.. odd since inheritance is broken.
Another issue: add an item , select a value from dropdown and set the data for the field displayed, now add a new field and it strangely erases or overrides previous entry
Is there a way to group an option without even putting it into multifield ? Unable to group it.This is so that only one inheritance link icon is displayed and not more
Hi @nitrohazedev ,
If I understand your question correctly, you are looking for a way to display and hide multiple fields based on the selection from a drop down menu, right?. Here is a screen shot and dialog snippet that I have attached. I have tested it in AEM 6.5.12 and it works fine for me.
Instructions
If Option 1 selected
If Option 2 is selected
Dialog Snippet
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Test Dialog"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<list
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="cq-dialog-dropdown-showhide"
cq-dialog-dropdown-showhide-target=".test-options-showhide-target"
fieldLabel="Options Type"
name="./optionsType">
<items jcr:primaryType="nt:unstructured">
<option1
jcr:primaryType="nt:unstructured"
text="Option1"
value="option1"/>
<option2
jcr:primaryType="nt:unstructured"
text="Option2"
value="option2"/>
</items>
</list>
<option1group
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hide test-options-showhide-target"
showhidetargetvalue="option1">
<items jcr:primaryType="nt:unstructured">
<heading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/heading"
class="coral-Heading coral-Heading--4"
level="{Long}4"
text="Options 1 Group"/>
<well
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/well"/>
<items jcr:primaryType="nt:unstructured">
<actions
granite:class="foundation-toggleable cmp-teaser__editor-multifield_actions"
granite:hide="${cqDesign.actionsDisabled}"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Call-to-actions">
<field
granite:class="cmp-teaser__editor-action"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./actions">
<items jcr:primaryType="nt:unstructured">
<webUrl
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Web Url"
name="./webUrl"/>
</items>
</field>
</actions>
</items>
</well>
</items>
</option1group>
<option2group
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hide test-options-showhide-target foundation-layout-util-vmargin"
showhidetargetvalue="option2">
<items jcr:primaryType="nt:unstructured">
<heading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/heading"
class="coral-Heading coral-Heading--4"
level="{Long}4"
text="Options 2 Group"/>
<well
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/well"/>
<items jcr:primaryType="nt:unstructured">
<actions
granite:class="foundation-toggleable cmp-teaser__editor-multifield_actions"
granite:hide="${cqDesign.actionsDisabled}"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Call-to-actions">
<field
granite:class="cmp-teaser__editor-action"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./actions">
<items jcr:primaryType="nt:unstructured">
<htmlSnippet
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
fieldLabel="Upload HTML Snippet"
name="./htmlSnippet"
rootPath="/content/dam/"/>
</items>
</field>
</actions>
</items>
</well>
</items>
</option2group>
</items>
</column>
</items>
</content>
</jcr:root>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.