Dynamic dropdown in Dialog box in a component | Community
Skip to main content
S
sai_navatej
March 1, 2024
Question

Dynamic dropdown in Dialog box in a component

  • March 1, 2024
  • 1 reply
  • 577 views

Hello everyone,
I am using aem 6.5.5 . so my requirement is to get a dynamic dropdown in a dialog box of component. having the dropdown in the dialog box with the content fragment models which i created, so whatever i select the contentfragment model name in the dialog box i needed to render its content fragment details which have been created by using that content fragment model.
so now i am new to this development how do i need to start or how do i need to complete this requirement..



This is how my component hierarchy is ,.now in this component instead of this author 1 and author 2 details whenever i select the author i need to render the content fragment model details which are present in the 
/content/dam/mysite/cfm/car-fragmnent/jcr:content/data/master

 

 

 

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

1 reply

anupampat
Community Advisor
anupampatCommunity Advisor
Community Advisor
March 14, 2024

Hi @sai_navatej,

For dynamic dropdown, you need to use datasource and then point to a Servlet 

Refer - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/forms/customize-aem-forms/dynamically-populate-dropdowns .

This can list all the Content fragment. 

 

<fragmentPath1 granite:class="cfFragment1" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" emptyText="Select" emptyOption="{Boolean}true" fieldLabel="Random Name" name="./fragmentPath1"> <datasource jcr:primaryType="nt:unstructured" sling:resourceType="abc/components/randomComponent" componentPath="${requestPathInfo.suffix}"/>

 

 Next you can use ContentFragment API and get the contentfragments 

ContentFragment contentFragment = fragmentResource.adaptTo(ContentFragment.class);
 
Once User selects a CF from the dropdown, you should have a custom JS at component dialog level which is triggered on change

 

$(document).off("change", ".cfFragment1, function(event) { var fragmentPath1 = $(".cfFragment1").val(); $.ajax({ url: "/servletPath", data: { fragmentPath1: fragmentPath1 } }).done(function (result) { if (result != null && result != undefined && result != "") { if (result.headline) { $(".someClass").val(result.yourObj.value); $(".someClass").val(result.yourObj.module); } } }); });

 

which can call another Servlet and it can return a Json response created from getter/setter.
Fetch all the relevant details/fields and set them.
Terms & ConditionsAccessibility statement

Loading footer...