`Count` property for the UX `<Each>` Component

Feature Suggestions
1

Hey the Fusers Crew!

The <Each> Component is very powerful. Could do a lot more. I have some ideas and so does a few community members I’ve heard but here’s one to get the topic started.

Something like this in UX:

<Each Items="{data}" Count="12"/>

where we could limit the number of items displayed from our datasource is needed.

Cheers,

Elizabeth

2

An Invert/Reverse property would be nice as well, where I could do:

<Each Items="{items}" Invert="True" Count="12">
  ...
</Each>

Which would give me the last 12 items in the Array/Observable items

3

Hi Elizabeth,

There is already a Count property in Each which will limit the amount of items it loops. I believe the correct way to limit your datasource items would be by using <WhileCount>. As per the documentation:

<WhileCount Items="{things}" EqualTo="3" GreaterThan="3" >
    <Text>You have 3 or more things.</Text>
</WhileCount>

[https://www.fusetools.com/learn/fuse#whilecount-and-whileempty]

4

That’s completely different Count only works for just looping, it won’t limit the amount from the datasource.

WhileCount is basically a boolean for checking the count of the items.

<WhileCount Items="{items} LessThan="5">
    <StackPanel>
        <Each Items="{items}" Count="1">
            <Text Value="{}" />
        </Each>
    </StackPanel>
</WhileCount>

The above would show all three numbers because the WhileCount boolean is true

We know Count already exist, but it’ll be ignored if Items is specified:

<JavaScript>
    module.exports = {
        items: [1,2,3]
    }
</JavaScript>
<StackPanel>
    <Each Items="{items}" Count="1">
        <Text Value="{}" />
    </Each>
</StackPanel>

Will still display all three items, its not limiting them, that’s what we want

5

Hi Fernando,

Thanks for the docs but Edwin is correct.

I had tried all the ways with <WhileCount> which is just a boolean trigger and does not do any "limiting".

As well as using the Count property but as we know that only states how many times to repeat the components nested but with Items="{}" … it does nothing. :frowning:

Cheers,

Elizabeth

6

Any news on this?

7

The quite new Observable.slice([begin[, end]]) should be usefull for this case Elizabeth. Check out the docs here: https://www.fusetools.com/docs/fusejs/observable#slice-begin-end

8

Yes I know this is all possible through javascript but just being able to do this in UX is so much better, because for each view of the same data I’d have to export different observables. Where with this through ux I can export one data set for the view, and manipulate the view through ux however I want.

9

Items and Count aren’t meant to be used together; it’s true that that won’t do what you want. You do have the option to use slice as Kristian mentioned.

Although it would be nice to have a UX feature for this, we simply don’t have one right now.

10

Could you make an internal ticket for this, I know this is not high priority since we can just use slice, and map out a new observable for each view. But would still love to see this sometime in the future

11

Will do!

12

Any news on this ?

13

This feature is in the pipeline but not yet released. Keep an eye on upcoming changelogs.

14

Specifically, keep an eye out for the Each properties Limit and Offset in a release very soon! :slight_smile: