Highlighted

data-sly-repeat define max item via cq dialog

Avatar

Avatar

angelinek209805

Avatar

angelinek209805

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

Avatar

Avatar

Ravi_Pampana

MVP

Avatar

Ravi_Pampana

MVP

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

Avatar

Avatar

angelinek209805

Avatar

angelinek209805

angelinek209805

03-01-2019

Thanks. I have a Java sling modal that returns the items. I would like to use the HTL only if possible.

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
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

Avatar

Avatar

angelinek209805

Avatar

angelinek209805

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

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

03-01-2019

Is the type of you field maxItems String or Number ?

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

03-01-2019

try to use typehint as Long for number field item.

NumberField — Granite UI 1.0 documentation

Highlighted

Avatar

Avatar

angelinek209805

Avatar

angelinek209805

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

Avatar

Avatar

angelinek209805

Avatar

angelinek209805

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

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

03-01-2019

ok then you have to go either with JS or Java to return filtered list based on number field.