Liquid UI - Documentation - 5.07 inputfield()

5.07 inputfield()


Purpose

With the Input Field command, you can create and modify input fields (also called edit fields) on the SAP screen. This is a very useful command and is used on every SAP screen with Liquid UI.

These fields let users type text or numbers, choose from a list, and do more. They allow access to a calendar for dates, barcode scanning, and searching.

You can enhance these fields with different options provided by the input field command. 

 

Note: You can specify the position of an input field in different ways. Learn more about positioning the screen elements.


Syntax

You can create an input field at the desired position with a label and required functionality.

inputfield([startrow,startcol],"Label name",[endrow,endcol],{"name":"value","size":value,"option":value…});


Properties

  • startrow, startcol, endrow, endcol - row and column coordinates
  • Label name - name of the field without icon
  • @0Y@Label name - name of the field with icon
  • @4V\\Qlabel Tip@Label name - name of the field with tooltip and icon


Available Options

You can use the following options with the Input Field command:

"alignright":".."

"alignright":true - Align the user's input to the right edge of the input field.

"date":".."

"date":true - Displays calendar for an input field.

"default":".."

"default":"string" or "default":value - Enables users to add default text to the input field.

"invisible":".."

"invisible":true - Hides the input field value with asterisks.

"leadingspace":".."

"leadingspace":true - Retains any spaces included in the text entered in the input field.

"maxlength":".."

"maxlength":value - Defines the maximum input length for an input field.

"name":".."

"name":"field_variable_name" - Defines the variable name by which the field can be referenced.

"nolabel":".."

"nolabel":true - Hides the label of the field on the screen.

"numerical":".."

"numerical":true - Restricts input type to numbers.

"readonly":".."

"readonly":true - Disables data entry into the input field.

"required":".."

"required":true - Makes the field entry mandatory.

"searchhelp":".."

"searchhelp":"value" - Provides list of available entries for an input field.

"size":".."

"size":value - Specifies the size of textfield of an input field.

"techname":".."

"techname":"value" - Replicates searchhelp functionality.

"uppercase":".."

"uppercase":true - This option shows input from the user in uppercase.

"rf_autotab":".."

"rf_autotab":value - The value indicates the time delay in seconds, which varies according to the entered value.

"rf_barcode":".."

"rf_barcode":true - Enables barcode scan reading within an input field.

"rf_pattern":".."

"rf_pattern":"string" - Validates the pattern with the specified string.

"rf_validate":".."

"rf_validate":"string" - Validates the string together with the pattern matching option.

"rf_page_autosend":".."

"rf_page_autosend":"tcode" - Auto submits the transaction code after the time limit you set in the script.

"Tool tips and icons":".."

Add tips and icons to an input field

"variables":".."

Global variables and screen variables can be used with input fields.


Options Detail

alignright

  1. The alignright option for input fields is used to align the value entered in a field to the right edge of that field.

  2. //Creates Quantity input field with cursor aligned to right edge.
    inputfield([1,0],"Quantity",[1,10],{"name":"z_mb1b_qty","size":5,"alignright":true});
  3. As per the code, the cursor in the input field is right-aligned.

date

  1. This option is used to call a calendar with the F4 key instead of searchhelp.

  2. //Adds calendar to the input field
    inputfield({'field':'G[Processing]','offset':[1,1]},"Date paperwork rec'd",{'field':'G[Processing]','offset':[1,22]},{"name":"z_strdt","SIZE":10,"date":true});
    
  3. The date option enables the calendar when you click the search option on the input field.
     

    Note: The offset parameter is used for relative positioning.

default

  1. The default option for input fields adds user-specified default text.

  2. //Sets default value in input field
    inputfield([1,0],"Quantity",[1,10],{"name":"z_mb1b_qty","size":6,"default":1});
    
  3. As per the code, the input field Quantity is set to 1 by default. The user can edit the field as per their requirement.

invisible

  1. The invisible option for input fields hides the field's output.

  2. //Hides the value entered in input field
    inputfield( [1,0],"CVV",[1,15],{"name":"CVV","size":3,"invisible":true});
    
  3. The data you entered in the input field will be hidden, as we have set invisible to true for CVV in the code.

leadingspace

  1. The leadingspace option retains any spaces that may exist before characters are entered in an input field.

  2. //Retains space between text entered
    inputfield( [4,5],"Company",[4,20],{"name":"inpfld_1","size":10,"leadingspace":true});
    
  3. This option retained the space you entered between Synactive and Inc in the input field, as we have set leadingspace option to true for the company field in the code.

maxlength

  1. The maxlength option for input fields defines the maximum input to be entered in an input field.

  2. //Sets the length of characters entered in input field
    inputfield([1,0],"Material Desc.",[1,15],{"name":"Z_ZMBE_MATDESC","size":32,"maxlength":"40"});
    
  3. As per the code, the Material Desc field would allow up to 40 characters long.

name

  1. The name option for input fields defines the variable name for the input field.

  2. //Assigns variable name for the input fields
    inputfield([1,0],"Serial #",[1,10],{"name":"z_serial","size":30});
    inputfield([2,0],"Phone #",[2,10],{"name":"z_phone","size":12});
    
  3. Name option for the input field assigns a name to the variable. The data read in the input field is stored in that particular variable name.

nolabel

  1. The nolabel option for input fields deletes the onscreen label.

  2. //Deletes onscreen label of input field 
    inputfield([1,0],{"name":"z_row_idx","size":2,"nolabel":true});
    inputfield([1,4],{"name":"z_ib03_itemcat","size":12,"nolabel":true});
    
  3. Use this option to align extra input fields horizontally or when a label isn't required on the screen.

numerical

  1. The numerical option for input fields restricts input to numbers.

  2. //Sets to enter only numeric values
    inputfield([1,0],"Breakdown dur.",[1,15],{"size":10,"name":"z_iw42_breakdowndur","numerical":true});
  3. The numerical option allows inputting numbers and symbols without requiring the SHIFT button while blocking alphabetical characters.

readonly

  1. The invisible option for input fields disables data entry.

  2. //Input fields are set as readonly
    inputfield([1,0],"Material",[1,14],{"name":"g_serviceMaterial","size":25,"readonly":true});
    inputfield([2,0],"Serial Number",[2,14],{"name":"g_serialnumber","size":25,"readonly":true});
    
  3. As per the code, the input field is set as "readonly: true". This prevents the input field from accepting any values when the user attempts to enter data.

required

  1. The required option ensures that input is mandatory in the fields.

  2. //Input field is set as mandatory 
    inputfield([1,0],"Plant",[1,20],{"name":"z_mm01_plant","size":4,"required":true});
    inputfield([2,0],"Stor.Location",[2,20],{"name":"z_mm01_storloc","size":4,"required":true});
    
  3. The required option makes the input field a mandatory field to enter the data.

searchhelp

  1. The searchhelp option for input fields offers a list of available values for a specific input

  2. //Adds searchhelp to the input field 
    inputfield([0,5],"Sales Order",[0,20],{"name":"g_sls_ord_assign","size":10,"searchhelp":"VMVAA"});
    
  3. When you click on searchhelp, a list will pop up with all the available entries for the input field.

size

  1. This option specifies the size of the text field of an input field.

  2. //Sets textfield size of input field 
    inputfield( [4,5],"Company",[4,20],{"name":"inpfld_1","size":15});
    
  3. As per the code, the size of the text field of the Company input field is assigned as 15.

techname

  1. The techname option for input fields replicates searchhelp functionality and is used when searchhelp is not available.

  2. //Adds technical name to input field 
    inputfield([1,49],"Work Completed date",[1,77],{"name":"z_comp_dt","size":10,"techname":"QMEL-QMDAB"});
    
  3. The techname option in the above code acts as a searchhelp.

uppercase

  1. The uppercase option for input fields displays values in uppercase.

  2. //Converts input field entries to uppercase 
    inputfield([1,1],"Full Name",[1,15],{"name":"gx_name","size":40,"required":true,"uppercase":true});
    inputfield([2,1],"Street",[2,15],{"name":"gx_street","size":40,"required":true,"uppercase":true});
    
  3. As per the code, the uppercase option transforms input field entries from lowercase to uppercase.

In addition to the mentioned options, Liquid UI WS offers additional functionalities that can be linked with the Input Field. These capabilities include:

 

Note: Smart attributes work only on mobile devices.

 

Smart Attributes

The smart attributes option for input fields adds functionality to the input field.

rf_autotab

  1. The auto-tab feature specifies the number of seconds before the cursor moves to the next field.

  2. //Sets autotab to input field
    inputfield([1,0],"Default Plant:",[1,15],{"name":"g_default_plant","size":4,"rf_autotab":2});
    
  3.  As per the code, the text input field is defined with autotab functionality. The cursor will automatically switch to the next tab after 2 seconds.

rf_barcode

  1. The rf_barcode option can be applied to any input field, allowing the option to scan a barcode instead of typing a value.

  2. //Adds scanner button to input field 
    inputfield([1,0],"Notification",[1,25],{"size":12,"rf_barcode":true});
    
  3. As per the code, the text input field is defined with barcode functionality, where the input field has a scanner button to scan the barcode.

rf_pattern

The rf_pattern option is used for pattern matching, specifying that the values entered in the field must match a pre-defined pattern.

rf_validate

  1. The rf_validate function serves validation purposes and is used with pattern matching. When validation is active, the input must match the pattern for the process to proceed successfully.

  2. //Adds validate function 
    inputfield([1,0],"Material",[1,10],{"name":"z_mb1b_material","size":18,"rf_validate":"/16","rf_autotab":4});
    

rf_page_autosend

The rf_page_autosend is specially used for autosubmit. This smart attribute contains the SAP transaction code to execute.

Additional Methods

Tool tips and icons

  1. Adds tooltips and icons to an input field.

  2. //Adds tooltip and icon to input field
    inputfield([1,0],"@4V\\QEnter Service Material@:Material",[1,14],{"name":"g_serviceMaterial","size":25});
  3. As per the code, the Material field is displayed with an icon and tooltip Enter Service Material on mouse hover.

Variables

Two types of variables can be used with input fields: global and screen variables. Screen variables are specific to one screen, while global variables work across the SAP script.


Example

The following example demonstrates, how the input field () is used to create material with a price constraint for a given period.

Script

//Creates four input fields
inputfield([19,28],"Condition Type",[19,43],{"name":"z_vk11_conditiontype","size":20});
inputfield([22,29],"Valid to",[22,43],{"name":"z_vk11_validto","size":20});
inputfield([21,29],"Valid from",[21,43],{"name":"z_vk11_validfm","size":20});
inputfield([20,29],"Rate",[20,43],{"name":"z_vk11_rate","size":20}); 

Script Details


Tips and Tricks

  • Adding quickinfo

    A quickinfo can be added to the input field using the input field command by labeling the name with an icon and tip. // SAPLSMTR_NAVIGATION.E0100.sjs

    //Creates input field labeled Reference Number
    inputfield([1,0],"Reference Number",[1,25],{"name":"Z_ZMBE_REFNUM","size":10,"maxlength":"10"});
    //Adds tooltip to the input field 
    inputfield([1,37],"@01\\Qplease use the external document number as the reference number @Reference Number");
    
     
  • Displays InputAssisant

    Additionally, the Liquid UI displays the history for your new input fields. To activate this option, enable the historyononlyguixt = true; in guixt.sjs script file and save it. Enabling this option displays popup history for both the SAP and Liquid UI created controls, as shown below.

     
  • Technical Information

    In standard SAPhelp F1, "Technical Information", you can find the technical field name which is necessary for matchcode functionality.


Usage Details


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