Utilities/ScrollToElement example - How to Scroll Focus on an element in a list item
Application Type
Reactive
Platform Version
11.11.2 (Build 28544)

Goal: Focus on a list item (scroll/move page to focus on it).


The list item is long and you need to scroll to see them all (there is no scroll bar added, just page scrolling)

I found a partial answer using Utilities/ScrollToElement but the example was not clear.

1) is there a way to focus on an item in a list item using OS not JS?

2) If not 1), would you kindly provide a few examples for me and the community on how to use Utilities/ScrollToElement ?

I understand that functionally, must get the item ID (or the containing list class ID) and find the element using JS and ScrollToElement.


Thanks!

Test.png

Hi Rob

You can add a class to the specific item list that you want to scroll to using the element properties, and use JS to get the item Id:

var listItems = document.getElementsByClassName("scroll-to");

$parameters.FirstItemId = listItems[0].id;


This JS returns only the first element id with class "scroll-to".

(The class can have any name. Just make sure that the class you are searching for with JS is the same as the class you put in the item)

Hope this helps

Kind regards

mvp_badge
MVP

Hi Rob,


You can check below component logic, it will help you because it have similar requirement.

https://www.outsystems.com/forge/component-overview/8368/reactive-scroll-to-customelement

Thanks Salman, I need to see how to use a Forge component, sorry I am such a newbie. But I imagine your forge solution will be something I can call from within my modules...

Bruno, thanks a lot, I need confirm a few things for completeness:


var listItems = document.getElementsByClassName("scroll-to");

$parameters.FirstItemId = listItems[0].id;


scroll-to is the class name of the list view.

$parameters.FirstItemId is a way to define an output for my JS (in this case the JS "function" name is GetFirstItemId) and FirstItemId the output.

What is the content of ScrollToElement?

And how do you tell it to go to say for example element "5" in the list? because I want the list to scroll to a "selected" element (one selected by the user during runtime)

$parameters.FirstItemId = listItems[5].id;  ?

I guess my module needs to figure out what element is in line 5.

Let's imagine the following scenario:

ListView classname: ListView01

List values in order:

1. Apples
2. Bananas
3. Oranges
4. Kiwis
5. Plums
6. Melons

I want to scroll to Plums.

Solution:

var listItems = document.getElementsByClassName("ListView01");

$parameters.FirstItemId = listItems[5].id;

However, how do I know Plums is number 5?

$parameters.FirstItemId is an output parameter for the JS on OS, yes.

"scroll-to" is the class of the item you want to scroll to. You can create a condition to add the class to the table item using the extended properties.

The condition for adding the class will depend on what you need to focus on.

There could be more than one item with the same class, so JS returns only the first one.

In your scenario, you need to add the class to the Plums item and use exactly the JS that is in the first comment.

Take a look at my OML example to understand

ScrollTo.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.