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

data sly test to check if dropdown is selected or not

Avatar

Level 3

I have a dropdown with a list of items and I'm trying to show/hide an element only if something is selected from the dropdown.
In this case I'm trying to hide the "hero-icon" class.

 

 

 

<span data-sly-test="${properties.icon}" class="hero-icon"></span>

 

hrempd_0-1644498788593.png

How can this be achieved 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi,
If you have defined the select like this:

<icon jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/select"
	name="./icon" fieldLabel="Show Icon">
	<items jcr:primaryType="nt:unstructured">
		<hide jcr:primaryType="nt:unstructured" 
text="Hide Icon" value="hide"/>
<show jcr:primaryType="nt:unstructured" text="Show Icon" value="show"/> </items> </icon>


You can wirte something like this by simple adding the equals to the option value that you defined:

 

<span data-sly-test="${properties.icon=='show'}" class="hero-icon"></span>

 

 

View solution in original post

3 Replies

Avatar

Employee Advisor

Hi @hr-empd 

I am not sure if I understood the problem statement right, although:

If the value of dropdown is not set there would be NO property set in content with title=icon. 

If the selection has been made there would be a value existing in the content as :
Screenshot 2022-02-10 at 7.09.57 PM.png

 

 

Now, you can simply use data-sly-test as:

<span data-sly-test="${properties.icon}" class="test">some random text</span>

The span (Some random text) will only be displayed if there is something set in content under icon (here, IAMSelected ) property otherwise the span wont be displayed.

 

Let me know if that answers your question.

 

Thanks.

Avatar

Correct answer by
Level 2

Hi,
If you have defined the select like this:

<icon jcr:primaryType="nt:unstructured"
	sling:resourceType="granite/ui/components/coral/foundation/form/select"
	name="./icon" fieldLabel="Show Icon">
	<items jcr:primaryType="nt:unstructured">
		<hide jcr:primaryType="nt:unstructured" 
text="Hide Icon" value="hide"/>
<show jcr:primaryType="nt:unstructured" text="Show Icon" value="show"/> </items> </icon>


You can wirte something like this by simple adding the equals to the option value that you defined:

 

<span data-sly-test="${properties.icon=='show'}" class="hero-icon"></span>

 

 

Avatar

Community Advisor

Hi @hr-empd ,

      In your case do the following

1.On which drop-down  values you wanted to add that class.

2.use below logic 

<Sly data-sly-test="${properties.dropdown=='value1' }">

<div class="hero-icon">

</div>

</sly>