To infinite (scroll)… and beyond!
[This is the perfect time to panic! I’m lost, Andy is gone, they’re gonna move into their house in two days and it’s all your fault!]
The Challenge
Have you ever heard about performance issues? Although any developer around the world will tell you that there’s no such thing in every app ever built by them, the reality is that they exist and can appear in the craziest places.
As you may know, they appear especially when you deploy your application into the Production server and the users or beta testers start loading tons of records into the application and it starts crashing (maybe, and I’m just guessing, that’s probably because you only tested with 20 or 30 records in your development environment).
I encounter one of those issues on an application that had a chat functionality, that in a page listed on the left side all the conversations that the user had. 1 year after the application went live, that list was retrieving more than 13000 records into the screen at once. The result? Well, the page was taking something like 20 seconds to load (in the few times it didn’t crash instead). No need to say that the users couldn’t stand it so that important and useful functionality wasn’t being used.
So I needed to implement a pattern that would allow the page to show some conversations and then include more as the user scrolled down for more.
The Solution
The application was built using the Outsystems Platform, so as an Outsystems Developer I always expect to have a component on the Outsystems Forge that fits my case :p
I searched for it and found one that was using the full page to scroll and I needed to scroll on a specific area, but the upside of it is that it was built by a colleague of mine here at Truewind.
So, like a Jedi grabs a lightsaber to fight the Evil Empire I grabbed my mouse, opened Service Studio and started updating the component for that.
From now on, things will get a bit nerdy but bear with me.
What did I know?
- I had an HTML div with a specific height that I wanted to scroll vertically to see more conversations (Wrapper div);
- I had a list of conversations that started by showing the first 20 records;
- I needed to refresh the list when I was almost reaching the end of the scroll bar to show more results;
So I needed to adapt the component I found to check when I was almost reaching the end of the scrollbar. Because I’m not a javascript Jedi, I reached out to our Front-End Team Leader, André Silva and asked for help.
He instantly told me that I needed to use the getBoundingClientRect() method to calculate the position of both divs.
That resulted on the logic that you can check in the component, by checking if the bottom of the list was smaller than the bottom of the Wrapper + 35% of it (when I’m reaching the last part of the scroll). When that happens I need to fire an event to refresh the list. Using the Outsystems Platform, we can do that by clicking on a button that will run a screen action with a Notify action and on the OnNotify handler on the page, increasing the number of rows to show on the list and refresh it.
Now you can implement that logic simply by downloading the component from Forge here. Also, there is a demo available here!
If you have any questions, feel free to use the Support tab on the component’s page and we’ll try to get back to you as soon as possible.
Happy scrolling!
Disclaimer: this component is not supported by Truewind.
