Highlighted

data-sly-repeat define max item via cq dialog

angelinek209805

02-01-2019

I am trying to use data-sly-repeat and need to define the max item to repeat. I though I could use the following HTL but if i replace the number with properties from the dialog (maxItems - sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"), the component breaks with error Cannot get DefaultSlingScript: Operands are not of the same type: comparison is supported for Number types only.

<sly data-sly-repeat="${reference.items @ begin = 0, end = properties.maxItems}">

Is there a simple way of using only HTL to achieve this? I also tried ${properties.maxItems @ context='number'} but no luck

Thanks in advance.

Replies

Highlighted

Ravi_Pampana

MVP

02-01-2019

Hi,

You can have Java or JS code to control the size of the list based on the value entered in cq:dialog

Ex:

Add the below JS code in a file

"use strict";
use(function () {
  let n = properties.get("colNum", 0);
  return {
  columns: [...Array(100)] // empty, iterable, array of size n
  };
});

<div
  data-sly-use.config="<JS-file-name>"
  data-sly-list="${config.columns}">
  <div class="6u">
  <h3>Accumsan</h3>
  <ul class="alt">
  <li><a href="#">Nascetur nunc varius</a></li>
  <li><a href="#">Vis faucibus sed tempor</a></li>
  <li><a href="#">Massa amet lobortis vel</a></li>
  <li><a href="#">Nascetur nunc varius</a></li>
  </ul>
  </div>
</div>

Highlighted

Arun_Patidar

MVP

03-01-2019

you can try with list

e.g.

<ul data-sly-list.child="${currentPage.listChildren}">

   <li data-sly-test="${childList.index <= 5}">${child.title}</li>

</ul>

Highlighted

angelinek209805

03-01-2019

If the number is replace with the value from the cq dialog, it will return the same error

Cannot get DefaultSlingScript: Operands are not of the same type: comparison is supported for Number types only.

<sly data-sly-test.maxItems="${properties.maxItems @ context='number'}" />

<ul data-sly-list.ref="${reference.items}">

<li data-sly-test="${refList.index <= maxItems}"></li>

</ul>

Highlighted

angelinek209805

03-01-2019

In the cq:dialog, I am using sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"

When check via crx/de, the property type is String.

Screen Shot 2019-01-03 at 15.45.47.png

Highlighted

angelinek209805

03-01-2019

I also tried typeHint="Long" and in crx/de the property type is Long. But same error

Cannot get DefaultSlingScript: Operands are not of the same type: comparison is supported for Number types only