Invoke dialog dropdown values from sling model

[arindam6600]

Following is the use-case I'm dealing with :

I need to create a custom component wherein I've to design a dialog which will have a dropdown within it and the values of the dropdown should be sent over from backend sling model. Ideally, the requirement is to show the latest 4 pages title in the dialog dropdown (it should be dynamic i.e it should change with every new page creation) and upon selecting any the thumbnail and the page title will show up.

Can anyone help me with any reference link or maybe the code snippet or any relevant examples?

Thanks!

[SureshDhulipudi · Accepted solution]

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-p...

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 {

@inject
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.

@component(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 {

@Override
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>