How can we populate a generic list in form of dropdown in search box on a page?

[Manasi29]

We are creating a generic list using ACS commons we want that list as a part of search box where the list will be represented as a dropdown whenever user clicks in the search box. What are the approaches we can use to achieve the functionality by retrieving the generic list data.

[anika_agarwal]

Create a data source out of the generic list.

[Manasi29]

We want that list as a part of component on a page not as a part of dialog box. Any solutions for that specific use case?

[anika_agarwal]

https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

Check the API section. I feel this should help

Thanks

Anika

[Shailesh_Bassi_]

@Manasi29 To achieve this functionality you can create the sling model and within the sling model get the resource present in the location i.e. /etc/acs-commons/lists. For getting the values from the resource present under the list you can leverage the Resource API.

String resourcePath = "/etc/acs-commons/lists/<list-name>";
Resource resource = resolver.getResource(resourcePath);

Once you get the resource you can create the list from the sling model and the same can be iterated in sightly

<ul data-sly-list.myitem="${mymodel.myitems}" data-sly-unwrap>
  <li>${myitem.foo}</li>
</ul>

This way the component will be cached and the list will also be populated from the generic list created from the Generic List in ACS Commons.

Hope this helps!

Thanks

[DEBAL_DAS · Accepted solution]

Sharing sample code , hope this will help you -

1. Acs commons generic list associated with Indian cities -

2. Location of acs common generic list associated with Indian cities in AEM repository -

    /etc/acs-commons/lists/cities/jcr:content/list

3. Below sling model is responsible to read generic list associated with Indian cities -

package com.aem.demo.core.models;

import java.util.HashMap;
import java.util.Map;
import java.util.Objects;

import javax.annotation.PostConstruct;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;

import com.drew.lang.annotations.NotNull;
import com.drew.lang.annotations.Nullable;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class City  {

    

    @SlingObject
    private ResourceResolver resourceResolver;

    private Map<String, String> citymap;
    
    
	@PostConstruct
    protected void init() {
    	@Nullable
		Resource resource = resourceResolver.getResource("/etc/acs-commons/lists/cities/jcr:content/list");
    	if (Objects.nonNull(resource)) {
    		citymap = new HashMap<String, String>();
    		@NotNull
			Iterable<Resource> children = resource.getChildren();
    		for (Resource childResource : children) {
    			
    			
				String title = childResource.getValueMap().get("jcr:title", String.class);
				
				String nodevalue = childResource.getValueMap().get("value", String.class);
				citymap.put(nodevalue, title);
				
			}
    		
    		
			
		}
    	
		
	}
	public Map<String, String> getCitymap() {
		return citymap;
	}

    
   }

4. AEM component with code a field with drop down options -

APP</br>




<label>Please select a City:</label>
<input list="city-details" id="city-choice" name="city-choice" />
<div data-sly-use.cmap="com.aem.demo.core.models.City">
<datalist id="city-details">
<sly data-sly-list="${cmap.citymap}">
    <option value="${cmap.citymap[item]}">
</sly>    
</datalist>

</div>

5. Final output -