21.03 Restricting user input with radio button

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: box(), radiobutton(), del()

Purpose

When designing an SAP screen, limiting the user's input to a few options can help increase productivity, improve efficiency, and reduce errors. This example shows how the Industry Sector and Material Type input fields are restricted for the transaction MM01.
In this case, the Industry Sector field is limited to predefined values, ensuring that the user only enters valid values. The Material Type field is limited to a list of values relevant to the current transaction, preventing the user from entering irrelevant values.
To demonstrate restricting user input with a radio button, we have taken the MM01 screen as an instance and we will walk you through the following scenarios:

1. Restricting user input in the MM01 screen
2. Restricting user input in the Create Order screen

User Interface

Restricting user input in MM01 screen

//Create the file SAPLMGMM.E0060.sjs inside your script folder for customizing the Create Material (Initial Screen).
//Now, let's add the Liquid UI script to this file and save it.

Customization

1. Log in to SAP and navigate to MM01. In the native SAP, Industry Sector and Material Type have dropdown menus with a variety of options. This new design has the Industry Sector and Material Type dropdown menus removed and replaced with radio buttons.
    
   

    
2. Delete the native SAP input fields from the SAP screen using del().
    

   // Deletes the native SAP input fields
   del("F[Industry sector]");
   del("F[Material Type]");
   

    
   

    
3. Create five radio buttons with labels Beverage, Engineering, Pharmaceuticals, Finished product, and Value-only materials, to restrict user input.
    

   // Creates five radio buttons for the Industry sector and Material Type to restrict user input
   // In the radio button's options, we specify what input field this pertains to
   radiobutton([2,45],"Beverage",{"[Industry sector]":"B"});
   radiobutton([3,45],"Engineering",{"[Industry sector]":"M"});
   radiobutton([4,45],"Pharmaceuticals",{"[Industry sector]":"P"});
   radiobutton([7,45],"Finished product",{"[Material Type]":"FERT"});
   radiobutton([8,45],"Value-only materials",{"[Material Type]":"WERT"}); 
   

    
   

    
4. Create two boxes labeled Industry sector and Material type to help organize screen elements.
    

   //Creates two boxes that help to organize screen elements and enhance the screen layout
   box([1,41],[5,74],"Industry Sector");
   box([6,41],[9,74],"Material Type");
   

    
   

    

Restricting user input in Create Order screen

User Interface

//Create this file inside your script folder: SAPLCOIH.E0100.SJS for customizing Create Order (Initial Screen).
//Now, let’s start adding the Liquid UI script to the above file and save it

Customization

1. Login to SAP and navigate to the IW31 (Create Order: Initial Screen).
    
   

    
2. Delete Order Type to restrict user input while entering the value.
    

   //Deletes the Order Type to restrict user input while entering the value
   del("F[Order Type]",{"value":true});
   

    
   

    
3. Creates two radio buttons with labels PM01, and SP01 to select the Order Type.
    

   //Adds two radio buttons with labels PM01, SP01 and delete the Order Type
   radiobutton("F[Order Type]+[0,19]","PM01");
   radiobutton("F[Order Type]+[0,11]","SP01");
   

    
   

    

SAP Process

1. Refresh the IW31 (Create Order: Initial Screen) screen to see the newly added radio buttons for the Order Type field available for selection, as displayed below.