Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM Servlet for Drop down in page Properties tab

Avatar

Level 8

Hi,

 

I have a custom Tab in Page Properties with a drop down like folows:

 

<telefonAndOpeningHours
granite:class="cq-dialog-dropdown-showhide"
jcr:primaryType="nt:unstructured"
fieldLabel="telefonAndOpeningHours"
fieldDescription="telefonAndOpeningHours."
name="./area"
required="{Boolean}true"
sling:resourceType="granite/ui/components/coral/foundation/form/select">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".analytics-type-showhide-target"/>
<items jcr:primaryType="nt:unstructured">
<area1
jcr:primaryType="nt:unstructured"
text="area1"
value="area1"/>
<area2
jcr:primaryType="nt:unstructured"
text="area2"
value="area2"/>
<area3
jcr:primaryType="nt:unstructured"
text="area3"
value="area3"/>
</items>
</telefonAndOpeningHours>

The areas (area1, area2, area3...) are not static but are dynamic instead. They are custom conditions in content that I need to read and dynamically display as values in the drop down. 

I was thinking about using a servlet for to determin the the areas titles in the dropdown but I am not sure how to configure the servlet for this purpose:

 

@Component(service = Servlet.class)
@SlingServletResourceTypes(
resourceTypes = "cq/Page",
selectors = {???}
)

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@anasustic  You can create a ACS commons generic list with these attributes based on your custom content conditions.

Then, you can add this ACS commons generic list as a datasource in your AEM component/page dialog and read the properties and their values off this dynamic dropdown.

 

Documentation link on how to use Generic lists : https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

 

 

View solution in original post

4 Replies

Avatar

Community Advisor

Here is a similar implementation in the below URL where they are setting the dynamic dropdown from different sources. https://unlocklearning.in/dynamic-dropdown-in-aem/

<!-- # cq:dialog xml -->
<items jcr:primaryType="nt:unstructured">
  <colorTags jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldDescription="Select the color tags"
    fieldLabel="Color Tags"
    name="./colorTags">
    <datasource jcr:primaryType="nt:unstructured"
      sling:resourceType="/bin/colorTagLists"
      tagsPath="/content/cq:tags/learning/color"/>
    </colorTags>
</items>
<!-- # cq:dialog xml -->
@component(service = Servlet.class,
  property = {Constants.SERVICE_DESCRIPTION + "= Tags value in dynamic Dropdown",
  "sling.servlet.paths=" + "/bin/colorTagLists", 
  "sling.servlet.methods=" + HttpConstants.METHOD_GET
})
public class TagDropdownServlet extends SlingSafeMethodsServlet {
  private static final Logger LOGGER = LoggerFactory.getLogger(TagDropdownServlet.class);

  transient ResourceResolver resourceResolver;
  transient Resource pathResource;
  transient ValueMap valueMap;
  transient List<Resource> resourceList;

  @Override
  protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
  {
    resourceResolver = request.getResourceResolver();
    pathResource = request.getResource();
    resourceList = new ArrayList<>();

    /* Getting AEM Tags Path given on datasource Node */
    String tagsPath = Objects.requireNonNull(pathResource.getChild("datasource"))
          .getValueMap().get("tagsPath", String.class);

    //Getting Tag Resource using Tag Path
    Resource tagsResource = request.getResourceResolver().getResource(tagsPath);
        
    //Iterating over child tag resource
    for (Resource childTags : tagsResource.getChildren()) {
      valueMap = new ValueMapDecorator(new HashMap<>());
      //Adopting Tag resource into Tag
      Tag colorTag = childTags.adaptTo(Tag.class);
      String tagFullName = colorTag.getTagID();
      String tagName = tagFullName.substring(tagFullName.lastIndexOf("/") + 1);
      String tagTitle = colorTag.getTitle();
      valueMap.put("value", tagName);
      valueMap.put("text", tagTitle);
      resourceList.add(new ValueMapResource(
         resourceResolver, new ResourceMetadata(), "nt:unstructured", valueMap));
    }

    /*Create a DataSource that is used to populate the drop-down control*/
    DataSource dataSource = new SimpleDataSource(resourceList.iterator());
    request.setAttribute(DataSource.class.getName(), dataSource);

    LOGGER.info("Tags successfully exported using DataSource!!!");
  }
}

 

Avatar

Correct answer by
Community Advisor

@anasustic  You can create a ACS commons generic list with these attributes based on your custom content conditions.

Then, you can add this ACS commons generic list as a datasource in your AEM component/page dialog and read the properties and their values off this dynamic dropdown.

 

Documentation link on how to use Generic lists : https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html