My first script in SAP Screen Personas 3.0 – a JavaScript primer

As part of the product team, I shared the excitement of the developers around a new, more powerful scripting engine in SAP Screen Personas 3.0 that is based on JavaScript. Like many of you who have no experience with JavaScript, I was a bit intimidated, especially by the { and } symbols, which look like serious programming. I’m pleased to report that I wrote my first (and second) script in SAP Screen Personas 3.0 – and it was much easier than I thought.

For basic scripts, I see customers doing two main things:

1. jumping to a different transaction and bringing the values back to the original screen
2. copying information from one screen and pasting it on another

The only JavaScript you need for these steps is:

• Defining variables using the statement: “var yourvariablename = “; then removing the stored value from the end of the line.
• Removing the hardcoded values captured during the screen recording process and replacing them with your variable names.

Using JavaScript in SAP Screen Personas 3.0 does not need to be intimidating.

If you want to know how to apply this in your scripts, keep reading. In this post, I will share with you the basic steps and JavaScript syntax you will need to move information between screens.

I built my script on the SMEN transaction, connecting it to SU01 for user information. I removed the user area and added several custom fields. Here is what it looks like.

Script Example #1 jumping to a different transaction and bringing the values back to the original screen

Each script button contains a single script. First, let’s examine the “Lookup” button. I type my user name “peter” into the text box, click the “Lookup” button, and my full name appears in the space that formerly contained firstname and lastname.

Here is the script.

Full text of the script copied from the script window for readability (includes my comments).

// copy name from text box; assign to variable “uname”

var uname = session.findById(“wnd[0]/usr/txtPersonas_3”).text;

// enter SU01 into OKcode field, type enter, paste name on SU01, click lookup button

1. session.findById(“wnd[0]/tbar[0]/okcd”).text = “su01”;
2. session.findById(“wnd[0]”).sendVKey(0);// {“eventName”:”Change”,”tcode”:”SU01″,”screen”:”1050″,”controlCustomData”:{“SID”:”wnd[0]/usr/ctxtSUID_ST_BNAME-BNAME”,”Type”:”GuiTextField”,”focusable”:”X”},”eventParas”:{“Id”:”__AGIM0:U:::0:11″,”Value”:”PETERPETER”}}
3. session.findById(“wnd[0]/usr/ctxtSUID_ST_BNAME-BNAME”).text = uname;
4. session.findById(“wnd[0]/tbar[1]/btn[7]”).press();

// define variables for first name and last name

var fname = session.findById(“wnd[0]/usr/tabsTABSTRIP1/tabpADDR/ssubMAINAREA:SAPLSUID_MAINTENANCE:1900/txtSUID_ST_NODE_PERSON_NAME-NAME_FIRST”).text;

var lname = session.findById(“wnd[0]/usr/tabsTABSTRIP1/tabpADDR/ssubMAINAREA:SAPLSUID_MAINTENANCE:1900/txtSUID_ST_NODE_PERSON_NAME-NAME_LAST”).text;

// return to SMEN transaction

1. session.findById(“wnd[0]/tbar[0]/okcd”).text = “/n”;

// {“eventName”:”Enter”,”tcode”:”SU01″,”screen”:”1100″,”controlCustomData”:{“SID”:”wnd[0]/tbar[0]/okcd”,”Type”:”GuiTextField”},”eventParas”:{“Id”:”ToolbarOkCode”}}

1. session.findById(“wnd[0]”).sendVKey(0);
2. session.findById(“wnd[0]/usr/lblPersonas_5”).text = fname;
3. session.findById(“wnd[0]/usr/lblPersonas_6”).text = lname;

Most of this JavaScript code (not the comments) was auto generated by SAP Screen Personas.

Here is what I did:

1. Record my keystrokes performing the transaction to the point of getting to SU01. Stop recording.
2. Click on the Inspector (right side of scripting window) and select desired field. First one was the first name field.
3. Scroll down to the text and click it to add this content to the script (which is no longer recording, but you can manually add steps).

Do the same for the last name field (not pictured).

JavaScript that you need to learn:

Define a variable for each of these values to replace the fixed text.

Simply add “Var yourvariablename = “ to the beginning of the line (blue text).

Remove the stored value from the end of the line (red text).

Start:

1. session.findById(“wnd[0]/usr/tabsTABSTRIP1/tabpADDR/ssubMAINAREA:SAPLSUID_MAINTENANCE:1900/txtSUID_ST_NODE_PERSON_NAME-NAME_LAST”).text = “STEINHAUERS”;

End:

var lname = session.findById(“wnd[0]/usr/tabsTABSTRIP1/tabpADDR/ssubMAINAREA:SAPLSUID_MAINTENANCE:1900/txtSUID_ST_NODE_PERSON_NAME-NAME_LAST”).text;

Then, continue recording and return to your SMEN transaction.

Pause recording and use the Inspector to add the custom text fields that will receive your pasted values to your script.

JavaScript #2 that you need to learn:

Replace the fixed text value with your variable name.

Start:

1. session.findById(“wnd[0]/usr/lblPersonas_6”).text = “lastname”;

End:

1. session.findById(“wnd[0]/usr/lblPersonas_6”).text = lname;

You have replaced the initial value in the text field (red text) with the variable name (blue text). Please note that the quotation marks around the original text are gone when you replace it with the variable name.

That’s it for the first scripting example. Two easy changes to the text. And, no messy curly braces {}.

Script Example #2 copying information from one screen and pasting it on another

This script takes the name from the custom input field and then goes directly to the information tabs in SU01, bypassing the initial screen in which you generally enter the user name and click the glasses to look up information (thereby saving keystrokes).

Start:

End:

We skip over this screen entirely (streamlining the process for users):

The JavaScript is even simpler than the other example and introduces no new syntax.

1. Record your keystrokes.
2. Copy the user name from the screen: use inspector to select text, then create variable as described above.
3. Replace user name with variable name.

Here is the text of the script:

// copy user name from screen

var user = session.findById(“wnd[0]/usr/txtPersonas_3”).text;

// enter SU01 into OKcode field

1. session.findById(“wnd[0]/tbar[0]/okcd”).text = “su01”;

// press enter

1. session.findById(“wnd[0]”).sendVKey(0);// {“eventName”:”ListAccess”,”tcode”:”SU01″,”screen”:”1050″,”controlCustomData”:{“SID”:”wnd[0]/usr/ctxtSUID_ST_BNAME-BNAME”,”Type”:”GuiTextField”,”focusable”:”X”},”eventParas”:{“Id”:”__AGIM0:U:::0:11″,”ItemListBoxId”:”SUGGEST_TALB”,”FilterValue”:”s”}}

// “paste” user name captured from original screen

1. session.findById(“wnd[0]/usr/ctxtSUID_ST_BNAME-BNAME”).text = user;

// press “glasses” button to lookup user

1. session.findById(“wnd[0]/tbar[1]/btn[7]”).press();

So, the essential JavaScript code you need to know for both of these use cases is:

“var yourvariablename = “

Also removing hardcoded values and replacing them with your variable names.

In a future post, I’ll explore the IF statement and how to use it.

For the SAP Screen Personas product team, Peter Spielvogel.