[MGNLRESTUI-17] Investigate support lazy pagination in UI Created: 12/Dec/19  Updated: 20/Apr/20  Resolved: 14/Apr/20

Status: Closed
Project: Magnolia REST Client UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Improvement Priority: Neutral
Reporter: Jorge Franco Assignee: Jorge Franco
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 0.25d
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLRESTUI-13 Improve speed in paginated UI component Accepted
relates to MGNLRESTUI-15 Support more pagination options Accepted
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Declarative REST clients
Sprint: 6.2.1 Ramp-up 21
Story Points: 3

 Description   

At the moment we support pagination, but the API need to return total size of results to use current Grid UI.

A lot of API's don't return total number of results, so the pagination need to be done lazy, page by page, while the user is scrolling.

We can investigate if the component (https://github.com/viritin/viritin/tree/master/viritin/src/main/java/org/vaadin/viritin/grid) fits, and how much time we need to integrate with current rest UI stuff.

Also, instead of use a grid we can use some pagination component like https://vaadin.com/directory/component/pagination

Timebox to see if the library helps: 3SP



 Comments   
Comment by Jorge Franco [ 06/Apr/20 ]

 When the API don't return the total size, instead of use external components, is much better use our own components/libraries. Then we have 2 options:

 

  • Provide some links/buttons to go next or previous page. So we show the items of the current page and provide links to go other pages. With this approach the number of items in session is very low, just the number of items per page in the API. This can be preferred if the api only gives us link to next bunch of results.
  • Give some button 'Load more items...' to load items from next page. Each time you load more items, the number of elements in session is growing, and you can sort more items.

Also we need some kind of design/ux as starting point.

Recommendation: using pagination API we recommend get as much items per page as possible, as less calls we do to get more items, the experience is much better.

 

The technical solution can be something like, create a new view type:

workbench:
  contentViews:
    - name: list
      $type: paginatedListView

Also we have to add more pagination types:

subApps:
  browser:
    class: info.magnolia.ui.contentapp.configuration.BrowserDescriptor
    datasource:
      $type: jsonDatasource
      pagination:
        $type: nextPreviousLinks
        perPagePropertyName: '$.pagelen'
        nextPageLinkName: '$.next'
        previousPageLinkName: '$.previous'

And the implementation class of that definition can be something like:

public class PaginatedListView<T> extends CustomComponent implements ContentView {

    private final VerticalLayout panelContent;
    private final PaginatedListView<T> paginatedListView;

    @Inject
    public PaginatedListView(ValueContext<T> valueContext, PaginatedListViewDefinition<T> definition) {

        panelContent = new VerticalLayout();
        Component paginationComponent = //create pagination UI;
        panelContent.addComponent(paginationComponent);
        paginatedListView = new PaginatedListView<>(valueContext, definition, paginationComponent);
        panelContent.addComponent(paginatedListView);

        setCompositionRoot(panelContent);
    }
}

PaginationListView can be an extended ListView with a presenter to handle pagination ui components and populating grid items with rest calls to jsonDataSource.

Comment by Jorge Franco [ 13/Apr/20 ]

The Viritin LazyGrid https://github.com/viritin/viritin/blob/master/viritin/src/main/java/org/vaadin/viritin/grid/LazyGrid.java can be used to support pagination of type offset/limit. LazyGrid offer a setItems method, where we can set a callback to get items from a restClient using params sortOrder, Offset and limit. At the end is using a dataProvider with a hack that returns 0 on size.

The parent grid of LazyGrid is MGrid, that extends Vaadin Grid, that's good, we use MagnoliaGrid that also extends Vaadin Grid. We need to extend GridViewPresenter with the new Grid.

 

This component looks good, but I think is much better we create our own implementation that add this new dependency. No new commits in https://github.com/viritin/viritin from August 2019.

Comment by Quach Hao Thien [ 14/Apr/20 ]

I'll lean forward to the the option #2 A Load More button would be suitable for lazy load instead of a next/previous button, which will go against the design of magnolia grid

Generated at Mon Feb 12 06:51:03 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.