62
Views
8
Comments
Solved
How to create infinite scroll list with dynamically section header? (Mobile App)
Question

Hi everyone, i've been looking around about Outsystems mobile pattern especially this one: https://silkui.outsystems.com/Samples_Mobile.aspx#Mobile_Lists-Samples_ContactList

I want to create the exact same as the pattern displayed with header for each section list, but I want the header to be a date instead of an alphabet: 



How to implement it? Is it using "Section Group" widget? For now i've created this page with a block inside the list group, and the query inside the block is for a single date. But it's not good for performance since it's always fetching the data again if I scroll to the bottom and back to the top..

mvp_badge
MVP
Rank: #18
Solution

If you have a single Block with a List of Section Groups, then my suggestion is that you have:

  • Local Variables with
    • the index (row number) of the first record to fetch;
    • the number of new records to fetch;
    • the list of records to display on the screen
  • A Data Action (configured to Fetch At Start) that uses those two variables to decide what records to return:
    • The Data Fetch action's output should be a List of Record with 2 attributes: Date and List of Notifications;
    • This will require multiple database queries, but the Data Fetch action would be a single REST call from the mobile app
  • On the Data Action's On After Fetch, append it's Output to local variable that is used on the Screen
  • On the Screen use the local variable with the list of records to display

This way, whenever you go to the server again (your infinite scroll implementation would refresh the Data Action), you're not fetching the whole data again, just the "delta" between what you already have and the total of records you want to be able to scroll, and will be growing the displayed list with the new records...

Rank: #1073

Hi Aditya,

I also implemented sth similar. I used MainFlow\InfiniteScroll. In the "On Notify" I linked to the screen action to refresh the table records line count dynamically. 

For your case, I think you can hide the table header and put the data in the table rows. 

Hope that helps

Rank: #1073

Yes mine it is for web application. I think I downloaded the infinite scroll from the forge


https://www.outsystems.com/forge/component-overview/992/infinitescroll

mvp_badge
MVP
Rank: #18

Hi Aditya,

Like you mention, you can use Section and Section Group from OutSystems UI for this.

Lists in OutSystems Mobile/Reactive Web applications have an On Scroll Ending event that you can handle to implement Infinite Scrolling. They even have an accelerator that generates the required infinite scrolling logic for you:

Regarding separate queries per date... there's not much you can do to avoid that, but you can do it server-side, when you fetch more records (so that it is a single REST call between Mobile app on the device and OutSystems server).

Hope this helps!

mvp_badge
MVP
Rank: #18
Solution

If you have a single Block with a List of Section Groups, then my suggestion is that you have:

  • Local Variables with
    • the index (row number) of the first record to fetch;
    • the number of new records to fetch;
    • the list of records to display on the screen
  • A Data Action (configured to Fetch At Start) that uses those two variables to decide what records to return:
    • The Data Fetch action's output should be a List of Record with 2 attributes: Date and List of Notifications;
    • This will require multiple database queries, but the Data Fetch action would be a single REST call from the mobile app
  • On the Data Action's On After Fetch, append it's Output to local variable that is used on the Screen
  • On the Screen use the local variable with the list of records to display

This way, whenever you go to the server again (your infinite scroll implementation would refresh the Data Action), you're not fetching the whole data again, just the "delta" between what you already have and the total of records you want to be able to scroll, and will be growing the displayed list with the new records...