How do I show the tagging values as a dropdown list in Dialog?

[Ameen_Dev]

Actually, I am trying to get and show all tagging values as a dropdown list in the dialog so that the author can choose the value from the dropdown list. I wrote the code but I am able to get only one tagging value by giving the array number. I have given my code below. Kindly help me to achieve the dropdown list.

package com.project.core.models.impl;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional;
import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.day.cq.tagging.Tag;
import com.day.cq.tagging.TagManager;
import com.project.core.models.PlanCards;

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class},
		 adapters = { PlanCards.class}, 
		 resourceType = {PlanCardsImpl.RESOURCE_TYPE})

public class PlanCardsImpl implements PlanCards {
	private static final Logger LOG = LoggerFactory.getLogger(PlanCardsImpl.class);

    /**
     * The resource type.
     */
    protected static final String RESOURCE_TYPE = "project/components/nwt/slider";

    @SlingObject
    @Deleted Account
    private Resource currentRes;

    @Deleted Account
    @Deleted Account
    private SlingHttpServletRequest request;

    @SlingObject
    private ResourceResolver resourceResolver;
    
    @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL)
	private String dataUses;
   
    @Override
	public String getDataUses() {
		return dataUses;
	}

	public void setDataUses(String dataUses) {
		this.dataUses = dataUses;
	}

	@PostConstruct
	  protected void init() {
		String plancardTag = "/content/cq:tags/project/plan-cards/data-uses";
		LOG.info("int() --> Plan cards default value");
		final TagManager tagManager = currentRes.getResourceResolver().adaptTo(TagManager.class);
	    final List<String> filterTagList = new ArrayList<>();
	    LOG.info("Product Details Filter tag path:: {}", plancardTag);
	    if (StringUtils.isNotBlank(plancardTag)) {
	      final Tag tag = tagManager.resolve(plancardTag);
	      if (null != tag) {
	        tag.listChildren().forEachRemaining(childtag -> {
	          filterTagList.add(childtag.getTitle());
	          LOG.info("childtag.getName():: {}", childtag.getName());
	        });
	      }
	    }
	    LOG.info("filterTagList:: {}", filterTagList.toString());
	    if (StringUtils.isBlank(dataUses)) {
	    	this.dataUses = filterTagList.get(1);
	    }

	  }
}

[Mohit_KBansal]

This code seems to be fine, and filterTagList object should have a list of Tags.

I am not clear about the purpose of dataUses string object. Ideally, you should have filterTagList as a class variable and should have a getter to return this list.

Now, all you need to do is to create a data source [1], and call your class from the data source.

[1] https://aem4beginner.blogspot.com/working-with-granite-datasources

[Ameen_Dev]

My apology! I am new to Java so can you please edit the code like what you said, so that I can understand in a better way. 

[Shiv_Prakash_Patel · Accepted solution]

Hi @Ameen_Dev ,

Please check out this article - https://unlocklearning.in/dynamic-dropdown-in-aem/ 

It explains all possible ways to develop a Dynamic Dropdown on AEM Dialog.

In section 4(AEM Tags value in Dynamic Selection Dropdown) of the article, You can see the process to use AEM Tags in the dialog dropdown. In your case just need to do some modifications as below.

• Develop the dialog node structure as given in the article, Only change the tagsPath value by /content/cq:tags/project/plan-cards/data-uses
• Use the given servlet class by changing the package name and servlet path (the same path you have to map in resourceType in dialog)
• You can modify the logic as well if you needed.
•  That's all, It will populate tags inside data-users in the dropdown.

Hope this would help you !!!

Regards,

Shiv

[Ameen_Dev]

@Shiv_Prakash_Patel Thank you so much. It works as expected but the only problem is it allows multiple selections in the dropdown list. I tried to limit that to just one value but it's not happening.

[Shiv_Prakash_Patel]

Hi @Ameen_Dev ,

That's great it works for you !!!

Update multiple boolean to false at select node in cq:dialog, It will allow you only a single selection.

multiple="{Boolean}false"

 Regards,

Shiv

[Ameen_Dev]

Thanks @Shiv_Prakash_Patel 

Can I use the bin in the servlet path?

@Component(service = Servlet.class, property = {Constants.SERVICE_DESCRIPTION + "= Tags value in dynamic Dropdown",
        "sling.servlet.paths=" + "/bin/cardTagLists", "sling.servlet.methods=" + HttpConstants.METHOD_GET
})

Does it have any issues? Or if I need to change the path, which path do you prefer?

[ManviSharma]

Hi,

If you are looking for a drop-in solution for this, take a look at

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

This supports easily authorable lists of name/value pairs which can be used (without writing additional code) in:

• Classic UI Dialogs
• Touch UI Dialogs
• Touch UI Asset Metadata Editor

Regards,

Manvi Sharma