Purpose:
Displays data from arrays in the form of grid with to-and-fro navigation if data exists in multiple pages.
Below example explains the notification data in arrays displayed in the form of grid with to-and-fro navigation buttons based on the number of pages.
This can be helpful in representing data read from grid and table.
Liquid UI Code:
////////////////////////// SAPLSMTR_NAVIGATION.E0100.sjs ///////////////////////////
// Function to check if the string value is blank
function isBlank(jvar){
if(typeof jvar == 'string') {
jvar = jvar.trim();
}
if(typeof jvar == 'undefined') {
jvar = '';
}
return(jvar == 'undefined' || jvar == undefined || jvar == null || jvar == "" || jvar == void 0);
}
if(isBlank(z_rowsperpage)){ //initializing variables
z_rows_notification = 1;
z_limit_notification = 4;
z_pageno_notification = 1;
z_rowsperpage = 4;
}
// arrys with notification data
var notifications = ["","10000101","10000102","10000103","10000104","10000105","10000106","10000107","10000108","10000109","10000110"]; // array
var not_Des = ["","first","second","third","fourth","fifth","sixth","seventh","eight","ninth","tenth"]; // array
var not_date = ["","01/01/2017","01/20/2017","02/10/2017","03/03/2017","04/05/2017","05/22/2017","06/25/2017","07/19/2017","08/20/2017","09/10/2017"]; // array
length_notif_array = notifications.length;
box([3,4], [13,69], "Notification Grid"); // group box
del("X[IMAGE_CONTAINER]"); // deletes image on easy access screen
if(length_notif_array>0){
// calculates number of pages
println("notification z_rowsperpage="+z_rowsperpage);
z_notif_noofpages = length_notif_array/z_rowsperpage;
z_number_pages = z_notif_noofpages;
z_number_pages = z_number_pages.toString();
z_index_notif = z_number_pages.indexOf('.');
if(z_index_notif != -1){
z_number_pages = z_number_pages.slice(0,z_index_notif);
z_number_pages = parseInt(z_number_pages)+1;
}
else{
z_number_pages = parseInt(z_number_pages);
}
// logic to display navigation buttons
if(!isBlank(z_number_pages)){
if(z_limit_notification <= z_rowsperpage){
if(z_number_pages==1){
}else{
pushbutton([4,65], "@0E@",{ "process":z_next_notification, "size":[1,3], "fcode":"/n"});
}
}
else{
if(z_pageno_notification > 1){
if(z_pageno_notification >= z_number_pages){
pushbutton([4,60], "@0D@",{ "process":z_previous_notification, "size":[1,3], "fcode":"/n"});
}
else{
pushbutton([4,60], "@0D@",{ "process":z_previous_notification, "size":[1,3], "fcode":"/n"});
pushbutton([4,65], "@0E@",{ "process":z_next_notification, "size":[1,3], "fcode":"/n"});
}
}
}
}
// assigning array values to text fields
for(idx = z_rows_notification, z_notif_row = 0;idx <= z_limit_notification;idx++){
text([5+z_notif_row,47], not_Des[idx],{ "size":20});
text([5+z_notif_row,26], not_date[idx],{ "size":15});
text([5+z_notif_row,6], notifications[idx],{ "size":15});
z_notif_row = z_notif_row+2;
}
}
// to load next page of notification numbers
function z_next_notification(){
z_limit_notification = z_limit_notification + z_rowsperpage;
z_rows_notification = z_rows_notification + z_rowsperpage;
z_pageno_notification = z_pageno_notification+1;
}
// to load previous page of notification numbers
function z_previous_notification(){
z_limit_notification = z_limit_notification - z_rowsperpage;
z_rows_notification = z_rows_notification - z_rowsperpage;
z_pageno_notification = z_pageno_notification-1;
}
See attachment for more information and screenshots
