AEMaaCS - Touch UI Dialog Dynamic Dropdown | AEM Community Blog Seeding

[kautuk_sahni]

AEMaaCS - Touch UI Dialog Dynamic Dropdown by Arun Patidar

Abstract

Populate Touch UI Dropdown Dynamically based on Other Field

In AEM touch UI, the dropdown options can be populated using static fields or using datasource but the dropdown options are static. Let's say I need to create a dropdown for state and the state values should populate based on country, In this case above two methods will not work. but this can be achieved using dialog listeners.

This blog is about an example to populate second dropdown options based on the first dropdown.

Steps
1. Create the first dropdown and populate the options either with fixed values or from datasource. add a granite class to listen to the changes.






2. Create a second dropdown without any options and add a granite class





3. Create a hidden field for the second dropdown to repopulate pre-saved value on a dialog load. The name property must be the same as the secondary dropdown and this field must be disabled and hidden.





4. Create Clientlibs(javascript) to populate the second dropdown based on the first dropdown value. The values of the second dropdown can be populated based on any business logic.

Here I am calling a servlet /apps/aemlab/concept/utils/dialog/contentsubytpe.json with the first dropdown value and getting the options for the second dropdown.

const contentTypeSelector = ".dropdownfield_contenttype";
const contentSubTypeSelector = ".dropdownfield_contentsubtype";
const contentSubTypeDataSourceUri =
"/apps/aemlab/concept/utils/dialog/contentsubytpe.json";

$document.on("foundation-contentloaded", function (e) {
setSubTypeDropdown(true);
});

$document.on("change", contentTypeSelector, function (e) {
setSubTypeDropdown(false);
});

function setSubTypeDropdown(preSelect) {
const contentType = document.querySelector(contentTypeSelector);
const contentSubType = document.querySelector(contentSubTypeSelector);

if (contentType && contentSubType) {
var url =contentSubTypeDataSourceUri +"?type=" +contentType.value +"&ck=" +Math.random();
$.get(url, function (data) {
updateSubTypeDropdownField(preSelect, data);
});
}
}

Read Full Blog

AEMaaCS - Touch UI Dialog Dynamic Dropdown

Q&A

Please use this thread to ask the related questions.