Expand my Community achievements bar.

SOLVED

Sightly List in 2 column table format

Avatar

Level 1

Hi All,

I am using sightly for my list element, I came up with a requirement to generate my html mokeup like,

<table>

          <tr>

                <td> <input type="checkbox"/> <span> name1 </span> </td>

                <td> <input type="checkbox"/> <span> name2  </span> </td>

            </tr>

          <tr>

                <td> <input type="checkbox"/> <span> name3 </span> </td>

                <td> <input type="checkbox"/> <span> name4  </span> </td>

            </tr>

          <tr>

                <td> <input type="checkbox"/> <span> name5 </span> </td>

                <td> <input type="checkbox"/> <span> name6 </span> </td>

            </tr>

</table>

so instead iterate over <li> element, I need to show result in two column,

Is there anyway  this can be done, or If i can use javascript Use API to generate this short of dynamic html content by passing my list object.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Typically you are iterating over the Collection in a HTL front end,

<h2>Current Issue</h2>

<div

    data-sly-use.multiItems="com.htl.community.coral.core.models.Multifield">

    <div data-sly-list.head="${multiItems.products.listChildren}">

        <div style="height:250px;"><img src=${head.pathbr} height=200 width=270 style="padding:4px"/><h2>${head.product}</h2>

                             <p>${head.desc}</p>

                                

                             </div>

                             <hr>

   </div>

</div>

Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.3 Component that uses Sling Mode...

View solution in original post

2 Replies

Avatar

Level 1

Hi Friends,

Is there anyway I can achieve this,

Thanks

Ankit

Avatar

Correct answer by
Level 10

Typically you are iterating over the Collection in a HTL front end,

<h2>Current Issue</h2>

<div

    data-sly-use.multiItems="com.htl.community.coral.core.models.Multifield">

    <div data-sly-list.head="${multiItems.products.listChildren}">

        <div style="height:250px;"><img src=${head.pathbr} height=200 width=270 style="padding:4px"/><h2>${head.product}</h2>

                             <p>${head.desc}</p>

                                

                             </div>

                             <hr>

   </div>

</div>

Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.3 Component that uses Sling Mode...