Dynamic dropdown in Dialog box in a component

[sai_navatej]

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

[anupampat]

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/d... .

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.