Data-sly to check if dropdown value is selected

Forum|Forum|9 months ago
April 15, 2025
1 reply
427 views

I have a dropdown to populate dialog if 'barcode-yes' is selected which is working.

Currently I have data-sly for the barcode code dependant on an img path && alt-text being filled out.
I would like the data-sly to look for 'barcode-yes' being selected from the dropdown instead of the content being filled out for better efficiency.

Current data-sly below.

<sly data-sly-test="${properties.imgBarcode && properties.imgBarcodeAltTxt}">
    <div style="margin:32px 0; padding:0;" class="m-b-24">
	<img src="${properties.imgBarcode @2941342='html'}" alt="Barcode ${properties.imgBarcodeAltTxt}" title="Barcode ${properties.imgBarcodeAltTxt}" width="327" style="border:0; display:block; width:100%; max-width:327px; font-size:20px; line-height:24px;"/>
    </div>
</sly>

<barcode-select
                        jcr:primaryType="nt:unstructured"
                        granite:class="cq-dialog-dropdown-showhide"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        class="cq-dialog-dropdown-showhide"
                        cq-dialog-dropdown-showhide-target=".barcode-showhide-target"
                        fieldLabel="Include Barcode?"
                        name="./layout">
                        <items jcr:primaryType="nt:unstructured">
                            <barcode-no
                                jcr:primaryType="nt:unstructured"
                                text="No"
                                value="barcode-no"/>
                            <barcode-yes
                                jcr:primaryType="nt:unstructured"
                                text="Yes"
                                value="barcode-yes"/>
                        </items>
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>
                    </barcode-select>

Best answer by SantoshSai

Hi @kylemd,

You're currently using a data-sly-test to conditionally render the barcode image based on whether imgBarcode and imgBarcodeAltTxt are filled, but now you want to control it based solely on whether the dropdown value is set to barcode-yes for cleaner logic.

Here's how to update your `data-sly`:

Assuming your dropdown field is saved under ./layout, and the selected value is either "barcode-yes" or "barcode-no" — just change your data-sly-test to check for that:

<sly data-sly-test="${properties.layout == 'barcode-yes'}">
    <div style="margin:32px 0; padding:0;" class="m-b-24">
        <img src="${properties.imgBarcode @ context='html'}"
             alt="Barcode ${properties.imgBarcodeAltTxt}"
             title="Barcode ${properties.imgBarcodeAltTxt}"
             width="327"
             style="border:0; display:block; width:100%; max-width:327px; font-size:20px; line-height:24px;" />
    </div>
</sly>

Hope that helps!

Regards,
Santosh

SantoshSai

Accepted solution

Community Advisor

Hi @kylemd,

You're currently using a data-sly-test to conditionally render the barcode image based on whether imgBarcode and imgBarcodeAltTxt are filled, but now you want to control it based solely on whether the dropdown value is set to barcode-yes for cleaner logic.

Here's how to update your `data-sly`:

Assuming your dropdown field is saved under ./layout, and the selected value is either "barcode-yes" or "barcode-no" — just change your data-sly-test to check for that:

<sly data-sly-test="${properties.layout == 'barcode-yes'}">
    <div style="margin:32px 0; padding:0;" class="m-b-24">
        <img src="${properties.imgBarcode @ context='html'}"
             alt="Barcode ${properties.imgBarcodeAltTxt}"
             title="Barcode ${properties.imgBarcodeAltTxt}"
             width="327"
             style="border:0; display:block; width:100%; max-width:327px; font-size:20px; line-height:24px;" />
    </div>
</sly>

Hope that helps!

Regards,
Santosh

Santosh Sai

K

kylemdAuthor

Level 2

Works! Thanks for the assist.

I was missing .layout when I originally tried something similar.

Here's how to update your data-sly:

Here's how to update your data-sly:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Here's how to update your `data-sly`:

Here's how to update your `data-sly`: