Conditional Display for Dialog Fields using OOTB Capabilities

Creating TouchUI dialogs that can dynamically show or hide fields based on the user input can help to provide a cleaner authoring experience. This can keep the dialog simple and effective by only displaying the necessary fields based on the selection.

This can be performed either by drop-down selection, a checkbox or a radio button option in the dialog based on the requirement.

OOTB Show/Hide with dropdown:

The show/hide for dropdown is an OOTB feature available in AEM. We have the inbuilt JavaScript to perform this action in

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

There are four simple steps to toggle the dialog fields based on our selection, let’s take the list component as an example.

1. Add “cq-dialog-dropdown-showhide” class to the drop-down node

2. Add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element and value should be jQuery selector

3. Add the target selector class to each target component that can be shown/hidden

4. To hide or show the container based on the dropdown, add showhidetargetvalue which depends on the value of options in the dropdown (showhidetargetvalue = value of dropdown option). In this example the dropdown value for Child pages matching the show showhidetargetvalue

Based on the selection in the dropdown the fields /container is displayed or hidden in the dialog

Full component dialog xml for reference (list/_cq_dialog/.content.xml) :

<content
   granite:class="cmp-list__editor"
   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"
           maximized="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
               <listSettings
                   jcr:primaryType="nt:unstructured"
                   jcr:title="List Settings"
                   sling:resourceType="granite/ui/components/coral/foundation/container"
                   margin="{Boolean}true">
                   <items jcr:primaryType="nt:unstructured">
                       <columns
                           jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                           margin="{Boolean}true">
                           <items jcr:primaryType="nt:unstructured">
                               <column
                                   jcr:primaryType="nt:unstructured"
                                   sling:resourceType="granite/ui/components/coral/foundation/container">
                                   <items jcr:primaryType="nt:unstructured">
                                       <listFrom
                                           granite:class="cq-dialog-dropdown-showhide"
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                           cq-msm-lockable="./listFrom"
                                           fieldLabel="Build List Using"
                                           name="./listFrom">
                                           <granite:data
                                               jcr:primaryType="nt:unstructured"
                                               cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>
                                           <items jcr:primaryType="nt:unstructured">
                                               <children
                                                   granite:hide="${cqDesign.disableChildren}"
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Child pages"
                                                   value="children"/>
                                               <static
                                                   granite:hide="${cqDesign.disableStatic}"
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Fixed list"
                                                   value="static"/>
                                               <search
                                                   granite:hide="${cqDesign.disableSearch}"
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Search"
                                                   value="search"/>
                                               <tags
                                                   granite:hide="${cqDesign.disableTags}"
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Tags"
                                                   value="tags"/>
                                           </items>
                                       </listFrom>
                                       <setChildren
                                           granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/container">
                                           <granite:data
                                               jcr:primaryType="nt:unstructured"
                                               showhidetargetvalue="children"/>
                                           <items jcr:primaryType="nt:unstructured">
                                               <heading
                                                   granite:class="coral-Heading coral-Heading--4"
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/heading"
                                                   level="{Long}4"
                                                   text="Options for Child Pages"/>
                                               <well
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/well">
                                                   <items jcr:primaryType="nt:unstructured">
                                                       <parentPage
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                           cq-msm-lockable="./parentPage"
                                                           fieldDescription="Leave empty to use current page"
                                                           fieldLabel="Parent Page"
                                                           name="./parentPage"
                                                           rootPath="/content"/>
                                                       <childDepth
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                           cq-msm-lockable="./childDepth"
                                                           fieldDescription="Controls how deep the child items can be added to the list"
                                                           fieldLabel="Child Depth"
                                                           max="100"
                                                           min="1"
                                                           name="./childDepth"
                                                           step="1"
                                                           value="1"/>
                                                   </items>
                                               </well>
                                           </items>
                                       </setChildren>
                                       <setStatic
                                           granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/container">
                                           <granite:data
                                               jcr:primaryType="nt:unstructured"
                                               showhidetargetvalue="static"/>
                                           <items jcr:primaryType="nt:unstructured">
                                               <heading
                                                   granite:class="coral-Heading coral-Heading--4"
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/heading"
                                                   level="{Long}4"
                                                   text="Options for Fixed List"/>
                                               <well
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/well">
                                                   <items jcr:primaryType="nt:unstructured">
                                                       <pages
                                                           granite:class="foundation-layout-util-maximized-alt coral-Form-fieldwrapper"
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/container">
                                                           <items jcr:primaryType="nt:unstructured">
                                                               <multi
                                                                   granite:class=""
                                                                   jcr:primaryType="nt:unstructured"
                                                                   sling:resourceType="granite/ui/components/coral/foundation/form/multifield">
                                                                   <field
                                                                       jcr:primaryType="nt:unstructured"
                                                                       sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                                       cq-msm-lockable="./pages"
                                                                       name="./pages"
                                                                       rootPath="/content"/>
                                                               </multi>
                                                           </items>
                                                       </pages>
                                                   </items>
                                               </well>
                                           </items>
                                       </setStatic>
                                       <setSearch
                                           granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/container">
                                           <granite:data
                                               jcr:primaryType="nt:unstructured"
                                               showhidetargetvalue="search"/>
                                           <items jcr:primaryType="nt:unstructured">
                                               <heading
                                                   granite:class="coral-Heading coral-Heading--4"
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/heading"
                                                   level="{Long}4"
                                                   text="Options for Search"/>
                                               <well
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/well">
                                                   <items jcr:primaryType="nt:unstructured">
                                                       <query
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                           cq-msm-lockable="./query"
                                                           fieldLabel="Search Query"
                                                           name="./query"/>
                                                       <queryContentPath
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                           cq-msm-lockable="./searchIn"
                                                           fieldDescription="Leave empty to use current site (eg. /content/mysite)"
                                                           fieldLabel="Search In"
                                                           name="./searchIn"
                                                           rootPath="/content"/>
                                                   </items>
                                               </well>
                                           </items>
                                       </setSearch>
                                       <setTags
                                           granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/container">
                                           <granite:data
                                               jcr:primaryType="nt:unstructured"
                                               showhidetargetvalue="tags"/>
                                           <items jcr:primaryType="nt:unstructured">
                                               <heading
                                                   granite:class="coral-Heading coral-Heading--4"
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/heading"
                                                   level="{Long}4"
                                                   text="Options for Tags"/>
                                               <well
                                                   jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/coral/foundation/well">
                                                   <items jcr:primaryType="nt:unstructured">
                                                       <parentPage
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                           cq-msm-lockable="./tagsSearchRoot"
                                                           fieldDescription="Leave empty to use current page"
                                                           fieldLabel="Parent Page"
                                                           name="./tagsSearchRoot"
                                                           rootPath="/content"/>
                                                       <tags
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="cq/gui/components/coral/common/form/tagfield"
                                                           cq-msm-lockable="./tags"
                                                           fieldLabel="Tags"
                                                           multiple="{Boolean}true"
                                                           name="./tags"/>
                                                       <match
                                                           jcr:primaryType="nt:unstructured"
                                                           sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                           cq-msm-lockable="./tagsMatch"
                                                           fieldLabel="Match"
                                                           name="./tagsMatch">
                                                           <items jcr:primaryType="nt:unstructured">
                                                               <any
                                                                   jcr:primaryType="nt:unstructured"
                                                                   text="Any tag"
                                                                   value="any"/>
                                                               <all
                                                                   jcr:primaryType="nt:unstructured"
                                                                   text="All tags"
                                                                   value="all"/>
                                                           </items>
                                                       </match>
                                                   </items>
                                               </well>
                                           </items>
                                       </setTags>
                                       <orderBy
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                           cq-msm-lockable="./orderBy"
                                           emptyOption="{Boolean}true"
                                           fieldDescription="Enter a property like 'jcr:created'"
                                           fieldLabel="Order By"
                                           name="./orderBy"
                                           type="editable">
                                           <items jcr:primaryType="nt:unstructured">
                                               <title
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Title"
                                                   value="title"/>
                                               <modified
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Last modified date"
                                                   value="modified"/>
                                           </items>
                                       </orderBy>
                                       <sortOrder
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                           cq-msm-lockable="./sortOrder"
                                           fieldDescription="Sort order ascending or descending"
                                           fieldLabel="Sort Order"
                                           name="./sortOrder"
                                           type="editable">
                                           <items jcr:primaryType="nt:unstructured">
                                               <asc
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Ascending"
                                                   value="asc"/>
                                               <desc
                                                   jcr:primaryType="nt:unstructured"
                                                   text="Descending"
                                                   value="desc"/>
                                           </items>
                                       </sortOrder>
                                       <maxItems
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                           cq-msm-lockable="./maxItems"
                                           fieldDescription="Maximum number of items displayed in list. Empty for all items."
                                           fieldLabel="Max Items"
                                           min="{Long}0"
                                           name="./maxItems"/>
                                   </items>
                               </column>
                           </items>
                       </columns>
                   </items>
               </listSettings>
               <itemSettings
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Item Settings"
                   sling:resourceType="granite/ui/components/coral/foundation/container"
                   margin="{Boolean}true">
                   <items jcr:primaryType="nt:unstructured">
                       <columns
                           jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                           margin="{Boolean}true">
                           <items jcr:primaryType="nt:unstructured">
                               <column
                                   jcr:primaryType="nt:unstructured"
                                   sling:resourceType="granite/ui/components/coral/foundation/container">
                                   <items jcr:primaryType="nt:unstructured">
                                       <linkItems
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                           checked="${not empty cqDesign.linkItems ? cqDesign.linkItems : false}"
                                           cq-msm-lockable="./linkItems"
                                           fieldDescription="Link items to the corresponding page"
                                           name="./linkItems"
                                           text="Link items"
                                           uncheckedValue="false"
                                           value="true"/>
                                       <showDescription
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                           checked="${not empty cqDesign.showDescription ? cqDesign.showDescription : false}"
                                           cq-msm-lockable="./showDescription"
                                           fieldDescription="Show descriptions of the link item"
                                           name="./showDescription"
                                           text="Show description"
                                           uncheckedValue="false"
                                           value="true"/>
                                       <showModificationDate
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                           checked="${not empty cqDesign.showModificationDate ? cqDesign.showModificationDate : false}"
                                           cq-msm-lockable="./showModificationDate"
                                           fieldDescription="Show modification date of the link item"
                                           name="./showModificationDate"
                                           text="Show date"
                                           uncheckedValue="false"
                                           value="true"/>
                                   </items>
                               </column>
                           </items>
                       </columns>
                   </items>
               </itemSettings>
               <properties
                   jcr:primaryType="nt:unstructured"
                   jcr:title="Properties"
                   sling:resourceType="granite/ui/components/coral/foundation/container"
                   margin="{Boolean}true">
                   <items jcr:primaryType="nt:unstructured">
                       <columns
                           jcr:primaryType="nt:unstructured"
                           sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                           margin="{Boolean}true">
                           <items jcr:primaryType="nt:unstructured">
                               <column
                                   jcr:primaryType="nt:unstructured"
                                   sling:resourceType="granite/ui/components/coral/foundation/container">
                                   <items jcr:primaryType="nt:unstructured">
                                       <id
                                           jcr:primaryType="nt:unstructured"
                                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                           fieldDescription="HTML ID attribute to apply to the component."
                                           fieldLabel="ID"
                                           name="./id"/>
                                   </items>
                               </column>
                           </items>
                       </columns>
                   </items>
               </properties>
           </items>
       </tabs>
   </items>
</content>