Liquid UI - WS Reference Library

Dynamic Layout Changing


Purpose

To dynamically change layout with different steps in a process, which to provide a 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.

User Interface

Step 1


Step 2


Step 3


Step 4


After Save


Liquid UI Script

//SAPLSMTR_NAVIGATION.E0100.sjs

// Author: Synactive, Inc. [1065 E. Hillsdale Blvd, Foster City, CA, 94404, USA]
// Email: support@guixt.com; sales@guixt.com;
// Contact: 650.341.3310
// Version: 1.0.0.0
//User Interface
clearscreen();                //Remove all SAP elements on screen

if(! lp_layout){            //Default all variables if layout value is not set
    lpReset();                //Default all variables
}

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]});

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]});
}


//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
}


//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
}


//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
}