openui5-paginator

openui5-paginator

openui5-paginator is a UI5 Custom Control that allow you to handle large data in a Table. Navigation is done via paging.

Motivation

We use openUI5 on the client side as the base technology for our product "sysHUB". On the server side, we are using our REST-based API. The main thing is that we are working with large table entries. The base technology of openUI5 and sapUI5 is oData V4 to get data from the backend. In our case, this is not a good choice because we are providing some REST-Services for our customers, and we can not implement REST-Services and oData Services to the same time in our product. In an earlier version of openUI5, a paginator was included, but it was removed since 1.45 (I think). We are going on to develop the paginator to work with all newer versions and extend it with some valuable features.

Demo

If you check out this project, there is a "demo" app to see how the paginator works. We are using WebStorm as a development IDE. Configure it as a "JavaScript Debug" run configuration to debug the demo app.

You can also use this link to see a working example: openui5-paginator-demo

Usage the control

Download

Check out the GIT-Project or download it as ZIP. Furthermore the package is deployed also in NPM

npm install openui5-paginator

Configure manifest.json

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library. In this case it is the "thirdparty" folder in your project. This folder must be in the webapp root location.

"sap.ui5": {
    ...
	"dependencies": {
		"minUI5Version": "1.102.2",
		"libs": {
    		...
			"syshub.controls": {}
		}
	},
	"resourceRoots": {
		"syshub.controls": "./thirdparty/syshub/controls/"
	}
}

Add the custom control inside an XML View

First of all add the namespace to the View

xmlns:lab="syshub.controls"
xmlns:t="sap.ui.table"

And then you can simply add the Paginator custom control to your "sap.ui.table". As followed you can see some data bindings.

<t:Table ...>
    <t:footer>
        <lab:Paginator id="idPaginator"
                       currentPage="{modelEntriesMetadata>/currentPage}"
                       entriesAbsolute="{modelEntriesMetadata>/entriesAbsolute}"
                       entriesPerPage="{modelEntriesMetadata>/entriesPerPage}"
                       numberOfVisiblePages="10"
                       showGoto="true"
                       entriesPerPageVisible = "true"
                       showSpinner="{modelEntriesMetadata>/showSpinner}"
                       page="onPage"
                       entriesPerPageChanged = "onEntriesPerPageChanged">
        </lab:Paginator>
    <t:footer>
    <t:columns>
        ...
    </t:columns>
</t:Table>

Parameters

Events

entriesPerPageChanged

page

Methods

Build

If you would like to extend and customize the control, you can easily do that but re-building the code with just a simple ui5 cli commands:

npm install
ui5 build
ui5 startApp

How to work with the control

It is important to have a REST-Service with the following parameters.

eg: /webapi/v3/data/list?offset=0&limit=20&orderBy=id.desc&search=id<1000

We use RSQL-Queries in the orderBy and search criteria.

The first query has no "id" inside the search criteria. This means we got a snapshot view of the table and got in the response header the "abs_count" and the "highest_id". All queries while paging limited the query in the search criteria with the highest_id. The reason for this is, that growing up the table with new entries will destroy paging if we don't have the highest_id in the search criteria.

Known issues

One problem which we don't found a solution is removing of entries while paging. This means, if another instance removes entries which are included in the query, the result is different, regarding the abs_count and the computing of paging can run in some problems but we live with this limitation. One idear can be, if while paing the abs_count changed the current page can be set to the first one.

Please have a look of the DataService.js and the mockserver.js to understand how paging is working.

Important

If the value "entriesAbsolute" = 0, the paginator is not shown. Be sure, to set this value after a query.

Credits

Wolfgang Haag

• Email: whaag@nt-ware.com

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details