Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

Scrolling to end of listItems when displayed/added on page

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.

obullei
Posts: 0
Joined: Thu Jun 05, 2014 12:17 am

Scrolling to end of listItems when displayed/added on page

Hello!

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

Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

Scrolling to end of listItems when displayed/added on page

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.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Scrolling to end of listItems when displayed/added on page

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.

Return to “Issues”