HTML Duplication When Injecting Component in a Form Container | Community
Skip to main content
M
margaritageg
August 1, 2024
Question

HTML Duplication When Injecting Component in a Form Container

  • August 1, 2024
  • 1 reply
  • 558 views

Hello,

In a form container component I would like to inject another component something like this 

<sly data-sly-resource="${'component' @ resourceType='my/component/path'}"></sly>

Changes to the injected component's properties lead to HTML duplication. The duplication seems to be caused by a data-sly-repeat loop

<sly data-sly-repeat.paragraph="${grid.paragraphs}"
     data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType, decorationTagName='div', cssClassName=paragraph.cssClass}"></sly>
<div>

The question is how to inject component in a form container to avoid component duplication  

 

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

1 reply

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity Advisor
Community Advisor
August 5, 2024

Hi,

 

If you need to conditionally inject the component only once, you can use the data-sly-test attribute:

<sly data-sly-test="${!injected}"> <sly data-sly-resource="${ 'component' @ resourceType='my/component/path' }"></sly> <sly data-sly-use.injected="true"></sly> </sly> <!-- Your repeat logic for paragraphs --> <sly data-sly-repeat.paragraph="${grid.paragraphs}"> <div> <!-- Render paragraph content --> <sly data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType, decorationTagName='div', cssClassName=paragraph.cssClass}"></sly> </div> </sly>

'injected' value is false or undefined then the injects the component and once it is executed `injected` value will be set to true avoid further injecting. Ensure the data-sly-repeat loop for paragraphs is separate from the component injection logic. This way, the component is not included within the loop, avoiding duplication.

    M
    margaritagegAuthor
    August 5, 2024

    Thanks for answering , but this solution didnt work for my case, is it possible to inject a component via component policies? or is there any other solution for this issue?

      Terms & ConditionsAccessibility statement

      Loading footer...