Mobile Lazy Load

  

Hi All


I was wondering, does anyone have any examples/patterns they could share on how you guys have achieved mobile lazy loading an aggregate?


By lazy load I mean initially loading a few of the elements (lets say 15) of the query and either downloading the rest on the background after render, or loading a number more on scroll ending.


I have implemented it with a numeric identifier however am sure that there is something better out there (though you can check it out over here).


Thanks! Regards,

   CLSJ

Are you using the On Scroll Ending event from List?

https://success.outsystems.com/Documentation/10/Reference/Mobile_Interfaces/Designing_Screens/List

You can choose "New Infinite Scroll Client Action" and the IDE will build the logic for you.

João Heleno wrote:

Are you using the On Scroll Ending event from List?

https://success.outsystems.com/Documentation/10/Reference/Mobile_Interfaces/Designing_Screens/List

You can choose "New Infinite Scroll Client Action" and the IDE will build the logic for you.

Hi Joao


I am using the onScrollEnding, but how would I limit the aggregate results? I Max.Records property, however I can't think of a way to get the next 15 (to say a number) on scroll ending. 


I was not aware of the New Infinite Scroll client action. Where can I find it?


Thanks!

  CLSJ


Hi Carlos,

The New Infinite Scroll client action is one of the suggestions on the OnScrollEnding event handler dropdown. It is also the easiest way of implementing what you want, as it will automatically generate the code and the variables you need to set up in order to dynamically increase the number of records fetched and displayed on your list.

Even if you don't want to rely on it, I suggest you try it out to have an example implementation.

Solution

@Carlos 

Like I said in my previous post you can:

1) In the "On Scroll Ending" dropdown list pick (New Infinite Scroll Client Action - 1st Image)

2) In the newly created action (OnScrollEnding) choose how many records (Increment Records) you want to fetch next - 2nd Image)


1st Image




2nd Image



Cheers

João Heleno

Solution