Expand my Community achievements bar.

SOLVED

RecursionTooDeepException error when trying to extend core tabs component

Avatar

Level 2

I'm trying to extend tabs component using sling:resourceSuperType="core/wcm/components/tabs/v1/tabs", as i want to add fields in the dialog i need to change the htl. When i copy the html from https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... and build the project i'm facing this issue: 

org.apache.sling.scripting.sightly.SightlyException: org.apache.sling.api.request.RecursionTooDeepException

The problem seems to be related with this line of code:

data-sly-resource="${item.resource @ decorationTagName='div'}"

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

it worked by changing to: data-sly-resource="${ @path=item.name, resourceType=item.component, decorationTagName='div'}"

 
instead of: data-sly-resource="${item.resource @ decorationTagName='div'}"
 
Thank you
5 Replies

Avatar

Level 8

Hello @gab_221 ,

Maybe you made mistake while you are changing on HTL file.

By simply overwrite the tabs.html file you can identify your mistake. For this just copy the HTML code from the original source(core component) and try to build. This case should be working fine.

 

Now in the second step add your code and build. In this case, you should get the error. If so, please share the code/exact requirement to further help.

Avatar

Community Advisor

Can you check if item.resource exists?

Issue could be with non existing node.

 

I know there is a product bug, if node is missing it goes into checking missing node infinitely 

Avatar

Level 3

Hi @gab_221

 

To extend the tabs component in AEM, you can follow these steps:

  1. Create a new component that extends the tabs component by setting the sling:resourceSuperType property to "core/wcm/components/tabs/v1/tabs".

  2. Create a new dialog for the component by copying the dialog structure from the tabs component's dialog located in /libs/core/wcm/components/tabs/v1/tabs/dialog.

  3. Modify the dialog to add your desired fields or make other changes as needed.

  4. Create a new HTL file for the component by copying the HTL file structure from the tabs component located in /libs/core/wcm/components/tabs/v1/tabs/tabs.html.

  5. Modify the HTL file to render the additional fields that you added to the dialog.

  6. In the modified HTL file, update the data-sly-resource statement for the tabs items to point to the new HTL file that will render the additional fields.

  7. Package and deploy the new component and associated files to your AEM instance.

Here is an example of what the updated data-sly-resource statement could look like in your HTL file:

 
<div class="cmp-tabs__items" data-sly-list.tabs="${properties.tabs}" data-sly-resource="${item.resource @ decorationTagName='div', resourceType='myapp/components/tabs/item'}"> </div>

In this example, the myapp/components/tabs/item the value should be the path to your new HTL file to render the additional fields.

 

Let me know if it works!
Thanks, 

Partyush 

Avatar

Correct answer by
Level 2

it worked by changing to: data-sly-resource="${ @path=item.name, resourceType=item.component, decorationTagName='div'}"

 
instead of: data-sly-resource="${item.resource @ decorationTagName='div'}"
 
Thank you
page footer