AEM 6.3 - Unable to edit component
Hi,
Here is what I am trying to achieve. In the footer component, there are mulitiple columns. Each column contains a headline and then 4 URLs. I have created a footerList component for this purpose. The dialog of this footerList contains a multifield. The number of times the footerList component has to be included depends on the option selected on the Footer component dialog (let's say 2). I am using editable template. This is the code snippet for footer HTL script
<div class="6u">
<div class="row collapse-at-2">
<sly data-sly-test="${footer.arr}">
<sly data-sly-repeat="${footer.arr}">
<sly data-sly-resource="${'column${itemList.index}' @resourceType='aem-site/components/structure/footer/footerList'}"></sly>
</sly>
</sly>
</div>
</div>
For the sake of simplicity, I have hardcoded the footerList Component:
<div class="6u">
<h3>Accumsan</h3>
<ul class="alt">
<li><a href="#">Nascetur nunc varius</a></li>
<li><a href="#">Vis faucibus sed tempor</a></li>
<li><a href="#">Massa amet lobortis vel</a></li>
<li><a href="#">Nascetur nunc varius</a></li>
</ul>
</div>
This is how the component looks on the page (image below)
1) Issue # 1 : It looks like one footerList component with two columns. I was expecting two components with one column each.
2) Issue # 2 : I am unable to see the edit option in the edit bar (in the image below).
3) That's how the component looks like in CRXde
Below is the Footer.js file (the Javascript USE API File)
"use strict";
use(function() {
var footer = {};
var colNum = granite.resource.properties["colNum"];
footer.title = granite.resource.properties["jcr:title"];
var childResource = resource.getChild("items");
log.info("value of it is "+childResource);
if(childResource!=null) {
var it = childResource.listChildren();
log.info("#######################childResource############## "+it);
}
var colNumInt = parseInt(colNum);
footer.arr = [];
for(var i=0; i< colNumInt; i++) {
footer.arr.push(i);
}
return footer;
});
3) Issue # 3 : I am getting the error org.apache.sling.scripting.sightly.SightlyException: org.mozilla.javascript.EcmaError: TypeError: Cannot find default value for object.
on the line highlighted in blue. This is the code to iterate the values saved in the multifield that is provided in the dialog for Footer component.
I have tried to be as descriptive as possible. Please let me know if more information is needed.
Thanks in advance
Related Conversations
