Not able to remove components in Editable Template AEM

Question

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?

Answer 1

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.

Answer 2

FYI, this page is NOT using editable template.

• When a page has a relative path in sling:resourceType like this: 'grid-aem/components/structure/page', it is using static template.
• Editable templates are created under /conf folder.
• More differences between static and editable templates.

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.

Answer 3

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...