Liquid UI - Documentation - 5.08 pushbutton()

5.08 pushbutton()

Purpose

The pushbutton() is used to create interactive buttons on SAP GUI screens. These buttons can trigger SAP transactions, custom functions, pass variables to processes, enable scan functionality, and modify screen navigation, significantly enhancing the user experience by streamlining SAP navigation and tasks. This functionality enables user interactions and automations, streamlining common SAP tasks.

 

Note: You can specify the position of the push button in different ways. Click here for details about positioning the screen elements.

 

Syntax

You can define push buttons using different syntax and formats based on use cases.

Format 1: Basic push button placement

 
// Creates a push button with a label name at specified row and column coordinates
pushbutton([row,col],"label name",{"options":values});
 

Format 2: Push button with Function/Transaction code

 
// Executes a transaction or function upon click
pushbutton([row,col],"label name","/n[tcode]",{"options":values});
pushbutton([row,col],"label name","fcode",{"options":values});
pushbutton([row,col],"label name","fkey",{"options":values});
pushbutton([row,col],"label name","fcode","fkey",{"options":values});
 

Format 3: Push button with Scan functionality

Adds a push button that will add scan functionality for the designated field.

 
// Adds scan functionality to the designated field
pushbutton([row,col],"label name","/_gala_scan,?,z_scan_inputfield",{"options":values});
 

Format 4: Push button with icon, label name, and quick info text

This format adds an icon, label, and tooltip to the push button to display quick info text. Here, ID refers to the SAP icon ID.

 
// Creates a push button with icon and tooltip to display quick info text
pushbutton([row,col],"@ID\\Qtooltip@labelname",{"options":values});
 

Format 5: Toolbar push button

Adds a push button on the toolbar with the label name

 
// Creates a push button on toolbar with label name
pushbutton([TOOLBAR],"label name",{"options":values});
 

Properties

  • startrow, startcol - Co-ordinates for placement
  • label name - Visible name of the push button
  • @iconID@label name - Name of the field with icon
  • @iconID\\Qlabel Tip@Label name - Name of the field with tooltip and icon
  • /n[tcode] - Triggers a transaction
  • fcode - Triggers function code
  • fkey - Triggers function key
  • /_gala_scan,?,variable - Enables scan functionality on a field
  • screen element - Specifies screen element
 

Note: Location in pushbutton() refers to the position where the button appears on the SAP screen. This can be defined using specific coordinates (e.g., [row, column]) or by using predefined areas such as the TOOLBAR or the Status Bar.

 

Available Options

You can use the following options with the push button:

"disabled":".."

Disables pushbutton on the screen.

"eventid":".."

"eventid": value - Assigns a value to the push button. You can retrieve this value using _eventid system variable.

"fcode/tcode":".."

Triggers functions or transactions when clicked.

"process":".."

Executes the process.

"size":".."

"size":[rows,cols] - Sets the size of the push button in rows and columns.

"separator":".."

"separator":true - Used in conjunction with the toolbar option. Adds a small vertical line that separates the push button created from the existing ones on the toolbar.

"TOOLBAR":".."

Places the push button on the SAP screen toolbar.

"using":".."

Passes values to processes.
"using":{"param1":"value","param2":"value"…}

Options Detail

disabled
  1. Disables the push button on the SAP screen.
     
    // Disables the push button on the screen
pushbutton([8,12], "@0Y@Create Quotation", "/nva21", {"size":[2,26],"disabled":true,"process":va0xCreateOrderOrQuote});
     
    Disables push button on SAP screen
     
  2. As per the code, the push button gets disabled i.e., you cannot trigger any process on click.

eventid
  1. Assigns a value to the push button. When clicked, this eventid can be retrieved using the system variable. event value to the push button.
     
    pushbutton([2,4],"Get Order Details",{"eventid":"order"});
pushbutton([2,29],"Get Material Details",{"eventid":"material"});
     
    Assigns event value to push button, retrievable via system variable on click
     
  2. As per the code, when Get Material Details is clicked, it triggers a popup with text.

Click here for details about how to display event performed using the eventid option of the push button.

fcode/tcode
  1. Executes function code (user-defined functions/pre-defined functions) or transaction codes.
     
    // Executes function on click
pushbutton([0,0],"ME56 - Read List Data","/nME56",{"process":readListData});
     
    Executes functions or transaction codes when triggered
     
  2. As per the code, when the user clicks on the Read List Data push button, all the material data is displayed in the input fields.

process
  1. This option executes a function.
     
    // Executes process on click
pushbutton([7,7],"@01@Read Data","?",{"process":validateRequiredData});
     
    Executes a function when the option is clicked
     
  2. As per the code, the process will be executed upon clicking the push button.

size
  1. Sets the size of the push button.
     
    // Sets the size of push button
pushbutton([1,1],"@2V@Sales Orders",'/nsession_manager/d1='+dirSalesOrders,{"size":[2,20]});
     
    Sets size of push button
     
  2. As per the code, the size of the pushbutton holds 2 rows and 20 columns, positioned at [1,1].

TOOLBAR
  1. This option will place a pushbutton on the toolbar on a given SAP screen. The size is not required for a pushbutton on the toolbar.
     
    // Sets the size of push button
pushbutton([TOOLBAR],'Create Work Order (IW31)','/OIW31 AUFPAR-PM_AUFART=PM02; CAUFVD-IWERK=1000',"/nmm01");
     
    places push button on the toolbar
     
  2. As per the code, clicking the push button navigates you to the specified transaction.

using
  1. To pass values to processes, using push buttons.
     
    pushbutton([4,3],"Pad Value","/nva01",{"process":padValueWithChar, "using":{"mychar":"0"}}});
     
    places push button on the toolbar
     
  2. As per the code, the using option passes values to the processes through the push button.
  3. By using the option, you can also pass multiple parameters at a time.
     
    pushbutton([3,0],"Pad Value","/nva01",{"process":padValueWithChar, "using":{label1':z_guixt_var1,'label2':z_guixt_var2}}});
     

Example

The following example demonstrates, how the push button() is used to navigate to desired transaction screens.

//Create the SAPLSMTR_NAVIGATION.E0100.sjs file inside your script folder for customizing the SAP Easy Access screen
//Now, add the Liquid UI script to the above file, and save it.

  1. Add three push buttons with labels Create Sales Order, Create New Material, and Std. Sales Order to navigate to the desired transactions.
     
    // Creates three push buttons to navigate to the transactions
pushbutton([4,6],"Create Sales Order","/nva01");
pushbutton([4,28],"Create New Material","/nmm01");
pushbutton([8,15],"@4D\\QCreate a Std. Sales Order@Std. Sales Order",{"process":va01_process,"size":[2,24],"using":{"z_va01_ordertype":"OR"}});
     

    Click here for details on how to create a push button with multiple options.

  2. Refresh the SAP screen, and then you can see the required push buttons, as shown in the image below.
     
    Created push buttons to navigate to the desired transactions
     

Execute transaction with Ok code:

You can bypass the initial transaction screen and go directly to pre-filled SAP transactions by executing the transaction with OK code. This is especially useful when automating repetitive tasks or simplifying navigation for end users. Also, you can incorporate the push buttons in the standard toolbar, and a function key will be assigned automatically.

Executes in the same session:

This will start the transaction and fill in values within the current session.

//Create the SAPLSMTR_NAVIGATION.E0100.sjs file inside your script folder for customizing the SAP Easy Access screen
//Now, add the Liquid UI script to the above file, and save it.

  1. Remove the image container from the SAP Easy Access screen with the del() function.
     
    // Deletes the image container on the SAP screen
del("X[IMAGE_CONTAINER]");
     
    Removes image container from SAP screen
     
  2. Add a push button labeled Create Work Order (IW31) to prefill the defined values in the same session.
     
    // Creates a push button to prefill values in the same session
pushbutton([TOOLBAR],"Create Work Order (IW31)","/nIW31 AUFPAR-PM_AUFART=PM02);
     
    adds push button on the toolbar
     
  3. After refreshing the SAP screen, click Create Work Order (IW31) screen. You will be navigated to the Create Order: Initial Screen within the current session, where the Order Type input field will be pre-filled with the value PM02, as shown in the image below.
     
    Create Work Order button opens IW31 screen with Order Type pre-filled as PM02
     
Executes in a new session:

This will start the transaction and fill in values within the current session.

 
  1. Add a push button labeled Create Work Order (IW31) to prefill the defined values in a new session.
     
    // Creates a push button to prefill values in the same session
pushbutton([TOOLBAR],"Create Work Order (IW31)","/oIW31 AUFPAR-PM_AUFART=PM02);
     
    adds push button on the toolbar
     
  2. After refreshing the SAP screen, click Create Work Order (IW31) screen. You will be navigated to the Create Order: Initial Screen in the new session, where the Order Type input field will be pre-filled with the value PM02, as shown in the image below.
     
    Create Work Order button opens IW31 screen with Order Type pre-filled as PM02
     

Tips and Tricks

  • Delete push buttons
     
    // Deletes push button using the del command
del("PM[pushbutton_name]");
     
  • Add a tooltip
     
    // Adds a tooltip to an existing push button using tip command
tip("P[pushbutton_name]","Tip goes here");
     
  • You can use a combination of function keys with the Ctrl and Shift keys or use numbers between 13 and 48.
    Shift = +12
    Ctrl = +24
     
    Shift+F1 /13 Ctrl+F1 /25 Shift+Ctrl+F1 /37
    Shift+F2 /14 Ctrl+F2 /26 Shift+Ctrl+F2 /38
    Shift+F3 /15 Ctrl+F3 /27 Shift+Ctrl+F3 /39
    Shift+F4 /16 Ctrl+F4 /28 Shift+Ctrl+F4 /40
    Shift+F5 /17 Ctrl+F5 /29 Shift+Ctrl+F5 /41
    Shift+F6 /18 Ctrl+F6 /30 Shift+Ctrl+F6 /42
    Shift+F7 /19 Ctrl+F7 /31 Shift+Ctrl+F7 /43
    Shift+F8 /20 Ctrl+F8 /32 Shift+Ctrl+F8 /44
    Shift+F9 /21 Ctrl+F9 /33 Shift+Ctrl+F9 /45
    Shift+F10 /22 Ctrlt+F10 /34 Shift+Ctrl+F10 /46
    Shift+F11 /23 Ctrlt+F11 /35 Shift+Ctrl+F11 /47
    Shift+F12 /24 Ctrlt+F12 /36 Shift+Ctrl+F12 /48

Usage Details

Can't find the answers you're looking for?




Leave Feedback

Have a Question?

Ask the Community