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
BedrockMission!

Learn More

View all

Sign in to view all badges

data-sly-repeat define max item via cq dialog

Avatar

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile
angelinek209805
Level 2

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

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

184 likes

Total Posts

234 posts

Correct Reply

70 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

184 likes

Total Posts

234 posts

Correct Reply

70 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
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>

Avatar

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile
angelinek209805
Level 2

03-01-2019

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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>

Avatar

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile
angelinek209805
Level 2

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>

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

440 likes

Total Posts

1,016 posts

Correct Reply

115 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

440 likes

Total Posts

1,016 posts

Correct Reply

115 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

03-01-2019

Is the type of you field maxItems String or Number ?

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

03-01-2019

try to use typehint as Long for number field item.

NumberField — Granite UI 1.0 documentation

Avatar

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile
angelinek209805
Level 2

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

Avatar

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile

Avatar
Give Back 5
Level 2
angelinek209805
Level 2

Likes

6 likes

Total Posts

25 posts

Correct Reply

0 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Ignite 1
Validate 1
View profile
angelinek209805
Level 2

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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,274 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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.