I have a table with about 1000 names on it. What I want to happen when the user adds a new name is for the table to jump/move to the new entry. Using ListIndexOf, I know where in the table the row is, but I can't figure out how to move to it.
If I use a StartIndex, it puts that row at the top of the table but excludes anything before it.
I've tried the Outsystems UI Utility SetSelectedTableRow, but it didn't do anything. I assume the table ID is the table widget and not the container it's in.
I see ScrollToElement, but I don't see how to identify to where it should scroll.
Hello again Jeff,
Hope you're doing well!
Please find the attached OML for reference.
I used Guids and sorted them so I could test new element additions on the middle of the table. The scroll seems to be working as you pretend.
Let me know if it helps you!
Kind regards,
Rui Barradas
Hey there Jeff,
Hope you're doing well.
After a couple hours, I did some tests and I think I've managed to get a solution for you ^^
So I'm assuming you are using a regular Table from OutSystems. If so, all of the rows have the same class table-row but they don't have an id.
This JavaScript will return all of the rows inside the table:
document.getElementsByClassName("table-row");
Since you are using the ListIndexOf action to get the position of the row you pretend, you can use it. Just pass it as an input parameter in the JavaScript and then you can adapt your previous line:
document.getElementsByClassName("table-row")[$parameters.ListIndexOf];
This should give you the exact element (row) that you pretend, however you don't have an id. So you'll need to define one. Therefore you can do something like:
document.getElementsByClassName("table-row")[$parameters.ListIndexOf].id = 'my_widget'.concat($parameters.ListIndexOf);
Basically with this last line, I'm defining the id of the element for the ScrollToElement action. But they should be different, therefore I suggest that you concatenate a pre-defined string (in this case 'my_widget') with something variable (in this case the index of the element).
So your WidgetId for the new element added should be something like my_widget24 (as an example).
Now you can simply use the ScrollToElement action and pass the WidgetId that you pretend:
Obviously without knowing your code it will be hard to validate everything, but I think you can follow this idea and adapt it for your use case if you need to.
Let me know if it worked for you!
Wow. You put a lot of effort into this! Thank you.
I call myself an advanced beginner with Outsystems. One of my weak points is Javascript. I have very little experience with it.
So I understand the concept of your solution but I don't how to implement it.
Do you have an OML that I can look at to understand how things fit together?
Again, thank you!
Hello @Jeff Kest ,
Did this work for you?
Please do let me know!
Sorry, I've been away for a few days.
I've played with it and I understand what it's trying to do. However I'm unable to get the ID to set.
My table is in a block within a popup and has a sticky header. There is another table on the parent screen. How does it know to put the ID on the current table?
With the sticky header, if I'm scrolled down and I want to go to the top row (0), if it's not on the screen, is it able to set its ID? I've been using a test case of going to record zero instead of using a listindex.position.
Where do you want to set the ID? In the table on the parent screen or in the table inside the popup?
If you want to access a specific element and set it's ID, you can simply change the class in the Style property and get the element by that specific class.
My statement was:
And it works because my table has this:
Meaning all the rows of the table will have the class "table-row", therefore I can get a list of these elements using the JavaScript above.
You can just add a new class and search for it in the table that you pretend to set the ID.
About your second question, everything that is rendered in the page, it's present in the HTML, therefore you can access that element or set its ID. So if you're scrolled down, as long as it is rendered, there is not problem to go to the top row.
Hope that this helps you!