Pagination
If there are many shipments, products, or packages on a particular screen, they are distributed across multiple pages. Therefore, a store associate must be able to navigate to the page that contains the required information by using the pagination feature.
Solution
A pagination bar indicates the current page number. On the pagination bar, the store associate can move to the next or previous page and select the number of records to be displayed on a single page. If the number of records is less than the page size, the pagination bar is not displayed. By default, the application is configured to display five records per page on the web.Implementation
The page sizes can be configured specifically for each entity. The entities are
Shipment
, Container
, ShipmentLine
, and so on.
You can configure the page sizes in the
PaginationSize.json
file, which is in
the<INSTALL_DIR>/repository/eardata/wsc/war/wsc/common/pagination directory.
Page sizes can be specified as shown in the following sample code snippet: {
Entities: {
"Default":{
"PageSize": 5,
"PageSizes": "5,10,20",
"PageSizeMobile": 3,
"PageSizesMobile": "3,5,10"
},
"Shipment": {
"PageSize": 5,
"PageSizes": "5,10,20",
"PageSizeMobile": 3,
"PageSizesMobile": "3,5,10"
},
"Container": {
"PageSize": 5,
"PageSizes": "5,10,20",
"PageSizeMobile": 3,
"PageSizesMobile": "3,5,10"
},
"ShipmentLine": {
"PageSize": 5,
"PageSizes": "5,10,20",
"PageSizeMobile": 3,
"PageSizesMobile": "3,5,10"
}
"StoreBatchLine": {
"PageSize": 10,
"PageSizes": "10,16,20",
"PageSizeMobile": 4,
"PageSizesMobile": "4,8,10"
},
"StoreBatch": {
"PageSize": 10,
"PageSizes": "10,16,20",
"PageSizeMobile": 4,
"PageSizesMobile": "4,8,10"
},
"StoreBatchLocation": {
"PageSize": 10,
"PageSizes": "10,16,20",
"PageSizeMobile": 4,
"PageSizesMobile": "4,8,10"
}
}
}
The attributes in the code snippet are as follows:PageSize
andPageSizeMobile
: represents the number of records that are displayed when a page loads.PageSizes
andPageSizesMobile
: represents the different page sizes that the store associate can select.
Device-specific details
The mobile version of the application is configured to display three records per page and the
store associate can move to the previous and next pages. The page size selector can be implemented
with the help of PaginationSize.json
, which allows configuration of page size for
mobile as well.
End-user impact
The store associate can select the correct page size for viewing convenience.
Note: Continuous
scrolling is supported for batch picking screens. The logic to determine the number of records to
display on a page remains same. When the store associate attempts to scroll, the next set of records
are automatically loaded without the need for store associate to click the Next or Previous links.
In batch picking screens, the store associate cannot select the page size from the user interface.
The page sizes configured in the
PaginationSize.json
are considered. If for some
reason, the browser scroll bar is not displayed on a given screen, a down-arrow button is displayed
to help in continuous scrolling.