Level 3

Risolto

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

Forum|Forum|3 years ago
July 22, 2022
3 risposte
5871 visualizzazioni

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.

Questo argomento è stato chiuso alle risposte.

Migliore risposta di DEBAL_DAS

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 -

A

AnikaAg

Adobe Employee

Create a data source out of the generic list.

M

Manasi29Autore

Level 3

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?

A

AnikaAg

Adobe Employee

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

ShaileshBassi

Community Advisor

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

New Member

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 -

Debal Das, Senior AEM Consultant

Registrati

Accesso al social

Accedi alla community

Accesso al social

Scansione del file per virus.

Questo file non può essere scaricato