hide dropdown options of a field in a component based on placement in different template page | Community
Skip to main content
Level 2
December 9, 2024
Solved

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

  • December 9, 2024
  • 2 replies
  • 438 views

based on page sling resource type we need to hide a field dropdown options . Can anyone help me with java script code for this?

Tried this

<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";
}
});
}
});

TIA 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

Hi @jyo234678 

 

It looks like you duplicated your question here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hide-dropdown-options-of-a-field-in-a-component-based-on/td-p/725190. Can you please close this thread to keep consistency and avoid duplication?

 

Thanks

2 replies

DPrakashRaj
Community Advisor
Community Advisor
December 10, 2024

Can you try to debug your code by putting either debugger or putting console.log to check if your Java script is getting executed as per expectation and the variables are having the expected values to do the hide and show?

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
December 10, 2024

Hi @jyo234678 

 

It looks like you duplicated your question here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hide-dropdown-options-of-a-field-in-a-component-based-on/td-p/725190. Can you please close this thread to keep consistency and avoid duplication?

 

Thanks

Esteban Bustamante