Please go through the examples given below:
https://aemlab.blogspot.com/2019/07/aem-touch-ui-dropdown-from-json.html
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-get-current-selected-page-path-in-datasource-sling-model/m-p/651974
1) Sling Model - You can use a Sling Model to fetch the data from the backend and a Dialog UI datasource to populate the dropdown.
@Model(adaptables = SlingHttpServletRequest.class)
public class PageListSlingModel {
@586265
private ResourceResolver resourceResolver;
public List<PageData> getLatestPages() {
// Logic to fetch the latest 4 pages
// Return a list of PageData objects
}
public class PageData {
private String title;
private String path;
// Getters and setters
}
}
2)
Sling Servlet that uses the Sling Model to fetch the data and returns it in a format that can be used by the datasource.
@8220494(service=Servlet.class,
property={
Constants.SERVICE_DESCRIPTION + "=Page List Servlet",
"sling.servlet.methods=" + HttpConstants.METHOD_GET,
"sling.servlet.resourceTypes=" + "myapp/components/page-list-servlet",
"sling.servlet.extensions=" + "json"
})
public class PageListServlet extends SlingSafeMethodsServlet {
@9944223
protected void doGet(final SlingHttpServletRequest req,
final SlingHttpServletResponse resp) throws ServletException, IOException {
PageListSlingModel model = req.adaptTo(PageListSlingModel.class);
List<PageData> pages = model.getLatestPages();
// Convert the list of pages to JSON and write it to the response
}
}
3) Create Dialog - dropdown field - (granite/ui/components/coral/foundation/form/select) and set its datasource to the path of the servlet.
<pagetitle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Title Of page"
fieldLabel="Page Title"
name="./pagetitle">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="myapp/components/page-list-servlet"/>
</pagetitle>