12.12 Mark SAP entry fields with icons

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: return(), text()

Purpose

To mark SAP entry fields with a small red cross icon and prompt for user input or highlight the fields.

In this scenario, you will learn how to assign a symbol for an SAP input field to show it as a mandatory field. This can be achieved by calling the "cmdMark" function and passing parameters. Follow the steps for customization

1. Add a function to trim blank spaces at the end of the string
2. Add a function to mark entry fields with a small red cross

User Interface

//Create this file inside your script folder for customizing the Create Sales: Initial Screen SAPMV45A.E0101.sjs
//Now, let's start adding the Liquid UI script to the above file and save it.

Customization

1. Add a function to trim blank spaces at the end of the string. 
    

   // Function to trim blank spaces at the end of the string
   String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g,'');}
   
   function getString(strInput) {
      return (typeof(strInput) == 'undefined') ? "" : strInput.toString().trim();
   }
   
   function isBlank(strInput) {
      var strVal = getString(strInput);
      var blank = strVal == "";
      return blank;
   }
   

2. Add a function to mark entry fields with a small red cross
    

   // Function to mark entry fields with a small red cross
   function cmdMark(fldName,nOffset,strIcon) {            
      if(isBlank(nOffset) || nOffset < 2) {
         nOffset = 3;
      }
      if(isBlank(strIcon)) {
         strIcon = '02';
      }
   
      var nRow = <'F['+fldName+']'>.row;
      var nCol = <'F['+fldName+']'>.column;
      text([nRow,nCol-nOffset],'@'+strIcon+'@');
   }
   // Liquid UI Interface
   cmdMark("VBAK-AUART");      // Order Type
   

SAP Process

1. Logon to SAP and navigate to the Create Sales Order: Initial screen (VA01). Here, on the VA01 screen, you can see a small red cross icon displayed in front of the Order input field. This icon indicates that it is a mandatory field to be filled before further process. The input field with the icon is shown in the image below:
    
   
    
    

   

   Note: You can change the symbol as per your requirement by changing the strIcon value.