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