Author Topic: Implementation of Arrays with to-and-fro Navigation in Grid  (Read 2350 times)

Sai Siddhartha

  • GuiXT Forum
  • Newbie
  • *
  • Posts: 47
    • View Profile
Implementation of Arrays with to-and-fro Navigation in Grid
« on: September 14, 2017, 10:16:55 AM »
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