RecursionTooDeepException error when trying to extend core tabs component | Community
Skip to main content
Level 2
April 17, 2023
Solved

RecursionTooDeepException error when trying to extend core tabs component

  • April 17, 2023
  • 3 replies
  • 2180 views

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/wcm/components/tabs/v1/tabs/tabs.html 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'}"

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by gab_221

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

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

3 replies

Sady_Rifat
Community Advisor
Community Advisor
April 17, 2023

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.

arunpatidar
Community Advisor
Community Advisor
April 17, 2023

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 

Arun Patidar
partyush
Community Advisor
Community Advisor
April 17, 2023

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 

gab_221AuthorAccepted solution
Level 2
April 17, 2023

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

 
instead of: data-sly-resource="${item.resource @ decorationTagName='div'}"
 
Thank you
partyush
Community Advisor
Community Advisor
April 18, 2023

cool!