Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

data-sly-repeat define max item via cq dialog

angelinek209805
Level 2
Level 2

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.

13 Replies
Ravi_Pampana
Community Advisor
Community Advisor

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>

angelinek209805
Level 2
Level 2

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

Arun_Patidar
Community Advisor
Community Advisor

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>

angelinek209805
Level 2
Level 2

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>

Veena_Vikram
Community Advisor
Community Advisor

Is the type of you field maxItems String or Number ?

angelinek209805
Level 2
Level 2

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

angelinek209805
Level 2
Level 2

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

Arun_Patidar
Community Advisor
Community Advisor

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

Gaurav-Behl
Community Advisor
Community Advisor

May be its not written to support type conversions and works only within the indices of the collection.

htl-spec/SPECIFICATION.md at master · adobe/htl-spec · GitHub

data-sly-repeat:

  • Iterates over the content of each item in the attribute value and displays the containing element as many times as items in the attribute value, allowing to control the iteration through the following options:
    • begin - iteration begins at the item located at the specified index; first item of the collection has index 0
    • step - iteration will only process every step items of the collection, starting with the first one
    • end - iteration ends at the item located at the specified index (inclusive)

Go with Ravi/Arun's approach.

Feike_Visser1
Employee
Employee

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

means not the same type.

Make sure that properties.maxItems is of type of number

angelinek209805
Level 2
Level 2

Thanks all for the insightful suggestions.

Will go with Java/JS method since unable to achieve with HTL although the properties.maxItems type was changed to Long.