Liquid UI: Dynamic Layout Changing
Purpose:
To dynamically change layout with different steps in a process, which to provide scenario of step through the creation.
Example below shows the structure of creating a 4 steps scenario to create an order.
The structure/scenario can be applied to any transaction with your save functionality.
Step 1: Remove existing elements on screen
clearscreen(); //Remove all SAP elements on screen
Step 2: Set default logic for initial status
if(! lp_layout){ //Default all variables if layout value is not set
lpReset(); //Default all variables
}
Step 3: Change title and create status/toggle buttons
title("Create Work Order");
pushbutton([1,2], "&V[lp_btn_icon_step1]Step 1", "?",
{"process":lpChangeLayout, "using":{"l_select":"1"}, "size":[lp_btn_height_step1,20]});
text([1,25], "@9T@");
pushbutton([1,30], "&V[lp_btn_icon_step2]Step 2", "?",
{"process":lpChangeLayout, "using":{"l_select":"2"}, "size":[lp_btn_height_step2,20]});
text([1,53], "@9T@");
pushbutton([1,58], "&V[lp_btn_icon_step3]Step 3", "?",
{"process":lpChangeLayout, "using":{"l_select":"3"}, "size":[lp_btn_height_step3,20]});
text([1,81], "@9T@");
pushbutton([1,86], "&V[lp_btn_icon_step4]Step 4", "?",
{"process":lpChangeLayout, "using":{"l_select":"4"}, "size":[lp_btn_height_step4,20]});
Step 4: Create different layouts based on the value of layout variable
if(lp_layout == 1){
box([3,2], [9,105], "Step 1 - General Data");
inputfield([4,4], "Order Type", [4,20], {"name":"iw31_order_type", "size":4});
inputfield([5,4], "Plant", [5,20], {"name":"iw31_plant", "size":4});
inputfield([6,4], "Business Area", [6,20], {"name":"iw31_bus_area", "size":4});
inputfield([8,4], "Reference Order", [8,20], {"name":"iw31_ref_order", "size":12});
box([4,50], [8,102], "Person Responsible");
inputfield([5,52], "Planner Group", [5,68], {"name":"iw31_planner_grp", "size":3});
inputfield([5,73], "/", [5,75], {"name":"iw31_plant", "size":4, "readonly":true});
inputfield([6,52], "Main Wrk. Ctr.", [6,68], {"name":"iw31_main_wrk_ctr", "size":8});
inputfield([6,78], "/", [6,80], {"name":"iw31_main_wrk_ctr_plant", "size":4});
inputfield([7,52], "Person Res.", [7,68], {"name":"iw31_bus_area", "size":4});
pushbutton([10,90], "@9T@Next", "?", {"process":lpChangeLayout, "using":{"l_select":"2"}, "size":[1,15]});
}
else if(lp_layout == 2){
box([3,2], [9,105], "Step 2 - Date and Reference");
inputfield([4,4], "Basic Start", [4,20], {"name":"iw31_basic_start", "size":10, "date":true});
inputfield([5,4], "Basic Fin.", [5,20], {"name":"iw31_basic_fin", "size":10, "date":true});
inputfield([6,4], "Priority", [6,20], {"name":"iw31_priority", "size":20});
inputfield([8,4], "PMActType", [8,20], {"name":"iw31_ref_order", "size":3});
box([4,50], [8,102], "Reference object");
inputfield([5,52], "Func. Loc.", [5,68], {"name":"iw31_func_loc", "size":18, "maxlength":40});
inputfield([6,52], "Equipment", [6,68], {"name":"iw31_equip", "size":18, "maxlength":40});
inputfield([7,52], "Assembly", [7,68], {"name":"iw31_assembly", "size":18, "maxlength":40});
pushbutton([10,70], "@9S@Previous", "?", {"process":lpChangeLayout, "using":{"l_select":"1"}, "size":[1,15]});
pushbutton([10,90], "@9T@Next", "?", {"process":lpChangeLayout, "using":{"l_select":"3"}, "size":[1,15]});
}
else if(lp_layout == 3){
box([3,2], [9,105], "Step 3 - Location");
inputfield([4,4], "Maint. Plant", [4,20], {"name":"iw31_maint_plant", "size":4});
inputfield([5,4], "Location", [5,20], {"name":"iw31_location", "size":10});
inputfield([6,4], "Room", [6,20], {"name":"iw31_room", "size":8});
inputfield([7,4], "Plant section", [7,20], {"name":"iw31_plant_section", "size":3});
inputfield([8,4], "Work center", [8,20], {"name":"iw31_work_center", "size":8});
pushbutton([10,70], "@9S@Previous", "?", {"process":lpChangeLayout, "using":{"l_select":"2"}, "size":[1,15]});
pushbutton([10,90], "@9T@Next", "?", {"process":lpChangeLayout, "using":{"l_select":"4"}, "size":[1,15]});
}
else{
box([3,2], [9,105], "Step 4 - Extra Description");
textbox([4,4], [9,76], {"name":"iw31_text"});
pushbutton([10,70], "@9S@Previous", "?", {"process":lpChangeLayout, "using":{"l_select":"3"}, "size":[1,15]});
pushbutton([10,90], "@2L@Save", "?", {"process":lpSaveOrder, "size":[1,15]});
}
Step 5: Create function for resetting variables
//Function to reset all variables to default value
function lpReset(){
var empty_string = ""; //Declare an empty string
lp_btn_icon_step1 = ""; //Reset all button icon to empty
lp_btn_icon_step2 = "";
lp_btn_icon_step3 = "";
lp_btn_icon_step4 = "";
lp_btn_height_step1 = 1; //Reset all button height to 1
lp_btn_height_step2 = 1;
lp_btn_height_step3 = 1;
lp_btn_height_step4 = 1;
lp_layout = 1; //Set initial layout as 1
lp_btn_icon_step1 = "@AF@"; //Set button 1 icon as selected
lp_btn_height_step1 = 2; //Set button 1 height as 2
copytext({"fromstring":"empty_string", "totext":"iw31_text"}); //Reset textbox
}
Step 6: Create function for changing layout
//Function to change value for layout and variables to corresponding selection
function lpChangeLayout(param){
var cur_selection = param.l_select; //Copy passed parameter
set("V[lp_btn_icon_step*]", ""); //Reset all button icon
lp_btn_height_step1 = 1; //Reset all button height
lp_btn_height_step2 = 1;
lp_btn_height_step3 = 1;
lp_btn_height_step4 = 1;
lp_layout = cur_selection; //Set layout
set("V[lp_btn_icon_step&V[cur_selection]]","@AF@"); //Set button icon
set("V[lp_btn_height_step&V[cur_selection]]",2); //Set button height
}
Step 7: Create save function to save all data
//Function to save the detail and reset all variables
function lpSaveOrder(){
//Add save function at here
lpReset(); //Reset all variables after save
message("S:Order is created"); //Display custom success message
}
See attachments for code samples
