Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Sharing sample code , hope this will help you -

 

1. Acs commons generic list associated with Indian cities -

  

DEBAL_DAS_0-1658575329982.png

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

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

  

DEBAL_DAS_1-1658575419310.png

 

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 -

 

DEBAL_DAS_2-1658575604051.png

 

View solution in original post

5 Replies

Avatar

Level 2

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?

 

 

Avatar

Level 8

@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

Avatar

Correct answer by
Community Advisor

Sharing sample code , hope this will help you -

 

1. Acs commons generic list associated with Indian cities -

  

DEBAL_DAS_0-1658575329982.png

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

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

  

DEBAL_DAS_1-1658575419310.png

 

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 -

 

DEBAL_DAS_2-1658575604051.png