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
Coral UI select multiple field can't remove all value
Hi Friends,
I am using selected multiple field. But it have problem, when I remove all values that I selected and save it. It can't save with none value selected.
Example: I selected one value and save ok.
after that I go to "Views properties" to edit that field and remove selected value.
When I save it comeback again.
If I selected more than one options and save. After that I remove some option and keep one or more than one selected and save, it work fine. If I remove all options and save it, It come back the option before I remove.
Example: I select 2 options and save ok.
I remove one option and save it work fine.
If I select 2 options and remove all and save, it back to.
My code to bind data into select field and check option fields as below.
The Json data as below: http://localhost:4502/.abcbenefits.json/
[{"id":"1","description":"asdf à","langCode":"en"},{"id":"2","description":"asdf ádf","langCode":"en"},{"id":"3","description":"adsf sadf","langCode":"en"}]
<script>
$(document).ready(function(){
var host_url = window.location.protocol + "//" + window.location.host + "/.abcbenefits.json/";
var benefitSelectedValue = abcbenefits.values;
// load property check on edit page or created page.
var pageNameID = document.getElementById("cq-sites-properties-form");
// is create page
if(pageNameID === null) {
//loadServiceDataFromURL(host_url);
}
// is edit page
else {
benefitSelectedValue = abcbenefits.values;
loadServiceDataFromURL(host_url);
}
function loadServiceDataFromURL(host_url) {
$.ajax(host_url, {
dataType: "json",
contentType: "application/json",
async: false,
success: function(rawData, status, xhr) {
try {
benefitBindData(rawData);
} catch (err) {
console.log(err);
}
},
error: function (xhr, status, err) {
console.log(err);
}
});
}
function benefitBindData(data) {
$("#abcbenefits> coral-select-item").remove();
var x = document.getElementById("abcbenefits");
var selectedItem = [];
data.forEach(function(item) {
var option = document.createElement("coral-select-item");
option.innerHTML = item["description"];
option.value = item["id"];
x.appendChild(option);
if (isSelectedBenefit(item["id"], benefitSelectedValue)) {
//option.selected = true;
selectedItem.push(option); //push selected item into an array
}
});
setTimeout(function(_selectedItems){
_selectedItems.forEach(function(option) {
option.selected = true;
});
}, 100, selectedItem)
}
function isSelectedBenefit(benefitId, benefitSelectedValues){
for(var i = 0; i < benefitSelectedValues.length;i++){
if(benefitId == benefitSelectedValues[i]) return true;
}
return false;
}
});
</script>
Please help me,
Thank you so much,
1 Accepted Solution
Hi,
I would suggest you to first try to populate dropdown using datasource instead of DOM manipulation.
Adobe Experience Manager Help | Using Granite DataSource objects to populate AEM Touch UI objects
Thanks
Arun
Arun Patidar
Hi,
Can you try to create a sling servlet and registered with resourceType and use this resource type in datasource node.
Inside Sling servlet you can make a ajax request to get json and parse that json and convert into ValueMap and add to datasource.
Example :
https://github.com/arunpatidar02/aem63app-repo/blob/master/java/HelloWorldCompDDServlet.java
Arun Patidar
