Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

data sly test to check if dropdown is selected or not

Avatar

Level 2

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>