hide dropdown options of a field in a component based on placement in different template page

[Jyo234678]

based on page sling resource type we need to hide few  field dropdown options . Can anyone help me with java script code for this? I tried but it seems not working .

<image-type jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/select"
            fieldLabel="Image(s) Type"
            name="./imageType">
                   <granite:data jcr:primaryType="nt:unstructured"
                                 resourceType="${pageProperties.sling:resourceType}"/>
    <items jcr:primaryType="nt:unstructured">
       <option-1 jcr:primaryType="nt:unstructured"
                 text="Single Landscape Image"
                 value="{Long}1"
                 selected="{Boolean}true"/>
       <option-7 jcr:primaryType="nt:unstructured"
                 text="Single Portrait Image"
                 value="{Long}7"/>
       <option-2 jcr:primaryType="nt:unstructured"
                 text="Two Landscape Images"
                 value="{Long}2"/>
       <option-3 jcr:primaryType="nt:unstructured"
                 text="Two Portrait Images"
                 value="{Long}3"/>
       <option-4 jcr:primaryType="nt:unstructured"
                 text="One Portrait (left side) and Two Landscape Images (right side)"
                 value="{Long}4"/>
       <option-5 jcr:primaryType="nt:unstructured"
                 text="Two Landscape Images (left side) and One Portrait(right side)"
                 value="{Long}5"/>
       <option-6 jcr:primaryType="nt:unstructured"
                 text="Four Landscape Images"
                 value="{Long}6"/>
       <option-8 jcr:primaryType="nt:unstructured"
                 text="Expanded Size - 1 landscape image"
                 value="{Long}8"/>
       <option-9 jcr:primaryType="nt:unstructured"
                 text="Expanded Size - 2 landscape images"
                 value="{Long}9"/>
       <option-10 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 2 portrait images"
                  value="{Long}10"/>
       <option-11 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 1 portrait image (left side) with 2 small landscape images (right side)"
                  value="{Long}11"/>
       <option-12 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 2 small landscape images (left side) with 1 portrait image (right side)"
                  value="{Long}12"/>
       <option-13 jcr:primaryType="nt:unstructured"
                  text="Expanded Size - 4 landscape images"
                  value="{Long}13"/>
    </items>
</image-type>

document.addEventListener("DOMContentLoaded", function() {
    var resourceType = document.querySelector("[name='./imageType'] [data-resourceType]").dataset.resourceType;
    if (resourceType === "msi-occ/components/structure/pressreleasepage") {
        var options = document.querySelectorAll("[name='./imageType'] coral-select-item");
        options.forEach(function(option) {
            var value = parseInt(option.value, 10);
            if (value >= 8 && value <= 13) {
                option.style.display = "none";
            }
        });
    }
});

[arunpatidar]

Hi @Jyo234678 

Why don't you use datasource for dropdown options, there you can easily identify the resourceType/Template and control the options.

Examples

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/core/src/main/java/com/community/aemlab/... 

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/core/src/main/java/com/community/aemlab/... 

[Jyo234678]

Ok but can we achieve it in the above approach . with out backend code change?

[EstebanBustamante]

Hi

Most likely, there is an incorrect selector in your code, or the resourceType is not being captured correctly. Since we don't have the HTML, it's impossible to say exactly what’s wrong. Your best option is to debug it yourself, simply add a "debugger" statement in the code, and open the browser console, then you can continue from there.

Hope this helps.

[kautuk_sahni]

@Jyo234678 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!