4.14 Arrow Function in WS

Liquid UI now supports the Arrow Functions, a feature introduced by ECMAScript 6. Arrow functions provide a more concise and streamlined way to define functions, offering shorter syntax and reducing the need for the traditional function keyword and parentheses in certain cases.

Pre-requisites:

• Liquid UI WS
• Liquid UI Server v3.5.600.0 and above
• Webscript.dll v1.1.196.0 and above

Syntax:

var z_input= function(x, y){
  return x * y;
}

var z_input= (x, y) => { return x * y };

// In case of only one expression, parentheses are optional 
var z_input= (x, y) =>   x * y;

Arrow Function with Parameter

The Arrow Function also returns an object. Here, the body of the function is enclosed with parentheses to distinguish between a block and an object. The following actions help visualize how to use the arrow function directly in the SAP interface.

1. Delete the image container from the SAP Easy Access screen.
2. Add an input field to enter the username.
3. Add a pushbutton to execute the process.
4. Add a function to generate a welcome message.

//Create the SAPLSMTR_NAVIGATION.E0100.sjs file inside your scripts folder for customizing the SAP screen.//Now, 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 del().
   
    

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

    
   
    
2. Add an input field to enter the username.
   
    

   //Creates an input field to enter the username
   inputfield([1,0],{"name":"z_username", "size":21, "nolabel":true});
   z_date = Date();
   

    
   
    
3. Add a push button labeled @0V@Submit to execute the Displayuser process.
   
    

   //Creates a pushbutton to execute the process
   pushbutton([1,23], "@0V@Submit   ",{"process":Displayuser, "using":{"user":z_username}});
   

    
   
    
4. Add Displayuser function to generate a welcome message by using a user value passed in the param object.
   
    

   //Function to generate a welcome message
   Displayuser=param=> "S: "+"Welcome"+param.user;
   

SAP Process

1. Refresh the SAP screen, enter text in the input field, and click Submit. Then, a message will appear at the bottom of the SAP screen, as shown in the image below.
   
    
   
    

Arrow function with 'this' functionality

In Arrow Functions, handling this is also different when compared to regular functions. In regular functions, this keyword represents the object that calls the function, which could be either a window, a document, a button, or whatever. Whereas in arrow functions, this keyword always represents the object that defines the arrow function.

//Create the SAPLSMTR_NAVIGATION.E0100.sjs file inside your scripts folder for customizing the SAP screen.//Now, 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 del()
   
    

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

    
   
    
2. Add a push button labeled Test regular function this Keyword to execute the Samplefunc process.
   
    

   pushbutton([3,1],""Test regular function this keyword"",{"process":thiskeyword});