23
Views
4
Comments
Solved
Scroll to a element in a list.


I have a list where the listItem is a blocks made by me.

That list goes much longer than the sreen. The agregate source of the list is ordered by date so in the rendered screen the list and then the ListItems/blocks apear ordered by date.

How can I in an action (go to / scroll) to the first block with a specific date in that list of ListItems/blocks?

Best regards

Pedro Guerra

Rank: #70
Solution

Hi Pedro,


To scroll to a specific element you can use the ScrollToElement action from OutSystemsUI.

You would just need the widget Id from that list item to get and you can that easily with JavaScript.

Something like this would do the trick - 1. Get first element with class list-item (0-based position from array) and 2. use that WidgetId in the ScrollToElement action:

Hope it helps.


Regards,
João

Rank: #70
Solution

Hi Pedro,


I misunderstood, I though you were using the ListItem widget, which has the list-item class, but the same principle is valid.

The goal of the Javascript was to identifiy the first row, which was searching for the first element with the class list-item but it is failing because there is no element with that class.

What you can do is to enclose your artist block in a container:


And give it a class, let's say artist-list-item. Your Widget Tree should look like this in the end:

 

Now you have your "hook" on each element of the list, because now each element will be a container with the class artist-list-item

You now just need to replace the part on your Javsacript where it is .list-item by .artist-list-item.

So your Javascript should be: 

$parameters.WidgetId = document.getElementsByClassName("artist-list-item")[0];

Hope it helps.


Regards,
João

Rank: #7749
Solution

Thanks for your time!

I think that my discription was not accurate. Here is the structure of my list of blocks. No listItems widget.

I also tryed encapsulating the blcok in list item to go with your javascript and altered to getElementesByClassName("list-item")[0].id but did not work. (tryed with indexes greater than 0 also).


And again thanks for your time

Best regards

Pedro Guerra



Rank: #70
Solution

Hi Pedro,


To scroll to a specific element you can use the ScrollToElement action from OutSystemsUI.

You would just need the widget Id from that list item to get and you can that easily with JavaScript.

Something like this would do the trick - 1. Get first element with class list-item (0-based position from array) and 2. use that WidgetId in the ScrollToElement action:

Hope it helps.


Regards,
João

Rank: #7749
Solution

Thanks for your time!

I think that my discription was not accurate. Here is the structure of my list of blocks. No listItems widget.

I also tryed encapsulating the blcok in list item to go with your javascript and altered to getElementesByClassName("list-item")[0].id but did not work. (tryed with indexes greater than 0 also).


And again thanks for your time

Best regards

Pedro Guerra



Rank: #7749

Thanks again for your time!

It was too obvious for me to not see!!!.... Shame on me...

You were very kind on taking time to write something so obvious. Thanks again.

Solved!

Best regards

Pedro Guerra