Data-sly to check if dropdown value is selected

[kylemd]

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 @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>

<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>

[SantoshSai · Accepted solution]

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

[kylemd]

Works! Thanks for the assist.

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