17.17 Set cursor on the required inputfield

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: inputfield(), pushbutton(), set(), setcursor(), message()

Purpose

Learn how to automatically validate and place the cursor on blank input fields to improve data integrity. We'll guide you through the following steps.

1. Delete unnecessary elements on the screen.
2. Add input fields to enter the values
3. Add a pushbutton to set the cursor
4. Add required functions to validate the input fields
5. Validate the blank input field and set the cursor.

User Interface

//Create this file inside your script folder for customizing the SAP Easy Access screen: SAPLSMTR_NAVIGATION.E0100.sjs

//Now, let's add the Liquid UI script to the above file and save it. 

1. Delete the image container on the SAP Easy Access screen using the del command.
   
    

   //Deletes the image container on the SAP Easy Access screen
   del("X[IMAGE_CONTAINER]");
   

    
   
    
2. Add three input fields with the labels Material, Plant, and Storage Location to enter values.
   
    

   // Creates an input field with a label as Plant with technical name as z_plant and required option 
   inputfield( [2,3], "Plant", [2,15],{"name":"z_plant", "size":4, "required":true});
   // Creates an input field with a label as Material with technical name as z_material and required option. 
   inputfield( [3,3], "Material", [3,15],{"name":"z_material","size":10,"required":true});
   // Creates an input field with a label as Stor Loc with technical name as zstorloc. The required option indicates that entry in the input field is mandatory.
   inputfield( [4,3], "Stor Loc.", [4,15],{ "name":"z_storloc", "size":4, "required":true});
   

    
   
    
3. Add a pushbutton with the label "Set Cursor" which executes the process called setCursor on click.
    

   // Creates a pushbutton to execute setCursor function on click 
   pushbutton([6,10], "Set Cursor", {"process":setCursor});
   

    
   
    
4. Add a function to check the value entered in the input field.
   
    

   //Function to check if the field value is blank or not
   function isBlank(jvar) {
       if (jvar== void 0 || jvar==null || jvar=="") {
          return true;
       } else {
          return false;
       }
   }
   

     
5. Add a function to check the value in the cursorPosition and set the cursor on the blank or next input field.
   
    

   // Function to check if the string value is blank
   if(!isBlank(cursorPosition)) {
      setcursor(cursorPosition);
      cursorPosition = '';
   } else {
      setcursor('V[z_plant]');
   }

    
6. Add a function to check whether the value is entered in the input field, if not display a message to notify the user to enter the values in the respective input field.
   
    

   // Function to check required entry and setcursor on the appropriate field
   function setCursor(){
       if(isBlank(z_plant))
         {
            message('E: Please enter Plant');
            enter('?');
            goto END;
         }
          if(isBlank(z_material)){
            message('E: Please enter Material');
            set('V[cursorPosition]','V[z_material]');
            enter('?');
            goto END;
         }
      
         if(isBlank(z_storloc))
        { 
          message('E: Please enter storage location');      
          set('V[cursorPosition]','V[z_storloc]');
          enter('?');
          goto END;
          }  
         END:;  
   }
   

    

SAP Process

1. Logon to SAP. On the SAP Easy Access, you can see the three input fields and a push button. Now, enter the value in the Plant input field and click on the Set Cursor pushbutton. Then, you will find the cursor navigating to the next blank input field, and return a message indicating "Please enter Material", as shown below.
   
    
   
    

This article is part of the Take-a-deep-dive-into-the-input-field-and-pushbutton tutorial.

Return values from the new session
Learn how to return values from one session to another session.

10 min.

This article is also a part of the Javascript functions tutorial.