Show/Hide Fields in AEM dialog

Conditionally show/hide fields in AEM Dialog (AEM 6.3+)

Goal

Create a dialog that shows/hides fields based on a selection.

Procedure

Let’s create our dialog as follows:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Slide - Image-Video" 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=".carousel-showhide-target"
						fieldLabel="Asset Type:" name="./assetType">
						<items jcr:primaryType="nt:unstructured">
							<video jcr:primaryType="nt:unstructured" text="Video" value="video" />
							<image jcr:primaryType="nt:unstructured" text="Image" value="image" />
						</items>
					</list>
					<setVideo jcr:primaryType="nt:unstructured"
						sling:resourceType="granite/ui/components/foundation/container"
					 	class="hide carousel-showhide-target"
						showhidetargetvalue="video">
						<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="Video Configuration" />
							<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">
									<videoId
										jcr:primaryType="nt:unstructured"
										sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
										fieldLabel="Video Id"
										name="./videoId">
									</videoId>
									<videoBackgroundImage
										jcr:primaryType="nt:unstructured"
										sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
										fieldLabel="Video Background Image"
										rootPath="/content/dam"
										name="./videoBackgroundImage">
									</videoBackgroundImage>
									<videoBackgroudImageAlt
										jcr:primaryType="nt:unstructured"
										sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
										fieldLabel="Video Background Image Alt"
										name="./videoBackgroudImageAlt">
									</videoBackgroudImageAlt>
								</items>
							</well>
						</items>
					</setVideo>
					<setImage jcr:primaryType="nt:unstructured"
						 sling:resourceType="granite/ui/components/foundation/container"
						 class="hide carousel-showhide-target foundation-layout-util-vmargin"
						 showhidetargetvalue="image">
						<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="Image Configuration" />
							<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">
									<asset
										jcr:primaryType="nt:unstructured"
										sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
										fieldLabel="Image"
										rootPath="/content/dam/"
										name="./assetImage"/>
									<imageAlt
										jcr:primaryType="nt:unstructured"
										sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
										fieldLabel="Image Alt"
										name="./imageAlt">
									</imageAlt>
								</items>
							</well>
						</items>
					</setImage>
				</items>
			</column>
		</items>
	</content>
</jcr:root>

Let me show immediately the result:

How did we get this?

  1. Add the class=”cq-dialog-dropdown-showhide” to the list tag (select list) to activate the show/hide functionality
  2. Add the cq-dialog-dropdown-showhide-target property again to the list tag (select list). You can choose any value, it’s just a CSS selector to target the fields. I set “.carousel-showhide-target“.
  3. Create the containers for your fields, in our case <setVideo> and <setImage>, and:
    1. Set the class=”hide carousel-showhide-target” on both of them, where “carousel-showhide-target” is the selector we used.
    2. Set the property showhidetargetvalue on both of them. The value it depends on your dropdown values. In this case I used respectively “video” and “image”. So, for example, showhidetargetvalue =”video” means that the container is displayed when the user chooses “video” in the dropdown.

If you are curious about how this can work, there is a script here: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js that uses CSS selectors to add or remove a hide class from elements.

Well, that’s all! This has been tested on AEM 6.5 but I’m pretty sure that can work on AEM 6.4 and 6.3. Honestly I’m not sure in the previous versions because the sling:resourceType will be different (not the coral one).

Cheers! 🍾

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: