Liquid UI - WS Reference Library

Toggle Layout using a Pushbutton


Prerequisites


Runs On

  SAP GUI Android iOS WM Web
Direct Connect          
Liquid UI Server Connect

 

Purpose

This example uses a pushbutton to toggle the layout of a screen. Either the Liquid UI modifications will show or the regular SAP layout will show.

 

User Interface

Navigate to VA02 and enter in an order number and hit Enter.


By default, the Liquid UI modification will display to user.


If the user pushes the “Switch to SAP” button, the regular SAP layout will display.

In the SAP layout, press "Switch to LiquidUI" to switch to the Liquid UI layout.

Liquid UI Script

 //SAPMV45A.E4001.sjs

// z_liquidui will be the flag to determine if the layout should display or not
// if the user is entering the screen for the first time, they should see the LiquidUI layout
if(z_liquidui == void 0){
    z_liquidui = true;
}
// if the flag is true, display LiquidUI layout
if(z_liquidui && _transaction == "VA02"){
    pushbutton([TOOLBAR],"@BG@Switch  To SAP","?",{"process":toggleLiquidUI});    
    image("P[Sales]+[3,85]","logo.png");    
    // delete unwanted buttons
    del("P[Display document flow]");
    del("P[Status overview]");
    del("P[Propose items]");
    del("P[Display sales summary]");
    del("P[Display sold-to party]");
    del("P[Dangerous goods check]");
    del("P[Header output preview]");
    del("P[Reject document]");
    del("P[List of sales orders]");
        // delete unwanted tabs
    del("P[Item detail]");
    del("P[Item overview]");
    del("P[Ordering party]");
    del("P[Procurement]");
    del("P[Shipping]");
    del("P[Reason for rejection]");
}
// else the regular SAP Layout should do
else if(!z_liquidui && _transaction == "VA02"){
    pushbutton([TOOLBAR],"@BF@Switch  To LiquidUI","?",{"process":toggleLiquidUI});
}
// Function to toggle the flag
function toggleLiquidUI(){
    onscreen 'SAPMV45A.4001'
        z_liquidui = !z_liquidui;
        enter("?");
}