I have been following the tutorial I have linked here to create a custom layout component https://helpx.adobe.com/experience-manager/using/bootstrap_grid.html but I noticed that removing this component from an Editable Template is not possible. How should I solve my problem?
Not able to remove components in Editable Template AEM
5.1k views Asked by I. Mancilla AtThere are 3 answers
TLDR;
- Add content to the parsys in the component you are trying to delete (assuming it has a parsys or area to drag components to).
- Refresh the page
- Delete the structure component
Long Term Fix
For a more long term fix, have the component in question generate the missing content using a cq:template node.
Whats really happening
This is a bit wonky - but I'll do my best to explain.
If you are referencing content within your structure components via data-sly-resource using the @ resourceType option, you can't delete your structured component.
I just went through the ringer with this one. I had a very simple structure component:
<div class="full-stack-content">
<div class="container">
<div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
</div>
</div>
And when I dragged it onto my editable template I could never delete it.
When you use @resourceType
in a rendering script and the content doesn't actually exist, it creates whats known as a SyntheticResource.
So in my example, I went to the JCR and there is no content
node underneath my content-container
:
If I manually create the missing content
(because of the data-sly-resource="${'content'
from my code above) I can then delete the component.
As you can see the delete option is now there:
For a quick fix - just drag something into the parsys to create the node.
For a more long term fix, have the component in question generate that content using a cq:template node.
Listen to the inspectable-added
event and add the child nodes
with Javascript
:
STEP 1: Create a ClientLibraryFolder
and add the cq.authoring.dialog.all
category:
STEP 2: Write Javascript
to listen to the inspectable-added
event. The callback function
should add the child-nodes
to the editable-template
that are needed for the component to have all functionality such as EDIT, DELETE, MOVE, COPY
etc.
(function($document, $) {
$document.on('cq-inspectable-added', cb_inspectableAdded);
function cb_inspectableAdded(evt) {
try {
var inspectable = evt.inspectable;
var ajaxConfig = {
url: evt.inspectable.path,
data: {
'sling:resourceType': inspectable.type
},
async: false
};
if(inspectable.type.indexOf('myApp/components') > -1) $.post(ajaxConfig); // replace myApp/components with your partial-path
} catch(e) {
console.error(e);
}
}
}($(document), jQuery));
That's it! Now, when you add a component which has nested components such as a custom-layout-container
or parsys
or custom components-inside-components
; it should have all the functionality.
Good Luck...
FYI, this page is NOT using editable template.
The static template provided in the sample includes only 1 parsys component in
/apps/grid-aem/components/structure/page/partials/main.html
.So components added within the parsys can be easily delete on the page itself using delete button:
If you are looking to remove a parsys within the colcontrol component, this is a custom colcontrol with logic implemented to change number of columns. You need to author the component with desired number of columns. For example selecting 3 columns shows 3 parsys:
Selecting 2 columns on same component shows 2 parsys like this:
Hope this helps you.