Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Dynamic Dialog - able to see secondary choice after first level is changed

Avatar

Level 2

Hello

I created a dynamic dialog based on the document (Adobe Experience Manager Help | Dynamically modifying an Adobe Experience Manager Touch UI Dialog​).  It seems to be functioning correctly for the most part.  My issue is when I change the drop down from A to B the secondary selections that were set under A continue to be shown with the options for B.  In the screen shots my choice is Areas of Interest, under which I select from the tags picker Topics:Labor&Employment/Employee Benefits.  If I change the drop down to Entity Membership the prior choice remains visible.  I would obviously like this to be hidden.  I have been searching through the documentation to determine how to correct but cannot find the solution.  Any assistance would be greatly appreciated.

1821430_pastedImage_0.png

1821537_pastedImage_2.png

<dynamicTab
   jcr:primaryType="nt:unstructured"
   jcr:title="Main"
   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">
  <columns
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container">
  <items jcr:primaryType="nt:unstructured">
  <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/textfield"
   fieldLabel="Title"
   name="./jcr:title"
   required="{Boolean}true"/>
  <populated-by
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/select"
   fieldDescription="Populate By"
   fieldLabel="Populate By"
   name="./populateBy"
   class="cq-dialog-dropdown-showhide"
   cq-dialog-dropdown-showhide-target=".aoi-em-up-hide-show"
   required="{Boolean}true">
  <items jcr:primaryType="nt:unstructured">
  <up
   jcr:primaryType="nt:unstructured"
   text="User Profile"
   value="up"/>
  <aoi
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="aoi"/>
  <em
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="em"/>
  </items>
  </populated-by>
  <user-profile-container
   class="hide aoi-em-up-hide-show"
   showhidetargetvalue="up"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container"
   fieldDescription="User Profile Default">
  <items jcr:primaryType="nt:unstructured">
  <default-populated-by
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/select"
   fieldDescription="Pop"
   fieldLabel="Fallback"
   name="./fallbackPopulateBy"
   class="cq-dialog-dropdown-showhide"
   cq-dialog-dropdown-showhide-target=".fallback-profile-hide-show">
  <items jcr:primaryType="nt:unstructured">
  <aoi-default
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="aoi-fallback"/>
  <em-default
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="em-fallback"/>
  </items>
  </default-populated-by>
  <default-area-of-interest
   class="hide fallback-profile-hide-show"
   showhidetargetvalue="aoi-fallback"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/common/tagspicker"
   allowBulkEdit="{Boolean}false"
   allowCreate="{Boolean}false"
   name="./fallbackAreaOfInterestTag"
   rootPath="/etc/tags/topics"/>
  <default-entity-membership
   class="hide fallback-profile-hide-show"
   showhidetargetvalue="em-fallback"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/common/tagspicker"
   allowBulkEdit="{Boolean}false"
   allowCreate="{Boolean}false"
   name="./fallbackPublishingEntityTag"
   rootPath="/etc/tags/publishing_entity"/>
  </items>
  </user-profile-container>
  <area-of-interest
   class="hide aoi-em-up-hide-show"
   showhidetargetvalue="aoi"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/common/tagspicker"
   allowBulkEdit="{Boolean}false"
   allowCreate="{Boolean}false"
   name="./topicTag"
   rootPath="/etc/tags/topics"/>
  <entity-membership
   class="hide aoi-em-up-hide-show"
   showhidetargetvalue="em"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/common/tagspicker"
   allowBulkEdit="{Boolean}false"
   allowCreate="{Boolean}false"
   name="./publishingEntityTag"
   rootPath="/etc/tags/publishing_entity"/>
  <linkLabel
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/textfield"
   fieldLabel="CTA Label"
   name="./linkLabel"/>
  <linkLabelEmphasis
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/textfield"
   fieldLabel="CTA Label Emphasis"
   name="./linkLabelEmphasis"/>
  <link
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
   allowExternal="{Boolean}true"
   allowNonExistingPath="{Boolean}false"
   allowNonRootPath="{Boolean}true"
   fieldLabel="CTA URL"
   name="./link"
   rootPath="/content/aba-cms-dotorg"
   validation="aba.pathbrowser"/>
  </items>
  </columns>
  </items>
</dynamicTab>

1 Accepted Solution

Avatar

Correct answer by
Level 10

Demo

Here is a working example of your Edit Dialog using Coral 3 (open image in a new tab if it's too small to see).

Peek 2019-08-27 21-43.gif

Code

Here is the XML for the demo above. Please be careful! I copied the XML you provided as a base and converted it to Coral 3 (plus some other modifications). The XML below creates an Edit Dialog that behaves the way I understood your requirement, but it will not work as-is with your component (I wasn't pedantic about name fields for example, and I renamed some nodes for my own comprehension):

<?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="Properties"
   sling:resourceType="cq/gui/components/authoring/dialog">
  <content
   jcr:primaryType="nt:unstructured"
   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">
  <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="Title"
   name="./jcr:title"
   required="{Boolean}true"/>
  <populated-by
   granite:class="cq-dialog-dropdown-showhide"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/select"
   fieldDescription="Populate By"
   fieldLabel="Populate By"
   name="./populateBy"
   required="{Boolean}true">
  <items jcr:primaryType="nt:unstructured">
  <user-profile
   jcr:primaryType="nt:unstructured"
   text="User Profile"
   value="up"/>
  <areas-of-interest
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="aoi"/>
  <entity-membership
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="em"/>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   cq-dialog-dropdown-showhide-target=".populated-by-showhide-target"/>
  </populated-by>
  <user-profile-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container"
   fieldDescription="User Profile Default">
  <items jcr:primaryType="nt:unstructured">
  <fallback-populated-by
   granite:class="cq-dialog-dropdown-showhide"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/select"
   fieldDescription="Pop"
   fieldLabel="Fallback"
   name="./fallbackPopulateBy">
  <items jcr:primaryType="nt:unstructured">
  <aoi-default
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="fallback-aoi"/>
  <em-default
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="fallback-em"/>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   cq-dialog-dropdown-showhide-target=".fallback-populated-by-showhide-target"/>
  </fallback-populated-by>
  <fallback-area-of-interest-container
   granite:class="hide fallback-populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="fallback-aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </fallback-area-of-interest-container>
  <fallback-entity-membership-container
   granite:class="hide fallback-populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="fallback-em"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </fallback-entity-membership-container>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="up"/>
  <area-of-interest-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </area-of-interest-container>
  </user-profile-container>
  <area-of-interest-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </area-of-interest-container>
  <entity-membership-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="em"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </entity-membership-container>
  </items>
  </column>
  </items>
  </content>
</jcr
:root>

Discussion

Coral 2 vs Coral 3

You used Coral 2 to implement your Edit Dialog, which may be standard on 6.2 installations but is quickly going out of style for more recent releases. Consider, wherever possible, migrating to Coral 3 as it has new and better features and will future-proof your project when you decide to migrate to a newer version (which I strongly recommend by the way, I think you may be behind on several serious security fixes). You can learn more about Coral 3 here: Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation.

Important: if you do decide to start using Coral 3 components, avoid creating UIs/dialogs that include a mix of Coral 2 and 3, I've seen many weird side-effects from this. You can tell Coral 2 and 3 components apart by their location in the JCR:

Coral 2: /libs/granite/ui/components/foundation

Coral 3: /libs/granite/ui/components/coral/foundation

Impact on your implementation

  1. As you can see in the XML, the dynamic field show/hide functionality is now implemented with the use of granite:data nodes placed under the drop-downs (to indicate that the drop-down will trigger show/hide) and targets (to indicate that a node will be affected by the show/hide). The implementation remains largely the same, but by placing this information in separate nodes, it becomes a lot clearer and is de-coupled from the node's other properties.

  2. I changed the resource type of the tag selectors and placed them inside containers. As the entire container is shown or hidden based on the drop-down selection, you won't see the selected tags of the hidden components.

I hope this helps, if it doesn't work for you (I tested this on AEM 6.5.1), please tell me

View solution in original post

3 Replies

Avatar

Level 10

I think I can help you but it depends on one thing: what version of AEM are you on?

Avatar

Level 2

Thanks for the reply.  We are using 6.2 SP1.

Avatar

Correct answer by
Level 10

Demo

Here is a working example of your Edit Dialog using Coral 3 (open image in a new tab if it's too small to see).

Peek 2019-08-27 21-43.gif

Code

Here is the XML for the demo above. Please be careful! I copied the XML you provided as a base and converted it to Coral 3 (plus some other modifications). The XML below creates an Edit Dialog that behaves the way I understood your requirement, but it will not work as-is with your component (I wasn't pedantic about name fields for example, and I renamed some nodes for my own comprehension):

<?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="Properties"
   sling:resourceType="cq/gui/components/authoring/dialog">
  <content
   jcr:primaryType="nt:unstructured"
   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">
  <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="Title"
   name="./jcr:title"
   required="{Boolean}true"/>
  <populated-by
   granite:class="cq-dialog-dropdown-showhide"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/select"
   fieldDescription="Populate By"
   fieldLabel="Populate By"
   name="./populateBy"
   required="{Boolean}true">
  <items jcr:primaryType="nt:unstructured">
  <user-profile
   jcr:primaryType="nt:unstructured"
   text="User Profile"
   value="up"/>
  <areas-of-interest
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="aoi"/>
  <entity-membership
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="em"/>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   cq-dialog-dropdown-showhide-target=".populated-by-showhide-target"/>
  </populated-by>
  <user-profile-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container"
   fieldDescription="User Profile Default">
  <items jcr:primaryType="nt:unstructured">
  <fallback-populated-by
   granite:class="cq-dialog-dropdown-showhide"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/select"
   fieldDescription="Pop"
   fieldLabel="Fallback"
   name="./fallbackPopulateBy">
  <items jcr:primaryType="nt:unstructured">
  <aoi-default
   jcr:primaryType="nt:unstructured"
   text="Areas of Interest"
   value="fallback-aoi"/>
  <em-default
   jcr:primaryType="nt:unstructured"
   text="Entity Membership"
   value="fallback-em"/>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   cq-dialog-dropdown-showhide-target=".fallback-populated-by-showhide-target"/>
  </fallback-populated-by>
  <fallback-area-of-interest-container
   granite:class="hide fallback-populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="fallback-aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </fallback-area-of-interest-container>
  <fallback-entity-membership-container
   granite:class="hide fallback-populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="fallback-em"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </fallback-entity-membership-container>
  </items>
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="up"/>
  <area-of-interest-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </area-of-interest-container>
  </user-profile-container>
  <area-of-interest-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="aoi"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </area-of-interest-container>
  <entity-membership-container
   granite:class="hide populated-by-showhide-target"
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container">
  <granite:data
   jcr:primaryType="nt:unstructured"
   showhidetargetvalue="em"/>
  <items jcr:primaryType="nt:unstructured">
  <tags
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/coral/common/form/tagfield"
   fieldLabel="Tags"
   multiple="{Boolean}true"
   name="./tags"/>
  </items>
  </entity-membership-container>
  </items>
  </column>
  </items>
  </content>
</jcr
:root>

Discussion

Coral 2 vs Coral 3

You used Coral 2 to implement your Edit Dialog, which may be standard on 6.2 installations but is quickly going out of style for more recent releases. Consider, wherever possible, migrating to Coral 3 as it has new and better features and will future-proof your project when you decide to migrate to a newer version (which I strongly recommend by the way, I think you may be behind on several serious security fixes). You can learn more about Coral 3 here: Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation.

Important: if you do decide to start using Coral 3 components, avoid creating UIs/dialogs that include a mix of Coral 2 and 3, I've seen many weird side-effects from this. You can tell Coral 2 and 3 components apart by their location in the JCR:

Coral 2: /libs/granite/ui/components/foundation

Coral 3: /libs/granite/ui/components/coral/foundation

Impact on your implementation

  1. As you can see in the XML, the dynamic field show/hide functionality is now implemented with the use of granite:data nodes placed under the drop-downs (to indicate that the drop-down will trigger show/hide) and targets (to indicate that a node will be affected by the show/hide). The implementation remains largely the same, but by placing this information in separate nodes, it becomes a lot clearer and is de-coupled from the node's other properties.

  2. I changed the resource type of the tag selectors and placed them inside containers. As the entire container is shown or hidden based on the drop-down selection, you won't see the selected tags of the hidden components.

I hope this helps, if it doesn't work for you (I tested this on AEM 6.5.1), please tell me