Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

AEM Servlet for Drop down in page Properties tab

Avatar

Level 7

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