Minimize Information Load ( Progressive Disclosure) – UI5 Control

Discussion Forum SAP Fiori Design Minimize Information Load ( Progressive Disclosure) – UI5 Control
Viewing 3 posts - 1 through 3 (of 3 total)

Hi Guys,

Our Team has been designing the Fiori and Fiori Based Applications in recent times. Adopting Fiori Guidelines to the applications which are not lightweight , is a big challenge that I had come through in recent times. Had a big challenge where we want to load ex.500-1000 lines of data in a grid table component as we needed a sorting and filter option for most of the columns ( 10-15 Columns).

We ended up with using Grid Table to serve the use case as we couldn’t find any other option available in the UI5 UIControls library

Issues we faced :

  • Grid table basically loads all the line items (0-1500 max) from the backend in a single service call
  • Whenever a certain task has more than 1000 line items to be loaded in a page. It takes 20secs to load – which leads to a significant performance dropdown there

Solution we Used : 

  • We Tried using ‘List component’ first and as we need sort and filter functionality for all the columns we ended up using Grid Table Component
  • We also tried to customize the grid table content to add pagination to it as it could load only 10 line items from the table and the list can grow more on subsequent calls. But unfortunately the controls couldn’t be used together.

Any Alternatives ?

  • Is there any possibilities of using a standard control to load list of tasks by batch , meanwhile achieving the column sort and filter as well ?

I appreciate your great effort and time !!

Kind Regards,

Prabha

User Experience Evangelist
SAP SE

Hi Prabha,

I checked with the UI5 team, and this is the answer I got from them. I hope it helps!

By the way, for technical questions like this, in the future, you might want to ask them here: https://answers.sap.com/index.html. That’s where the techies hang out. This forum is more for design and UX topics.


The sap.ui.table.Table (Grid Table) is absolutely the go-to control for your use case. You may want to check your table and model configuration though.

In general, the Grid Table pages the data, when bound to an OData model. Even if it is showing a scrollbar, the data will be loaded page-wise, as the user scrolls down. Here is how it works with OData:

The table should be bound to an OData model (best: sap.ui.model.odata.v2.ODataModel). The model defaultCountMode can be set to “Inline” to reduce the number of requests even further.

In the table, please configure a reasonable threshold for the data load by setting the threshold property. The default is 100, which is just fine in most of the use-cases.

Let’s assume, the table shows 10 rows and it has a threshold of 100: The table will load a total first page of 110 records. You can check this, by going to the network tab in your debugger. The OData request should look something like: <https://my.server.corp>/<service>/<collection>/?$top=110

The top-value indicates the page size.

When the user scrolls down, there will be a request to directly load the next page:

<https://my.server.corp>/<service>/<collection>/?$skip=110&$top=100 After that second request, the use can keep on scrolling until entry ~111, before the next request will be triggered. This will ensure that there is always data to be displayed.

If you are using a JSON model with an own REST-service implementation from where you load the data, there is no easy way of implementing paging.

Thanks much Esther !

Your suggestion were really helpful ! and we achieved what we were looking for.

Appreciate your efforts to write back with the exact suggestions that we are looking for

Kind Regards ,

Prabha

Viewing 3 posts - 1 through 3 (of 3 total)
 

You must be logged in to reply to this topic.