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
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
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
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];
Hi João,
Do you can help me about this bug? I'm tried your suggestion in my code, But my JS doesn't work.
Below, my screenshot about that.
Thanks so much at advanced.
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!
Thanks for your time,
I'm trying to do a similar thing with mine. I Have a Scrollable Container with a list inside it. below the list I have a container with the id 'LastDiv' marking the element I want to scroll to.
Unfortunately, using the scrollToElement Function only scrolls the entire page
I have This in JavaScript
This gives the error
Best regards,
Luke
Hi Luke.
Make sure element with id 'LastDiv' really exists. By that error seems like it doesn't.
To avoid that error add an if before scrolling:
if(element)
element.scrollIntoView();
Hi Pedro,Because Id is not assigned dynamically (you can put Name property there that Id will contain tougher with rest of Id). So my recommendation is to use in div (that contains one record from list) Attribute "Name" and assign there date. Later on in action that should scroll user to that record You can put JS code block with input "recordDate", and as output id. Remember that both should be text vales.
let apptag = document.getElementsByName($parameters.recordDate)[0].id$parameters.id = apptag;
In this code you search element by its name you put in brackets ().Because you want only first finding use [0] (first element), and you want just Id.Then you assign that vale to your output :)