Page 1 of 1

Scrolling to end of listItems when displayed/added on page

Posted: Wed Jul 09, 2014 10:27 pm
by Cody Blue

I am fetching items from Appery backend and displaying these as listItems on front-end. New items are dynamically added depending on user input and consequently displayed at end of the list. What I need is for the screen to display the very end and show the very last listItem (much like text messaging would) instead of the first one, whenever elements are fetched from the backend (fetching happens when new items are added or whenever the page is displayed).

Would appreciate your suggestions on how I may accomplish this?

Thank you.


Scrolling to end of listItems when displayed/added on page

Posted: Thu Jul 10, 2014 3:58 am
by obullei

Hello!

Could you explain more how do you want this option work?


Scrolling to end of listItems when displayed/added on page

Posted: Thu Jul 10, 2014 4:37 am
by Cody Blue

The following might better explain the need I have at hand:

Current scenario:

  • On page load a service is invoked that fetches data from backend

  • ListItems are populated on UI from above data

  • the screen shows the first item in the list (at top) and to get to the last item in the list one has to scroll down on the screen.

    Desired scenario:

    On page display, I want the screen to instead be at the very last item of the list.

    Furthermore, the user now enters information on the screen which gets added at the bottom of the list as listItem, and I need the screen to accordingly show this last new last item at bottom as visible by scrolling down.

    Hopefully this explains the scenario bit better?

    Thanks.


Scrolling to end of listItems when displayed/added on page

Posted: Thu Jul 10, 2014 1:55 pm
by Kateryna Grynko

Hi Cody,

I would recommend that you save service response in localStorage, and add a new component in the end of this array. Then read this value in a Generic service, and add mapping to listview. This will be easier than adding a new record via codeappend()/code function.