4.14 Arrow Function in WS

Now, Liquid UI supports the Arrow Functions, which was introduced in ECMAScript 6. It provides an alternative way to create functions. Using arrow functions, you can minimize the code with shorter function syntax. In this function, you can make the parentheses optional in case of using only one expression.

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

Arrow Function also returns an object. Here, the body of the function encloses with parentheses to distinguish between a block and an object.

//Create this file inside your script folder for adding functionality to the SAP Easy Access Screen: SAPLSMTR_NAVIGATION.E0100.sjs

del("X[IMAGE_CONTAINER]");
inputfield([1,0],{"name":"z_username", "size":21, "nolabel":true});
Displayuser=param=> "S: "+"Welcome"+param.user;
pushbutton([1,23], "@0V@Submit   ",{"process":Displayuser, "using":{"user":z_username}});

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 this file inside your script folder for adding functionality to the SAP Easy Access Screen: SAPLSMTR_NAVIGATION.E0100.sjs

del("X[IMAGE_CONTAINER]");
Samplefunc=()=>this;
//On the SAP Easy Access screen, click on "Test this keyword" pushbutton. This will display "[Object global]" on the Status Bar.
pushbutton([1,1],"Test this keyword",{"process":Samplefunc});