Liquid UI - Documentation - 23.06 Automatic display of values in the fields

23.06 Automatic display of values in the fields


Prerequisites

Purpose

This article guides you on how to display values in the input fields automatically from a message. Here, we are considering the SAP Easy Access screen to demonstrate the process and walk you through the following steps:

  1. Delete the image container on the SAP Easy Access screen
  2. Add two input fields to display the values
  3. Add a push button to execute the process
  4. Add a function to retrieve values from a message

User Interface

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

Customization

  1. Delete the image container on the SAP Easy Access screen using the del command.
     
    // Deletes the image container on the SAP screen
    del('X[IMAGE_CONTAINER]');    
    
     
     
  2. Add two non-editable input fields labeled Order Number and Deliv. Number to display the values.
     
    //Creates input fields to display the values
    inputfield([1,1],"Order Number", [1,15], {"name":"z_num0", "size":"15", "readonly":true});
    inputfield([2,1],"Deliv. Number", [2,15], {"name":"z_num1", "size":"15", "readonly":true});
    
     
     
  3. Add a toolbar push button labeled Execute to execute the testFunction process on click.
     
    //Creates a toolbar push button labeled Execute
    pushbutton([TOOLBAR],'Execute','?',{'process':testFunction});    
    
     
     
  4. Add the testFunction function to retrieve the values from the message and display them in input fields.
     
    //Function to retrieve and display values from the message
    function testFunction(){    
        myarr = [];
        mymsg = 'The order 123021213 is saved and 542321 updated';    // Sample message
        var res = mymsg.match(/[-+]?[0-9]*\.?[0-9]+/g);
        myarr = res.toString().split(',');    // Store the numbers in an array
        
        for(var idx=0;idx<myarr.length;idx++){
            set('V[z_num&V[idx]]',myarr[idx]);
        }    
    }
    
     

SAP Process

  1. Refresh the SAP screen and click the Execute toolbar push button. You will observe the values from the message are displayed in the Order Number and Delv. Number input fields, as shown below.
     
     


Next Steps

Translate text to another language
Learn how to translate the text entered in the input field using wscurl.

10 min.

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


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