LiquidUI: Dynamic create table, and read/write value into table cell
This example is to create the logic of displaying multiple LiquidUI table in the screen, and read or write value from the table.
User is able to enter any value into the inputfield at top, then clicks on "Set Table Default" button on toolbar to write the value to all displayed table.
To read from table, user can click "Read Table Content" button on toolbar, then the content from editable table will be copied to corresponding readonly table.
User is able to click "Add" or "Delete" button at the bottom of last table to change the quantity of displayed table on the screen.
Step 1: Create user interface
//User interface
//Delete all existing pushbuttons on toolbar
del("P[User menu]");
del("P[SAP menu]");
del("P[SAP Business Workplace]");
del("P[Other menu]");
del("P[Add to Favorites]");
del("P[Delete Favorites]");
del("P[Change Favorites]");
del("P[Move Favorites down]");
del("P[Move Favorites up]");
del("P[Create role]");
del("P[Assign users]");
del("P[Documentation]");
clearscreen();
title("Dynamic Table Data Handling");
pushbutton([TOOLBAR], "Set Table Default", "?", {"process":setTableDefault});
pushbutton([TOOLBAR], "Read Table Content", "?", {"process":readTableContent});
pushbutton([TOOLBAR], "Clear All Table", "?", {"process":clearTableContent});
//Default the counter value to 1 if it's undefined
if(!z_table_counter){
z_table_counter = 1;
}
//Create a field on the screen to accept user default value to table
inputfield([0,10], "Default Doc Type", [0,30], {"name":"z_default_type", "size":3});
//Logic to dynamic create editable/readonly tables
for(var i=1; i<=z_table_counter; i++){
start_row = 2 + (i-1) * 7; //Specify the dynamic value of row
table([start_row,10], [start_row+5,40], {"name":"z_table_"+i, "title":"Record "+i, "rows":50});
column("Document", {"table":"z_table_"+i, "name":"doc_no", "position":1, "size":12});
column("Prt", {"table":"z_table_"+i, "name":"doc_part", "position":2, "size":3});
column("Typ", {"table":"z_table_"+i, "name":"doc_type", "position":3, "size":3});
column("Vr", {"table":"z_table_"+i, "name":"doc_version", "position":4, "size":2});
table([start_row,60], [start_row+5,90], {"name":"z_table_readonly_"+i, "title":"Readonly Record "+i, "rows":50});
column("Document", {"table":"z_table_readonly_"+i, "name":"doc_no", "position":1, "size":12, "readonly":true});
column("Prt", {"table":"z_table_readonly_"+i, "name":"doc_part", "position":2, "size":3, "readonly":true});
column("Typ", {"table":"z_table_readonly_"+i, "name":"doc_type", "position":3, "size":3, "readonly":true});
column("Vr", {"table":"z_table_readonly_"+i, "name":"doc_version", "position":4, "size":2, "readonly":true});
}
btn_start_row = 1 + z_table_counter * 7; //Specify the dynamic value of pushbutton's row
pushbutton([btn_start_row,10], "@04\\QAdd Table@", "?", {"process":changeTableAmount, "size":[1,2], "using":{"l_cmd":"ADD"}});
//Logic to display the pushbutton which decreases counter by 1, if there's more than one table showing on the screen
if(z_table_counter>1)
pushbutton([btn_start_row,14], "@05\\QDelete Table@", "?", {"process":changeTableAmount, "size":[1,2], "using":{"l_cmd":"SUB"}});
Step 2: Create function to change the counter of displaying table
//Function to change the amount of display table
function changeTableAmount(param){
if(param.l_cmd == "ADD"){ //If passed value is "Add", increment the counter
z_table_counter++;
} else { //If passed value is "SUB", decrease the counter
z_table_counter--;
}
}
Step 3: Create function to set entered value to all editable tables
//Function to set default document type to all editable tables
function setTableDefault(){
onscreen "*"
var tmp_dyn_doc_type_str = "";
//Make the value of variable z_default_type becomes a string type after conversion
var tmp_default_value = "'" + z_default_type + "'";
for(var j=1; j<=z_table_counter; j++){
for(var k=0; k<50; k++){
tmp_dyn_doc_type_str = "z_table_" + j + ".doc_type[" + k + "]";
eval(tmp_dyn_doc_type_str + "=" + tmp_default_value + ";");
}
}
enter("?");
}
Note: "eval" is a JavaScript function to evaluate the string value then process.
Content within "eval" command becomes "z_table_1.doctype[0] = 'ZEO'" for example.
Step 4: Create function to read value from editable table then write to readonly table
//Function to copy values from editable tables to readonly tables
function readTableContent(){
onscreen "*"
var tmp_dyn_table_copy_from_str = "";
var tmp_dyn_table_copy_to_str = "";
for(var j=1; j<=z_table_counter; j++){
for(var k=0; k<50; k++){
tmp_dyn_table_copy_from_str = "z_table_" + j + ".doc_no[" + k + "]";
tmp_dyn_table_copy_to_str = "z_table_readonly_" + j + ".doc_no[" + k + "]";
//If the content of cell is "undefined", set the cell value to blank
if(!eval(tmp_dyn_table_copy_from_str)){
eval(tmp_dyn_table_copy_from_str + "= '';");
}
eval(tmp_dyn_table_copy_to_str + "=" + tmp_dyn_table_copy_from_str + ";");
tmp_dyn_table_copy_from_str = "z_table_" + j + ".doc_part[" + k + "]";
tmp_dyn_table_copy_to_str = "z_table_readonly_" + j + ".doc_part[" + k + "]";
if(!eval(tmp_dyn_table_copy_from_str)){
eval(tmp_dyn_table_copy_from_str + "= '';");
}
eval(tmp_dyn_table_copy_to_str + "=" + tmp_dyn_table_copy_from_str + ";");
tmp_dyn_table_copy_from_str = "z_table_" + j + ".doc_type[" + k + "]";
tmp_dyn_table_copy_to_str = "z_table_readonly_" + j + ".doc_type[" + k + "]";
if(!eval(tmp_dyn_table_copy_from_str)){
eval(tmp_dyn_table_copy_from_str + "= '';");
}
eval(tmp_dyn_table_copy_to_str + "=" + tmp_dyn_table_copy_from_str + ";");
tmp_dyn_table_copy_from_str = "z_table_" + j + ".doc_version[" + k + "]";
tmp_dyn_table_copy_to_str = "z_table_readonly_" + j + ".doc_version[" + k + "]";
if(!eval(tmp_dyn_table_copy_from_str)){
eval(tmp_dyn_table_copy_from_str + "= '';");
}
eval(tmp_dyn_table_copy_to_str + "=" + tmp_dyn_table_copy_from_str + ";");
}
}
enter("?");
}
Step 5: Create function to clear the content of all display tables
//Function to clear all table content
function clearTableContent(){
var tmp_dyn_doc_str = "";
for(var j=1; j<=z_table_counter; j++){
tmp_dyn_doc_str = "z_table_" + j + ".doc_no";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_" + j + ".doc_part";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_" + j + ".doc_type";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_" + j + ".doc_version";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_readonly_" + j + ".doc_no";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_readonly_" + j + ".doc_part";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_readonly_" + j + ".doc_type";
eval(tmp_dyn_doc_str + "= [];");
tmp_dyn_doc_str = "z_table_readonly_" + j + ".doc_version";
eval(tmp_dyn_doc_str + "= [];");
}
}
See attachments for code samples
