Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Granite Autocomplete list with query not returning

Avatar

Level 1

I am trying to use the autocomplete field to do a lookup connected with an external API.  In classic I could link the options list of a select field to a path and implement a servlet to do that work.  But I'm struggling to get the same working in Touch UI / Granite.

 

<product jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
emptyText="Search for an item"
fieldLabel="Product"
name="./productId">
<options jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"
src="/apps/foo/datasources/product.html{?query,start,end}"/>
</product>

 

This is calling into a servlet successfully.  However I've implemented placeholder code to return the JSON response I believe is required and it doesn't render.  Instead the list of matches is empty.

 

@SlingServlet(
paths = { ProductLookupDatasource.PATH },
methods = "GET")
public class ProductLookupDatasource extends SlingSafeMethodsServlet {

protected static final String PATH = "/apps/foo/datasources/product";

private static final Logger LOG = LoggerFactory.getLogger(ProductLookupDatasource.class);

@Override
protected void doGet(final SlingHttpServletRequest request, final SlingHttpServletResponse response)
throws IOException {

String query = request.getParameter("query");
LOG.info("Got request params [query: {}]", query);

/* PoC with example content */
try {
JSONArray results = new JSONArray();
for (int i = 0; i < 5; i++) {
JSONObject item = new JSONObject();
item.put("text", "value" + i);
item.put("value", "value" + i);

results.put(item);
}

response.setContentType("application/json;charset=UTF-8");
response.getWriter().print(results.toString());

} catch (JSONException e) {
throw new IOException(e);
}
}
}

 

The query is logged correctly, so I will be able to make the call out to the service and get the real data.  After 0.2 seconds further queries are made, so if I type in I'm getting the autocomplete experience from the front-end.  If I was able to see results back, it could deliver what I need.

 

But how should I return data?  I've tried a few variations on the response including a "content" object with an "innerHTML" attribute and none of them have worked to populate the response.  What format is required?

 

I also have a second concern, that the value written in the JCR will only keep the product ID and not the display name.  Is there a way of keeping both the display text and the id?  In the examples I've found, this is only used for tags, which have a built in datasource.  I've not found any examples with a bespoke datasource.  Please advise.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Can you please see if you can use datasource to load the options with dialog structure as below? With datasource the values are added in value map and datasource node will render the vm inputs.

                                 <autocomplete
jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/autocomplete" fieldLabel="Autocomplete" name="./autocomplete" displayProperty="jcr:content/jcr:title"> <datasource jcr:primaryType="nt:unstructured" sling:resourceType="/apps/project/component/list.html" /> <options jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/autocomplete/list" /> </autocomplete>


 You can use sling model to fetch desired list from your model to the data source. See this (Use updated Model annotations and put logic similar in your servlet.

For the second issue it seems a similar question was asked here. Please check: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/granite-autocomplete-field...

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Can you please see if you can use datasource to load the options with dialog structure as below? With datasource the values are added in value map and datasource node will render the vm inputs.

                                 <autocomplete
jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/autocomplete" fieldLabel="Autocomplete" name="./autocomplete" displayProperty="jcr:content/jcr:title"> <datasource jcr:primaryType="nt:unstructured" sling:resourceType="/apps/project/component/list.html" /> <options jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/autocomplete/list" /> </autocomplete>


 You can use sling model to fetch desired list from your model to the data source. See this (Use updated Model annotations and put logic similar in your servlet.

For the second issue it seems a similar question was asked here. Please check: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/granite-autocomplete-field...