Not able add multiple Parsys using model

[sesmic]

Hi All,

I'm working on a component which will add multiple parsys, via Sling Model. The parsys isn't generating but any html apart from that is working as expected.

Java

@inject
private Integer pNumber; //input

 public String getPContent() {
   StringBuilder contentBuilder = new StringBuilder();
   for (int i = 1; i <= pNumber; i++) {
      contentBuilder.append("<div data-sly-resource=\"${'parsys").append(i).append("' @ resourceType='wcm/foundation/components/parsys'}\"></div>");
     }
    return contentBuilder.toString();
 }

HTML

    <div data-sly-use.model="com.example.models.componentImpl">
        ${model.pContent @ context='unsafe'}
    </div>

Output when parsys is used(context = unsafe)

Thus, please advice me as what I'm doing wrong or I missed something & help me to achieve desired result.

Thanks,

sesmic

[Imran__Khan]

@sesmic  In below code data-sly-resource value parsys needs to be a dynamic variable like parsys, parsys-1, parsys-2, parsys-3. unique value for all parsys

StringBuilder htmlBuilder = new StringBuilder();
        for (int i = 1; i <= numberOfItems; i++) {
            //htmlBuilder.append("<div style=\"background-color:yellow;\">Item ").append(i).append("</div>");
            htmlBuilder.append("<div data-sly-resource='parsys"+i+"'"+" @ resourceType='wcm/foundation/components/parsys'></div>");
        }
        return  htmlBuilder.toString();

${model.htmlContent @ context='html'}

If Not working, please try below working one:

<sly data-sly-list.child="${modelName.parsysList}">
		 <div data-sly-resource="${ child @ resourceType='wcm/foundation/components/parsys'}"></div>
		</br>
    </sly>

public List<String> getParsysList() {
        parsysList = new ArrayList<>();
        for (int i = 1; i <= numberOfItems; i++) {
            parsysList.add("parsys-"+i);
        }
        return  parsysList;
    }

[sesmic]

Hi @Imran__Khan,

Thanks for the reply. I have also tried the approach you suggested. But still result is same. I have shared the snippets in my post as well. Anything apart from parsys or any resource is generating.

[Imran__Khan · Accepted solution]

Please try below working and tested one, copy paste same code and try:

<sly data-sly-list.child="${modelName.parsysList}">
		 <div data-sly-resource="${ child @ resourceType='wcm/foundation/components/parsys'}"></div>
		</br>
    </sly>

public List<String> getParsysList() {
        parsysList = new ArrayList<>();
        for (int i = 1; i <= numberOfItems; i++) {
            parsysList.add("parsys-"+i);
        }
        return  parsysList;
    }

There is some CSS issue in my local, though it worked and I can see multiple parsys.

[sesmic]

Thanks! It worked.

Any reason you may know as why the same wasn't generating via model whereas html code is same? 

[Imran__Khan]

Could you please also tell about how to pass parameter to the "child"? I need to update resource value dynamically from HTL. -> Please elaborate more

Though you can pass parameter as shown below:

<sly data-sly-resource="${child @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"></sly>

Just curious, any reason you may know as why the same wasn't generating via model whereas html code is same? -> After loading on page it is not able to bind JS event, though normal tag like div, h1, span is working fine.

[sesmic]

Got it.

[Imran__Khan]

@sesmic for this create a bean class having all fields. Inside loop set bean value for every object and set as part of a list. 

public List<TestBean> getParsysList() {
        parsysList = new ArrayList<>();
        for (int i = 1; i <= numberOfItems; i++) {
            TestBean testBean = new TestBean("parsys-"+i, "param value"+i);
            parsysList.add(testBean);
        }
        return  parsysList;
    }

    public class TestBean {

        private String parsys;
        private String param1;

        public TestBean(String parsys, String param1) {
            this.parsys = parsys;
            this.param1 = param1;
        }

        public String getParsys() {
            return parsys;
        }

        public String getParam1() {
            return param1;
        }
    }

<sly data-sly-list.child="${profile.parsysList}">
    	<sly data-sly-resource="${child.parsys @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent', param=child.param1}"></sly>
		</br>
    </sly>

[Mahesh_Gunaje]

Hi @Imran__Khan 

I have created the query in this link.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/passing-parameter-from-one...

So, in that case, how above solution work?

<sly data-sly-resource="${child.parsys @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent', param=child.param1}"></sly>

[Imran__Khan]

@Mahesh_Gunaje I see it already got answered and accepted by you.
you can connect this variable in your WCMUse java class in the form of setter method.

Reference: https://itecnote.com/tecnote/aem-6-0-additional-parameters-when-using-data-sly-resource/

[arunpatidar]

Hi @sesmic 
Please check https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/adding-columns-parsys-base...