Useful Javascript Tips for SAP Screen Personas Script Editor

SAP Screen Personas developers frequently use pure Javascript codes in Script Editor for building Screen Personas flavors for a better User Experience (UX). In this tutorial, I want to share some useful Javascript codes and Javascript tips for Script Editors where you can use in your SAP Screen Personas application developments.

Javascript Tips and Tricks for SAP Screen Personas Developer

I want to share some Javascript tips & tricks that I used recently in my SAP Screen Personas flavor developments with Script Editors in this tutorial.

Javascript in SAP Screen Personas

Javascript Number to String Conversion

If you have a numeric variable and want to display and log this value, Javascript developers require to convert numeri value into string. Number to string conversion is possible by using Javascript toString() method.

Set and Get Session Variables

During Screen Personas flavor development Javascript developers might require to store some values as session variables and read those session variables in an other flavor event.
In Script Editor, following PUT and GET methods session.utils can be used for saving values as session variables and retrieving them from session variables.


var myWebSite = "http://www.kodyaz.com";

session.utils.put("webURL", myWebSite);



var referenceURL = session.utils.get("webURL");

Code

Javascript Array Objects

To build an Array in Javascript using Script Editor for your SAP Screen Personas flavor, following sample array construction could be used as a template


var n = 5;

var myArray = new Array(n);

myArray[0] = "First array item";

myArray[1] = "Second item in array";

myArray[2] = "Third array item";

myArray[3] = "Another item in sample array";

myArray[4] = "Last item in sample array";

Code

As seen in above sample Javascript code block, arrays in Javascript are zero-based indexed.
To set a value to an array item, Script Editors can use the index value within square brackets for a direct value assignment.

To get the number of elemens in an array object, script editor can use myArrayName.length() method.

Loop in an Array Object

If you are using Javascript Array objects in your Personas flavor scripts, you might frequently require to loop through the elements of this array object as well. To loop in an array, SAP Screen Personas script editor can use For Loop as follows:


for (i = 0; i < myArray.length; i++) {

 session.utils.log("Array value at " + i.toString() " is: " + myArray[i]);

}

Code

Convert Javascript Array Object into String Variable

I frequently required to convert Javascript array into string variable and store it as a session variable so that I can reach the same array object values in different flavor events.
I also believe just like me other SAP Screen Personas flavor developers will require to implement the same conversion by JSON.stringify() method to convert array to string in Javascript


session.utils.put("MYARRAY", JSON.stringify(myArray));

Code

Convert String back into Array Object in Javascript

As we managed to convert array object into a string variable in previous step, as a second step for such cases it is also a necessity to convert string expression into Array object, back into its previous situation.
SAP Screen Personas Javascript developers can use JSON.parse() method for this task as follows:


var myStr = session.utils.get("MYARRAY");

var myArray = JSON.parse(myStr);

Code

Open a Web Address in Browser using Javascript

Although SAP Screen Personas provides methods to launch web addresses, sometimes I also feel difficulties especially with whitelist URL control. My favorite method as a workaround solution is launching web URLs directly by using Javascript code window.open() method especially for script button controls placed on a Personas flavor.


var url = "http://www.kodyaz.com";

window.open(url, "_blank");

Code

Check if Control with specific Id Exists on Flavor

Sometimes for the sake of writing better coding on Script Editor and prevent Javascript errors due to missing control objects while trying to reach them, I find it useful to use session.idExists() check as best practise for better programming.


var myID = "...";

if(session.idExists(myID)){

 ...

}

Code

Error Handling in Javascript for SAP Screen Personas Editor

One of the most frequently used error handling methods in programming is Try...Catch blocks.
Javascript also provides Try-Catch-Finally code block for developers to enable error handling in Javascript.
Of course, I find it useful to use try...catch...finally Javascript error handling script method for errors that can arise in SAP Screen Personas flavors.


var sourceid;

try {

 sourceid = source.id;

} catch (err) {

 sourceid = "";

}

Code

For example, above try-catch block can be used to get the Object ID of a control in Javascript event, when that control is clicked on the Screen Personas flavor.
I experienced that in some cases, or in some Personas patches the source.id fails to return the Id of the event originating control.
Of course, this is a case which is not expected to happen. But I think it is good to protect your Javascript code against such situations which can cause an error.