Problem Statement:
How can I leverage component policies chosen at the template level to manage the dropdown-based selection?
Introduction:
AEM has integrated component policies as a pivotal element of the editable template feature. This functionality empowers both authors and developers to provide options for configuring the comprehensive behavior of fully-featured components, including deciding which fields to display, hide, or customize. This configuration is carried out at the template level, facilitating reuse across various templates or template-specific customizations.
Furthermore, AEM introduces a robust styling feature that empowers front-end developers to manage the visual appearance and user interface of components. This grants authors the capability to tailor the look and feel of the component.
Requirement:
In a previous discussion, we outlined a step-by-step process for Accessing Component Policies in AEM at the Component Dialog Level, Sightly code, and Sling model.
Now, consider a scenario where a company is selling various electronic devices in different countries. For example, a company like Brisket sells phones, tablets, and laptops in India, and only phones and tablets in the USA. However, if they plan to introduce laptops in the USA in the future, they’d like to make changes to the template policy. How can this be achieved at the dialog level?
Solution:
Step 1: Create an “Electronics” component and add the design dialog with specific attributes:
Step 2: Create the dialog and add an extra granite node with a specific property:
component-path="${requestPathInfo.suffix}" - get component path
Step 3: When you open the component dialog and inspect the field, you will see extra attributes, including “component-path.”
Step 4: Create a dialog-level listener that makes a path-based call to a Servlet and passes the attributes as shown.
(function($, $document) {
$(document).on("foundation-contentloaded", function(e) {
var value = $("coral-select[name='./country']").val();
var compPath = $("coral-select[name='./country']").attr("data-component-path");
populateItems(compPath, value);
});
var REGEX_SELECTOR = "dropdown.selector",
foundationReg = $(window).adaptTo("foundation-registry");
foundationReg.register("foundation.validation.validator", {
selector: "[data-foundation-validation='" + REGEX_SELECTOR + "']",
validate: function(el) {
if ($(el).is(":visible")) {
var value = $(el).val();
var flag = false;
var compPath = $(el).attr("data-component-path");
var errorMessage = 'Error occurred during processing';
populateItems(compPath, value);
}
}
});
function populateItems(compPath, value) {
$.ajax({
type: "GET",
async: false,
url: "/bin/electronicsServlet?componentPath=" + compPath + "&dropdownValue=" + value,
success: function(result) {
if (result) {
var select = document.querySelector("coral-select[name='./devices']");
Coral.commons.ready(select, function(component) {
component.items.clear();
for (var i = 0; i < result.length; ++i) {
var option = document.createElement('coral-select-item');
option.textContent = result[i].text;
option.value = result[i].value;
component.items.add(option);
}
});
} else {
flag = true;
}
}
});
if (flag) {
return errorMessage;
}
}
}(jQuery, $(document)));
Step 5: Create a registered path-based Servlet that accepts the component path as a parameter, retrieves the component policy, and returns dropdown options.
package com.aem.operations.core.servlets;
import com.adobe.granite.rest.Constants;
import com.day.cq.wcm.api.policies.ContentPolicy;
import com.day.cq.wcm.api.policies.ContentPolicyManager;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import org.apache.commons.lang3.ArrayUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.ModifiableValueMap;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.servlets.post.JSONResponse;
import org.jetbrains.annotations.NotNull;
import org.osgi.service.component.annotations.Component;
import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;
@Component(service = { Servlet.class }, property = {
"sling.servlet.paths=" + ElectronicsServlet.RESOURCE_PATH, "sling.servlet.methods=GET" })
public class ElectronicsServlet extends SlingSafeMethodsServlet {
private static final long serialVersionUID = 1L;
static final String RESOURCE_PATH = "/bin/electronicsServlet";
@Override
protected void doGet(@NotNull SlingHttpServletRequest request, @NotNull SlingHttpServletResponse response)
throws ServletException, IOException {
JsonArray jsonResponse = new JsonArray();
response.setContentType(JSONResponse.RESPONSE_CONTENT_TYPE);
response.setCharacterEncoding(Constants.DEFAULT_CHARSET);
String componentPath = request.getParameter("componentPath");
String dropdownValue = request.getParameter("dropdownValue");
if(StringUtils.isNotEmpty(componentPath)){
ContentPolicy policy = getContentPolicy(componentPath, request.getResourceResolver());
if(null != policy){
jsonResponse = populateDropdown(policy, request.getResourceResolver(), dropdownValue);
}
}
try (PrintWriter out = response.getWriter()) {
out.print(new Gson().toJson(jsonResponse));
}
}
private ContentPolicy getContentPolicy(@NotNull String path, @NotNull ResourceResolver resolver) {
ContentPolicy policy = null;
ContentPolicyManager policyMgr = resolver.adaptTo(ContentPolicyManager.class);
Resource contentResource = resolver.getResource(path);
if (contentResource != null && policyMgr != null) {
policy = policyMgr.getPolicy(contentResource);
}
return policy;
}
private JsonArray populateDropdown(ContentPolicy policy, ResourceResolver resolver, String dropdownValue) {
JsonArray jsonResponse = new JsonArray();
Resource policyRes = resolver.resolve(policy.getPath());
Iterator<Resource> children = policyRes.listChildren();
while (children.hasNext()) {
final Resource child = children.next();
if (StringUtils.equalsIgnoreCase(child.getName(), "multifield")) {
Iterator < Resource > multiChild = child.listChildren();
while (multiChild.hasNext()) {
ValueMap valueMap = multiChild.next().adaptTo(ModifiableValueMap.class);
String[] type = valueMap.get("country",String[].class);
if(ArrayUtils.contains(type, dropdownValue)){
String[] allowedDevices = valueMap.get("devices",String[].class);
if (allowedDevices != null && allowedDevices.length > 0) {
for (String allowedDevice : allowedDevices) {
JsonObject jsonObj = new JsonObject();
jsonObj.addProperty("text", allowedDevice.toUpperCase());
jsonObj.addProperty("value", allowedDevice);
jsonResponse.add(jsonObj);
}
}
}
}
}
}
return jsonResponse;
}
}
By accessing the component policy and selecting country and electronics, you can dynamically control the available dropdown options. For example, selecting “Country A” displays phone, tablet, and laptop options, while choosing “Country B” shows only phone and tablet options.
The working code for this can be found in the repository: Link to Repository
AEM best practices and development guide 