RecursionTooDeepException error when trying to extend core tabs component

[gab_221]

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'}"

[Sady_Rifat]

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]

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 

[partyush]

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_221 · Accepted solution]

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

[partyush]

cool!