Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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>