Skip to Content
Technical Articles

SAP Screen Personas Global JavaScript Library for Similar Transactions

Many SAP transactions have similar counterparts for create, change and display.  This blog will explain how to copy a flavor to another transaction and how to use a global JavaScript library created for a specific transaction (e.g. create) on the other two counterparts (e.g. change and display).  An example will show how this was implemented for PM notification transactions IW21 (create notification), IW22 (change notification) and IW23 (display notification).

The advantage to copying a flavor to the counterpart transactions is that all the object IDs will be identical which allows the JavaScript functions referencing those object IDs to be called in all three transactions.  The disadvantage to this approach is that objects cannot be easily added to the flavors later.  If a new script button, for example, were to be added to each of the three flavors separately, each script button would have its own unique object ID.  To keep the object IDs consistent in this example, the script button would need to be added to the first flavor and then have that flavor copied to the other transactions.

Step 1:  Create Initial Flavor

Create the first flavor and do not create the others until the initial flavor is finished, the other flavors will be created in the final step.  Ensure the first flavor has all the items needed, as you will not be able to add objects easily after the flavor is copied for the other transactions.

The create notification (IW21) transaction flavor was created first:

IW21%20Flavor

IW21 Flavor

 

Step 2:  Create JavaScript Library

This flavor required many JavaScript functions to streamline the notification creation/review process.  Some examples are:

  • Populating the highest-level Functional Location based on the Location radio button selected
  • Populating the Planner Group based on the Location radio button selected
  • Populating the Work Center based on the Assign To radio button selected
  • Populating the Priority based on the Priority radio button selected

The JavaScript functions used the radio button object IDs to determine the value desired.  The example below shows how the selection of the radio button determined the Functional Location used on the notification.

The getFunctionalLocaiton function was defined in the JavaScript library:

getFunctionalLocation: function() {

// Determine which Location radio button is selected and return the appropriate Function Location.                                               

  if (session.findById("wnd[0]/usr/radPersonas_153547353445478").selected) {
    return "DEC";
  } else if (session.findById("wnd[0]/usr/radPersonas_153547360672693").selected) {
    return "JST";
  } else if (session.findById("wnd[0]/usr/radPersonas_153547361634012").selected) {
    return "ROK";
  } else if (session.findById("wnd[0]/usr/radPersonas_153547362695821").selected) {
    return "TBGS";
  } else {
    return null;
  }
},

 

Another function, setFunctionalLocation, populates the Functional Location in the notification based on what was returned from the getFunctionalLocation function:

setFunctionalLocation: function() {

// Set the Functional Location based on the Location radio button selection.
                                                                     
  session.findById("wnd[0]/usr/tabsTAB_GROUP_10/tabp10\\TAB01/ssubSUB_GROUP_10:SAPLIQS0:7235/subCUSTOM_SCREEN:SAPLIQS0:7212/subSUBSCREEN_1:SAPLIQS0:7322/subOBJEKT:SAPLIWO1:0100/ctxtRIWO1-TPLNR").text = window.IW2x_PM_Library.getFunctionalLocation();

},

 

A ChangeLocation script in the flavor calls the setFunctionalLocation function when executed:

window.IW2x_PM_Library.setFunctionalLocation();

 

The ChangeLocation script is attached to the onSelect event of each of the Location radio buttons:

Radio%20Button%20onSelect%20Event

Radio Button onSelect Event

 

The JavaScript library is added as a resource in the Personas Administration transaction (/PERSONAS/ADMIN):

Create%20Resource

Create Resource

 

The JavaScript library will be assigned a Resource ID:

Resource%20ID

Resource ID

 

Step 3:  Attach JavaScript Library to Window Object

The JavaScript library can now be attached to the Window object of the browser using the code below:

window.yourLibraryNameHere = session.utils.include(“RESOURCEID”, true);

 

The code used in this example is:

window.IW2x_PM_Library = session.utils.include("005056AA6EB21ED8AADCCCC077BE80C8", true);

 

This code was executed inside the InitializeScreen script of the SMEN transaction.  This was done because SMEN was always accessed first by the user prior to navigating to any of the notification transactions.  Once the library is attached to the Window object, it will remain attached for the duration of the session so there is no need to do it on each flavor.  Your application may be different, you can attach the library on any flavor necessary.

 

Step 4:  Use Functions from JavaScript Library

The functions in the JavaScript library are now available to be used in Personas scripts.  They can be accessed using the following code:

window.LibraryName.functionName();

 

To call the setFunctionalLocation function, for example, we would use:

window.IW2x_PM_Library.setFunctionalLocation();

 

Step 5:  Copy Flavor to Another Transaction

The final step is to copy the initial flavor to its similar counterparts.  In this example, we copied the IW21 flavor to create flavors for IW22 and IW23.

To copy the flavor to another transaction, open the flavor in the Personas Administration transaction (/PERSONAS/ADMIN) and select Copy to Application ID from the Flavors menu:

Copy%20to%20Application%20ID

Copy to Application ID

 

This will create a new flavor for the transaction entered which will have the same object IDs as the flavor that was copied, such that the JavaScript functions created referencing those object IDs will work for both flavors.

1 Comment
You must be Logged on to comment or reply to a post.
  • Very nice blog, thanks for providing this step-by-step guide.

    One comment: while using the JS library as a resource file works, I’d rather suggest using the Global Scripts feature instead, for easier visibility and maintainability. Nevertheless, the described method is fine too, of course.