Dynamic Dialog - able to see secondary choice after first level is changed | Community
Skip to main content
J
joeobar
Level 2
August 26, 2019
Solved

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

  • August 26, 2019
  • 3 replies
  • 2419 views

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.

<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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Theo_Pendle

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).

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

3 replies

Theo_Pendle
Theo_Pendle
Level 8
August 27, 2019

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

J
joeobarAuthor
Level 2
August 27, 2019

Thanks for the reply.  We are using 6.2 SP1.

Theo_Pendle
Theo_PendleAccepted solution
Level 8
August 27, 2019

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).

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

    Terms & ConditionsAccessibility statement

    Loading footer...