openSAP

Using SAP Screen Personas for Advanced

Scenarios
Week 02 Unit 01

00:00:05 Hello and welcome back to Week 2, Unit 1 of our openSAP course "Using SAP Screen
Personas for Advanced Scenarios".
00:00:13 Today, we want to expand on some scripting techniques and how to manage complexity
and flavors. In some transactions, you have collapsible areas.
00:00:21 For example, here in ME23N, you can collapse and expand different sections.
00:00:27 If you want to have a similar effect in your flavor, you can easily build this yourself.
00:00:32 As an example, we will be looking at the SAP Document Management System and build a
flavor for a supplier contract.
00:00:40 In order to build an expand/collapse area, we will be checking on the state of the flavor and
trigger actions accordingly.
00:00:47 To start off, I usually build the flavor in the expanded state. Here, I have pulled data from the
different tabs.
00:00:55 However, for this scenario, we assume that I rarely look at the information below the document
status line, thus I put an expand/collapse button there.
00:01:04 Similar to the section in ME23N, we will be switching the icon according to the state of the
collapsible area.
00:01:12 This will also be our indication of what a click on the button will do – expand or collapse the
area.
00:01:18 Since we have the screen already in its expanded mode right now, it is much easier to start by
writing a script that ensures that the currently visible controls are visible
00:01:28 and sets their location to their current location. Simply select the controls on the screen one by
one
00:01:34 and make sure the show method is called for each of them. Also, if the expandable area is
collapsed or expanded,
00:01:43 the controls below it will have to shift up or down accordingly. Thus, we will have to set their
top position.
00:01:49 The size of the document data box will also need to be adjusted so don't forget to define its
current height in the script explicitly.
00:01:58 After the section is expanded, the icon needs to change to the icon for the collapse action,
00:02:05 which has the icon ID DAARSO. If you execute the script now, nothing will change
00:02:11 since all the controls are already visible on the screen. However, this script should only be
executed if the icon of our expand/collapse button
00:02:21 was an expand icon. The icon ID of that is DAAREX.
00:02:28 Of course, this is only half the scripting we need. There's also a collapse action needed,
00:02:32 which would go into the else block of our conditional statement. As a first step, let's hide all the
elements we ensured were visible before.
00:02:42 Also, the document data box needs to be a bit smaller and the Originals group as well as the
buttons have to shift up
00:02:49 so that the position needs to be adjusted. And finally, the icon ID needs to be adjusted to
ensure the next click will expand the area again.

1
00:02:58 The new icon ID is thus DAAREX. If you assign the script to both the button click as well as the
onLoad,
00:03:07 it will ensure that users start with the collapse area and can expand it as needed.
00:03:14 The transaction CV03N is an interesting transaction since its contents adjust significantly
based on the document type.
00:03:23 As you can see, document type EBE only has two tabs and shows less data than document
type BVV.
00:03:31 Of course, you could leverage the same technique as before to adjust your flavor.
00:03:36 However, in this case, it would be much easier to simply toggle between two flavors in case
the document type does not match the flavor.
00:03:46 It would also make it much easier to maintain two different flavors. To do that, you can adjust
the onLoad script of the flavor
00:03:54 and check for the document type information in the title. JavaScript provides the indexOf
method
00:04:00 and if the correct string can’t be found,
it returns -1. And since that means we’re in the wrong flavor,
00:04:07 we can trigger a flavor switch using session.utils to change flavor, which takes the flavor ID as
an input parameter.
00:04:15 You can find the flavor ID in the short link window in the Flavor Manager. Today, you learned
how to use scripting to manage complexity in your flavor.
00:04:26 In the next unit, you will learn more about events and how they’re triggered. Have a great day
and thank you for taking this openSAP course!
Week 02 Unit 02

00:00:06 Hello and welcome to Unit 2 in Week 2 of our openSAP course "Using SAP Screen Personas
for Advanced Scenarios".
00:00:13 My name is Klaus Keller. In this unit, we'll talk about scripting events and how to use them
efficiently.
00:00:21 First, we are going to have a look at the different kinds and types of events. We clarify what
screen events and what control events are,
00:00:29 and for which events you can suppress the default behavior. Next, we are having a closer look
at the process flow of events,
00:00:37 followed by a demo of how to replace the standard behavior of an event. In scripting, there are
two kinds of events:
00:00:47 screen events and control events. Screen events are available for every screen
00:00:52 and can be used for things like performing initial setup tasks in a script or checking certain
conditions after every system interaction.
00:01:01 Screen events are onAfterRefresh, onBeforeRefresh, onEnter, onLoad,
00:01:08 and onResize. For example, if you want to skip the initial selection screen of a transaction,
00:01:14 you can create a flavor that executes the script onLoad of the initial screen. In that script, you
can fill required values
00:01:23 and perform actions to get to the next screen. Control events are specific to a certain control.
00:01:30 For instance, the button has an onClick event that is fired when a user clicks the button. A
detailed list of all events can be found in the knowledge base article
00:01:41 available through the URL listed on the slide. Further, we can distinguish two types of events:
00:01:48 suppressible and not suppressible. Suppressible means that the standard event processing
can be stopped in SAP Screen Personas script.
00:01:58 Let's have a look at an example. Assuming you want to change the standard behavior of the
Edit button that exists on the screen.
00:02:05 Usually, the Edit button switches the screen to edit mode so you can modify certain values.
Let's further assume in some situations you do not want to switch to the edit mode.
00:02:17 To achieve that, you can register a script for the button's onClick event, check the condition,
and if you do not want the standard action to be performed,
00:02:26 you can return the value "true" in your own script. That prevents the screen from entering edit
mode.
00:02:33 Later in this unit, we have a demo that shows how to suppress standard behavior when it's
compulsory (required). The knowledge base article on events that we referred to
00:02:45 tells you also for which events it is possible to stop standard behavior and for which events this
is not possible.
00:02:53 Now we take a look at the process flow of events. The flow starts with the user starting a
transaction.
00:02:59 The system processes the user request and sends the state data to the client. On the client
side, the onLoad event is fired,
00:03:07 followed by the onAfterRefresh. After this, rendering of the user interface takes place
00:03:13 and the outcome of that is shown to the user. Now the user interacts with a UI.
00:03:20 For instance, she or he clicks a button. The onClick event is fired
00:03:26 and if a script is assigned to that event, it is executed. As discussed before, for some events,
the script can control whether to suppress the standard action or not.
00:03:38 The onClick event is an event that can suppress the default behavior by returning the Boolean
value true. If a script returns true, the standard action is suppressed
00:03:48 and the UI is rolled back and awaits further user actions. If the standard action of the button is
not suppressed,
00:03:55 the event onBeforeRefresh is fired. The script assigned to onBeforeRefresh event
00:04:01 can again decide whether to suppress the standard behavior. If it does so, nothing happens
and the screen is displayed without system interaction.
00:04:11 If the script assigned to onBeforeRefresh does not suppress the standard action, that means it
does not return the Boolean value true,
00:04:19 an action request is sent to the system and processes the action. The result state is then again
sent back to the client.
00:04:27 If during processing of the event, the flavor, or screen, or even the whole transaction is
changed, event onLoad is fired again.
00:04:37 We talked about how to suppress the standard behavior of a button. This becomes crucial if
you trigger navigation to another screen or transaction
00:04:45 in the script that is called as handler of the event. If you would not suppress the default
behavior then,
00:04:51 actions will be executed on the wrong screen and that can cause an error. Let me show you
this in an example.
00:05:01 We assume you want to automate the display of material. So we have a look at the default
process flow of displaying materials in transaction MM03.
00:05:12 In the previous openSAP course, transaction MM03 was used to display material data through
forward navigation
00:05:20 of purchase order display transaction ME23N. Now we launched that transaction directly to
see material details.
00:05:33 In the system, we launched transaction MM03. Here, we enter some materials to display.
00:05:47 And now, we hit the Continue button. After I select the material and click on Continue,
00:05:55 the view selection pop-up appears. I select the first view, Basic Data 1, and continue.
00:06:08 Now the material data is shown. To make it easier understandable later on,
00:06:13 I want to show you what happens if I click Continue again. I can see a pop-up dialog shows up
that tells you the last data screen has been reached.
00:06:30 We just recognize that for now. It will later help us to imagine what happens behind the
scenes.
00:06:39 Now let's assume my task is to skip the view selection dialog and proceed directly to the
material screen after I hit Enter or click Continue.
00:06:48 Hitting the Enter key or pressing the Continue button is technically the same. It triggers an
onEnter event.
00:06:57 Now we go back to the material selection screen. The first thing is to create new flavor.
00:07:06 I'm going to create a flavor and call it "skip view selection". As I want to change the behavior of
the onEnter event,
00:07:22 I navigate to the screen events located on the Insert tab. I name it skipViewSelection and after
that I can save and close the Flavor Editor.
00:07:43 Before I enter the script editor, I would like to check whether the onEnter event can suppress
the default behavior.
00:07:50 I can check this using the knowledge base article we already talked about, or another way is to
check the scripting documentation.
00:07:58 The documentation can be found under Help -> Scripting API. Here, I search for onEnter.
00:08:08 Now, I check the description of the onEnter event and here I can see that returning the
Boolean value true
00:08:14 will stop the default event from being processed. Now I can close the help page and open the
script editor.
00:08:29 In the script editor, I can see the generated script for the onEnter event. As I do not need the
autogenerated part, I can remove it.
00:08:42 Now I can start to record a script. And I do exactly the same steps as I did before.
00:08:52 So I click on Continue. On the view selection screen, I select Basic Data 1.
00:09:01 I click Continue again. Now I can stop my script,
00:09:10 go back to the initial screen, save, and test it. I can see the screen selection pop-up is being
skipped
00:09:19 but the known dialog about the last data screen appears. Let's go back to the initial screen and
check the script.
00:09:31 What happens is the following. If I click Continue, the default action is stored.
00:09:37 And then the script is executed. After the script has run through, the stored default action is
processed,
00:09:43 which is the Continue button click. That leads to the additional pop-up window.
00:09:49 To avoid the standard behavior, I can add "return true" to the end of the script.
00:10:01 Now I save the script and test again. I click the Continue button and the material data is
shown.
00:10:19 As we can see, the default button action is suppressed and no additional pop-up window is
shown.
00:10:25 In our case it was just an additional pop-up that shows up due to the fact that the default
behavior is not being suppressed.
00:10:32 But you can imagine, in other cases performing an action in the wrong screen might lead to
more serious issues.
00:10:40 So whenever a script is assigned to events of elements that already exist on the screen, we
need to check whether the default behavior must be suppressed.
00:10:49 This does not apply for elements we added using the Flavor Editor, like script buttons.
00:10:55 Those elements do not have a default behavior that needs to be suppressed. In this unit, we
learned about the different types and kinds of events in SAP Screen Personas.
00:11:06 Further, we had a look at the process flow and ways to manipulate it. In the next unit, we will
look at incorporating remote function calls into your flavors.
00:11:17 Thank you.
Week 02 Unit 03

00:00:06 Hello and welcome to Week 2, Unit 3 of our openSAP course “Using SAP Screen Personas for
Advanced Scenarios".
00:00:13 My name is Tobias Queck. In this unit. we will talk about remote function calls,
00:00:18 also commonly known as RFCs. As the name indicates, RFCs are function modules
implemented in ABAP that can be executed remotely.
00:00:26 They are very commonly used independent of SAP Screen Personas to enable function calls
between two systems. Moreover, they can be used to execute functions on the same system
00:00:36 but in a different session. Access to RFCs can be configured either in the function module
itself by executing authorization checks,
00:00:44 or in more generic checks on the source or destination system as part of the standard RFC
interface system. In the context of SAP Screen Personas, RFCs can be used in scripts when a
functionality required
00:00:58 that is not available in the screen that a script is accessing. They can be used to retrieve or
modify data from the currently connected system.
00:01:06 In SAP Screen Personas, RFCs are typically used where it is required to retrieve data that is
not available at all on the screen, or if it’s too complicated to fetch it from another transaction.
00:01:17 In addition, it could be used to execute custom function modules that are not part of the
standard SAP functionality. Let me show you how to add an RFC call to a script.
00:01:27 On my screen, you see the transaction SMEN, the SAP Easy Access menu. I’ve applied a
flavor that has an input field for a purchase order number
00:01:35 and two output feeds for a vendor and a document date. Last but not least, here’s a Go button,

00:01:40 which is a script button that currently has an empty script assigned. Let’s open the SAP
Screen Personas scripting editor.
00:01:47 Here’s an empty script I talked about. So let’s remove my comment here.
00:01:51 And now let’s open the RFC tool that allows me to add RFCs to my script. Immediately, you
can see the two RFCs that are available for me,
00:02:00 so the whitelisted RFCs. I can also uncheck the box here to see all available RFCs,
00:02:05 but I cannot really execute them in the script because they are not whitelisted. Let’s just use
the ones that I’m actually allowed to use.
00:02:12 So for today, we would like to get the details for purchase orders, so I select the purchase
order detail RFC.
00:02:18 And now I can see all the RFC parameters that are available. And if you scroll, you see that
the PURCHASEORDER, the mandatory input field, is already selected.
00:02:27 And as result, I would like to get the purchase order header, which contains the two fields that I
would like to show on my screen. So I will also select the purchase order header, or
POHEADER, here.
00:02:38 Now being done, I just click on “Copy RFC template code”. And as you can see, the required
scripting code to execute an RFC and to get the purchase order header back
00:02:47 is added to my screen. Now let’s tie that properly into my screen.
00:02:53 So first of all, we have to read the purchase order number from the screen. So as usual, I use
my script inspector,
00:02:59 select my input field, and for my input field I’m interested in the text property. I assign the text
property to a variable, which I call PO in this case.
00:03:09 And now I go into my generated RFC code, remove this default 00 number,
00:03:15 and just put the variable in here. Now I would execute my RFC,
00:03:19 and once I have the result, I need to write the data back on my screen. So again I use the
inspector,
00:03:24 pick the Vendor output field, use a text field.
00:03:27 And this time, I would like to assign one of the fields that is part of the POHEADER. So I just
press dot here and now I see all the fields in there.
00:03:35 And we set Vendor. So let’s look, there’s a field called VENDOR. And we do the very same for
the second output field, our Document Date.
00:03:44 So again, the text field needs to be assigned. And we use the PO order, the PO header I
mean, of course.
00:03:52 And we search for document date, and here’s DOC_DATE. Finally a semicolon, I can click on
save.
00:04:01 And that’s it already. I created a simple script that calls an RFC. It takes as input a PO
Number, and returns some header data for the screen.
00:04:10 So let’s now enter a valid PO Number. So let’s take this one here and click on Go.
00:04:15 And as you can see, the Vendor ID is added to my screen and also the Document Date. Let’s
try another one just to be sure,
00:04:23 and click on Go again. Here we go.
00:04:26 So we have created a simple script that calls an RFC and returns required data from the
screen. The data that I retrieved in my demo scenario is also available,
00:04:37 for example, in transaction ME23N. However, the use of this RFC is not required
00:04:43 but is an alternative that can improve the performance and maintainability of your scripts.
When thinking about new functionality that is only required in the context of Personas,
00:04:53 you need to evaluate whether it makes sense to implement it in JavaScript as part of a script,
or to implement it as an RFC in ABAP and then execute such an RFC from the script.
00:05:03 There are no strict rules on when to use which approach, but I would suggest asking the
following questions:
00:05:10 Does the required functionality already exist as a function module? If yes, then why would you
reimplement it in JavaScript instead of reusing it?
00:05:20 Would you consider functionality as core business logic or more or less form processing? If it’s
business logic, for example, calculating tax rates for a customer-specific use case,
00:05:31 then I would recommend implementing and maintaining it as a function module independent of
your Personas flavor. If it is more a processing or transformation of data to make it easier to
access for the end users,
00:05:43 then I would consider JavaScript a good option. What is easier to maintain long-term?
00:05:49 This is very scenario specific. A very obvious one is usually fetching a whole table.
00:05:54 Using an RFC, this would be one simple call in the script, and the ABAP code is most likely
only a select statement for some form processing.
00:06:01 If you try the same by reading the data from a table rendered on a screen, you might have to
scroll the render table to get all entries,
00:06:08 which creates complexity in your Personas script. Let me show you two scripts to underline my
point about maintainability.
00:06:18 The first script that I’m showing you here is using an RFC: an RFC that determines all the
purchase order items assigned to a specific given purchase order.
00:06:27 It’s the same code as before. We create an RFC object. We set our mandatory parameters,
and we request the results.
00:06:34 In this case, the result is an array. So all the items are put into a JavaScript array so that I can
easily look through them later,
00:06:41 with standard JavaScript functionality. If you would try the same by using an existing
transaction, let’s say ME2N,
00:06:49 then it gets a little more complex. First, you have to execute the ok code ME2N to get to the
transaction.
00:06:56 Here you would then enter the purchase order number, and now the slightly complicated code
starts. We fetch a table of the screen, and now we have to scroll through it
00:07:04 because a table might not show all visible roles at the same time, so we have to scroll through
it to get all the content.
00:07:10 Once we have all the content put into a JavaScript array, we go back to the screen where we
started,
00:07:16 and now we have the same loop in the end to work on the items. I hope these two scripts
underline my point that the complexity can be dramatically reduced when using RFCs,
00:07:28 and by reducing the complexity, you improve the maintainability in the future. Another
important aspect to consider when thinking about using RFCs is performance.
00:07:39 Using an RFC might not only make your scripts easier to maintain but also faster. When an
RFC is called from the script, then the Persona scripting engine triggers exactly one round trip

00:07:49 that executes the RFC and returns a result. In contrast to the RFC call, if the same data would
need to be fetched from a different screen or multiple screens,
00:07:58 or in the case of a table where scrolling is required, multiple round trips are needed.
00:08:03 The number of roundtrips during the script execution is usually the biggest factor for script
performance. Therefore it is always beneficial for performance to keep them as small as
possible.
00:08:13 We will talk about performance tuning for scripts in detail in Week 5, whereas the impact of
RFCs will be part of the Unit 1 content.
00:08:22 We hope that you agree using RFCs in SAP Screen Personas is quite a powerful option. As
always, with great power comes great responsibility.
00:08:31 That’s why we decided to add an additional layer of security to RFCs when they are used in
SAP Screen Personas. After installing SAP Screen Personas, by default any RFC call will be
blocked.
00:08:43 To enable a specific function module or a set of function modules, you need to open the SAP
Screen Personas admin transaction
00:08:50 and add the function modules to a whitelist. On my screen you can see transaction
/PERSONAS/ADMIN.
00:08:57 To get to the whitelist maintenance, click on the execute button next to Function Module
Whitelist. What you see now is a standard table maintenance screen for our whitelist for
function modules.
00:09:09 As you can see, there are currently only two function modules whitelisted. Exactly the same
two you saw on the script editor earlier.
00:09:17 If you want to edit these, just click on the edit button. Or if you want to create new entries just
click on New Entries.
00:09:23 For today, let’s assume you have a custom RFC that you want to also whitelist for Personas.
We want to whitelist it for all Dynpro screens, so I enter framework Dynpro
00:09:33 and application asterisk (*). I could also limit this to a specific transaction.
00:09:38 Let’s say, for example, you have a function module that accesses some confidential sales
order data. In that case, you could decide that this is only possible if you are already in
transaction VA03 or VA02, or any VA transaction
00:09:51 so that you allow it only in the context where the user should actually access that data. Last
but not least, you can set a function module to be executed in the same session
00:10:01 or, to be precise, in the user session of the currently active user. By doing this, the function
module can manipulate the screen state by, for example,
00:10:09 triggering a pop-up or filling fields. Most of the time this is not required,
00:10:13 especially when executing existing RFCs that are designed to be executed in their own
session. Therefore we would recommend to only execute an RFC in the same session
00:10:22 if you know exactly what you're doing and have a very valid reason because it could have
unexpected side effects. Finally, we click on Save and the RFC is whitelisted.
00:10:34 For RFCs, we also have our common Personas approach: If you’re not allowed to do it without
Personas, you’re not allowed to do it with Personas.
00:10:42 So even if an RFC is whitelisted, the existing authorization checks provided by their RFC
interface, as well as the function module, are executed.
00:10:52 In this unit, you learned about RFCs and how and when to use them in SAP Screen Personas.
We will touch on the topic of RFCs again in Week 5, when looking into performance
improvements for scripts.
00:11:03 In the next unit, you will learn about manipulating data and performing computations in tables
with scripting. Thank you.
Week 02 Unit 04

00:00:06 Hello and welcome to Week 2, Unit 4 of our openSAP course "Using SAP Screen Personas for
Advanced Scenarios".
00:00:13 My name is Vandana Deep. In the last unit, we showed you how to use remote function calls
to implement complex scenarios
00:00:21 without compromising performance. Today, we'll be focusing on tables.
00:00:25 We will show you the different scripting functions available when using tables. We will also talk
briefly about the best practices to maximize performance when working with large table data.

00:00:35 Tables in SAP provide a powerful tool to visualize and present data. However, when you're
working with data, you might need to perform specific operations on the selected rows
00:00:45 or copy data values for calculation purposes. In our demo today, we will show you how to use
events in conjunction with the selected rows
00:00:53 and use scripting to perform data manipulation on tables. Let's start by launching the Display
Order transaction ME23N
00:01:02 and take a look at the materials table. I'm going to show you how to access the currently
selected rows.
00:01:08 For a simpler demo, I will just check the currently selected material display and description in a
pop-up.
00:01:15 So let's see how this works. Let me first bring the flavor into edit mode.
00:01:24 We're going to select the table. As you can see, the selected table is the GUI table control.
00:01:32 So in this table, there is an onSelect event that's possible. The onSelect event is fired when a
row is selected in the table.
00:01:40 Before the script handler is invoked for the table, the selectedRowsAbsolute property gets
updated with the row index or a range of selected rows index.
00:01:49 This is a concatenated list of indexes delimited by a semicolon. While we’re in the edit mode,
let’s take a look at the Short Text column.
00:01:59 I go into More Options, into the Advanced Property Editor, and make a note of the table, of the
column name.
00:02:09 Select the table, let’s go into the Insert tab, go into Script Events.
00:02:15 The onSelect property, as you can see, is available for the table. Here we would create a
script.
00:02:21 Let’s call the script DisplayMaterialShortText. Hit Create.
00:02:28 Now let’s save the flavor. Now we are ready to write the script for this.
00:02:33 Let’s go into the script editor. Let’s begin by defining a variable for the row count.
00:02:40 For this, we will use the source parameter and the selectedRowsAbsolute property. As I just
mentioned, the selectedRowsAbsolute property is a concatenated list of all the row indexes
00:02:53 that are selected in the table. So the next thing we need to do is trim the leading and the
trailing semicolons.
00:03:01 We do this by doing the replace, we replace it now,
00:03:11 Now have the selected rows. Now once we have the selected row index,
00:03:19 all we need to do is get the material short text. So we define a variable,
00:03:26 call it sMaterialDetails. Using the source parameter, which is essentially the table object,
00:03:33 we can call the getCellValue function. As you can see, the getCellValue takes two parameters.

00:03:40 It takes the row index, which in our case is nRow. The second parameter is the column name.

00:03:48 Now here we will replace the string with the string that we just copied while we were in the edit
mode for the short text column.
00:04:01 Now that we have the material details, we will just display it in an alert box.
00:04:14 We are done with the script now. Let’s save the script and go back into the runtime mode for
the flavor and test it out.
00:04:24 We’re going to select one of the rows. And as you can see, a pop-up shows up with the
selected row short text description.
00:04:34 SAP Screen Personas supports two types of table controls: GUI table control and GUI create
view control.
00:04:41 Both of these control types support the onSelect event. You can use the demoed approach to
attach to attach an event handler to the table
00:04:47 to perform any operation based on the selected roles. Notice that the table allows for multiple
selection.
00:04:54 So let’s see how multiple selection works. In this case, we recommend using a script button for
processing the selected range of rows.
00:05:02 Let’s see how this works. Let’s go back into the script editor.
00:05:11 I’ll make this a little bit bigger so you can see. Now let’s create a new script and call it
DisplayMultipleMaterialShortText.
00:05:25 In this case, since we don’t have access to the source parameter, as we used for the onSelect
event, we will use the inspector to determine the table control ID.
00:05:35 The first thing we do is define our variable for the table control. We will use the inspector to
select the table control,
00:05:44 and use the copy function to get the table control ID. Remember to put the semicolon at the
end of the statement.
00:05:52 Once we have the table control, let's define a variable for the material details. Now we know
that the table control selectedRowsAbsolute property gives a range of rows.
00:06:08 Now let’s create a generic function that can be leveraged for all the table control operations
where, given the selectedRowsAbsolute value, we can get an array of all the selected rows.
00:06:22 I have here a parseSelectedRowsAbsolute function, which takes the concatenated rows range,
and all it does is trim the leading and the trading semicolon,
00:06:33 and converts the ranges of the selected rows into an array and returns them. So let’s define a
variable.
00:06:43 Call it a aRows. And use the parseSelectedRowsAbsolute function.
00:06:55 Let’s pass it the table control's selectedRowsAbsolute parameter. Once we have that, we have
an array of all the selected rows.
00:07:07 Now we just iterate through the array. We call the getCellValue for the table control and pass it
the row index,
00:07:25 which in this case would be aRows. The second parameter being the column name.
00:07:35 And in our case, it’s short text column name. We’ll put a line break at the end so that we have
a neat list of all the selected materials.
00:07:46 Once that’s done, we have all the selected materials, and we just use an alert statement to
display the same.
00:07:55 Now the script is done, let’s save it. And also try to execute it while we are in the script editor.
00:08:04 As you can see, the selected row gets displayed with the description. Now let’s try multiple
selection.
00:08:15 As you can see, the alert pop-up shows the two selected rows and their short text description.
Now let’s move to a slightly more advanced scripting scenario.
00:08:26 I want to show you how we can traverse a table and perform some data computation. In order
to demonstrate this, I want to use one of the reports, ME2N,
00:08:35 which displays all the purchase orders. Let’s select a range of purchasing order documents.
00:08:44 Hit Execute. As you can see, a table shows all the purchasing order documents.
00:08:50 What I want to do in this flavor is display the total quantity of items which are not yet invoiced,
which we get from this particular column.
00:09:00 Now how do we do this? We get this flavor first into edit mode.
00:09:07 As you notice, when I select the table it’s a GUI create view control table. I have to select the
column and click on Advanced.
00:09:17 And make a note of the name of the column which we will be using. I would also create a script
button, call it To Be Invoiced Items,
00:09:25 and later on, I’m going to bind the script that I’m creating with this script button. Let’s go into
the scripting mode.
00:09:35 Make this a little bit bigger so you can see more. Now, in order to access the To Be Invoiced
column and do data computation on that,
00:09:46 I want to be able to copy the table into a variable. I have here a generic function, copy table
contents.
00:09:53 It takes as a parameter the table control ID. Later, it loops through the table and creates a two-
dimensional array of all the contents indexed by the column names.
00:10:04 A few things I would like to mention here. The row count gives the total rows associated with
the table control.
00:10:10 But not all the rows will be visible at any point in time. So in order to be sure that you can copy
that are just not visible,
00:10:20 you should to set the visibleRowCount. Notice that the firstVisibleRow in the beginning of the
code is set to 0,
00:10:30 and set the visibleRowCount. Once we determine that the row that you’re trying to access is
beyond the visibleRowCount,
00:10:39 we will reset the firstVisibleRow to the next set of rows. This results in effectively scrolling the
table.
00:10:48 Once we are able to access the row, all we do is call the getCellValue for the specific row and
the column index,
00:10:56 and populate the array. Next we define two variables.
00:11:01 One for the current To Be Invoiced quantity and the other one for the total To Be Invoiced
quantity we want to display. Let’s create a variable, a report table,
00:11:12 which essentially copies the entire table content for the table that we have selected. And
again, we use the inspector and select the table control to get the table control ID.
00:11:29 Once we have the report table, all we need to do is iterate through the table control and get the
To Be Invoiced quantity and do a total of that.
00:11:41 We get the current row's To Be Invoiced quantity by looking at the report table, passing it the
row index, which is "i" in this case,
00:11:52 and the name of the column that we want to access. This column name is the same name that
we copied while the flavor was in edit mode.
00:12:02 Next we keep updating the total To Be Invoiced quantity based on the current To Be Invoiced
quantity only if it is not null.
00:12:12 And once we are done, all we need to do is show the To Be Invoiced quantity in an alert box.
We are done with the script, let’s save the script.
00:12:23 Now we exit out of the script mode and we can bind the script to the script button. Now let’s
test it out.
00:12:36 And an alert box shows the To Be Invoiced quantity that is available for this particular report
table. It’s 372.
00:12:46 As you can see, once your basic functions for copying and parsing a table are available, you
can perform data validations, computations as required by the scenario
00:12:55 and make it available to the end user. In cases where the underlying transaction doesn’t
provide such information.
00:13:01 The last thing I want to show you is how we can use scripting to update and populate table
values. Let me show you this using the transaction ME21N,
00:13:10 which is the Create Purchase Order transaction. I’m going to select the vendor,
00:13:19 the Quality Bicycle Supply vendor. Create a purchasing order for the organization 1710,
00:13:29 select the purchase group, now I’m ready to create a purchase order.
00:13:35 Now what I want to do is when I’m selecting multiple materials, I want a script button that
basically populates the total number of materials that I want to order.
00:13:46 So I want to do a bulk update in that table and specify the purchase order quantity for all the
materials in one go. So how do I do that?
00:13:55 The first thing – let’s go into the edit mode, into our flavor. In this case, I would need the
column names for two particular columns:
00:14:04 the material and the purchase order quantity. First, we select the table.
00:14:09 As you can see, it’s a GUI table control. We select the material column,
00:14:14 the advanced property, we make a note of the name of the material column. And the purchase
order quantity – again, make a note of the name of the purchase order quantity column.

00:14:25 Now we’re ready to code the script. Let's exit out of the flavor,
00:14:30 go into the script editor. Let’s make this a little bit bigger.
00:14:35 The first thing I want to do is select the table control. So first, let’s create a script.
00:14:42 We’ll call it UpdatePO, create a variable for the table control.
00:14:50 Again, we'll use the inspector. Select the table control.
00:14:54 And use the copy function over here to get the table control ID. Put a semicolon at the end.
00:15:01 Once we have the table control, we're going to get the total row count in the table. Now we
simply iterate through the row count.
00:15:18 Now we need the two values – the material value and the purchase order quantity value for
that specific row. We do this by getting the material value.
00:15:33 We get the material value and the quantity value for the specific row. Once we have that, we
want to make sure before updating the specific row that the material value is specified,
00:15:46 and the quantity is not specified. So only in that case will we update the quantity.
00:15:53 Now in order to update the quantity column, We use the modifyCell function.
00:16:02 So this function takes three values: The row index, which in our case is "i".
00:16:10 The column name, which we want to update. This is the column name for the quantity.
00:16:19 And the value we want to update it to. So let’s assume that we want to update it to 10.
00:16:25 You can obviously modify this script and make it more suitable for your scenario by taking an
input from the user and specifying that value based on the input provided.
00:16:37 Now we’ve completed the script. We’re going to save it and then bind it to the Update PO
Quantity script button.
00:16:48 Let’s go into the edit mode, select the script button,
00:16:54 and again insert a script event, and specify the update purchase order.
00:16:59 Save and exit the flavor. Now let’s test it out.
00:17:05 Let’s specify a few materials. Select WHEELS,
00:17:13 BRAKES, and FRAME. Let’s execute the script button.
00:17:21 As you can see, the purchase order quantity column is now updated and there's a bulk update
that has happened in that table,
00:17:28 and all purchase order quantities are updated to As you saw, there are quite a few tables and
data operations possible using scripting in SAP Screen Personas.
00:17:38 However, one thing to keep in mind: performing data manipulations in traversal in a large table
in Personas can be very costly from a performance perspective.
00:17:46 So it’s important to ensure that the table being used in the flavor has been optimized by using
table variants to only show the columns that may be relevant to the end user.
00:17:55 Removing columns leads to less data being transferred from the back end to the client,
thereby achieving faster load times for transaction screens.
00:18:04 In addition, when you’re performing data manipulation on such a table that has been
streamlined for user access, it will be much faster than the unmodified table.
00:18:13 Today we showed you how to use scripting in SAP Screen Personas to perform data
manipulation and computation in tables.
00:18:20 In the next unit, we will walk you through tools and techniques to debug the scripts created in
SAP Screen Personas. Thank you.
Week 02 Unit 05

00:00:05 Hello and welcome to Week 2, Unit 5 of our openSAP course "Using SAP Screen Personas for
Advanced Scenarios".
00:00:12 My name is Tobias Queck and today we'll be talking about what to do when your scripts are
not doing what they're supposed to do.
00:00:19 As a scenario for our debugging session today, imagine that you're working in purchasing
00:00:24 and you're responsible for checking the correctness of purchase orders with deliveries
scheduled this week.
00:00:29 To find those orders, you can search for purchasing documents using transaction ME2N.
00:00:34 In order to search, you have to choose today's date as a start date and the last day of the
week, Friday, as the end date.
00:00:41 At the end of the week, you also want to see what is expected next week. So you need to
extend your search criteria to include the next week as well.
00:00:48 Since this can easily be automated using SAP Screen Personas, I've created a script that
calculates the start and end date
00:00:55 and then executes the search. This script is assigned to the onLoad event of my flavor.
00:01:00 Let me show it to you. On my screen, you can see I've entered my URL
00:01:06 that includes already the flavor that I want to open. So you see a list of purchase documents
that have deliveries planned for today.
00:01:13 Today is July 7, 2017. Wait a second. There's something wrong because today is also Friday,

00:01:19 so I would also expect to see the purchase orders for next week. They are somehow missing.
00:01:24 So let me go back to the screen with the script and click on the Back button.
00:01:29 Now we have a problem. We cannot go back to the search screen
00:01:32 because the script that executes a search is assigned to the onLoad event and therefore gets
executed whenever you switch to the search screen.
00:01:40 However, to review and debug the script, we need to open the script editor on the screen
containing the script. To solve such a situation,
00:01:47 SAP Screen Personas allows you to suppress onLoad and onAfterRefresh events during a
session by simply adding the URL parameter sap- personas-ignoreloadevents with the value
X.
00:02:00 Let's go back to the browser and have a look at my script. So I'm going to the URL now and at
the mentioned parameter here, sap-personas- ignoreloadevents=X.
00:02:11 Pressing enter, the flavor is reloaded and you can see the difference. We're still on the search
screen because the script has not been executed.
00:02:18 Let me open Personas or especially the Personas script editor now. Let's have a quick glance
at our script.
00:02:25 And here it is. So we have a function at the very beginning. That function calculates the date of
the next Friday.
00:02:31 It starts by today and then finds out how many days are between today and that day, adds it to
the current time,
00:02:37 and then generates a new date object. The second one we have here is a former date string
method or function.
00:02:43 This one takes any date object and generates a string out of it that we can paste into our SAP
screen.
00:02:49 The main functionality is down here. It's rather simple. We generate an object for today.
00:02:54 Then one for the next Friday and, at the very end, we convert it to a date string,
00:02:59 edit into the fields, and click on execute of the search. There's our script.
00:03:05 Now that we have access to the script and the script editor, we can use the built-in tools to
inspect the script and hopefully narrow down the problem.
00:03:14 So by looking in our script editor, you might have noticed there are two things here.
00:03:17 There's a warning over here and if I hover over it, it tells me that I have an unnecessary
semicolon.
00:03:22 Let me remove this one first and hover over this error, and here is a missing semicolon so let's
edit.
00:03:28 I can save my script and now you see the errors that my static code checks have found are
already gone.
00:03:33 To retest, I can execute the script right here, but I think I want to speed this up a little bit
00:03:38 so let me remove the commands that will bring me to the next screen and we can just debug
on this screen by seeing what is actually entered on the screen.
00:03:46 Save the script one more time. Resizing the script editor a little so that we can see the fields.
00:03:51 And now execute the script. And after execution, you can see it's still wrong,
00:03:56 so it's still July 7 until July 7. So something went wrong here.
00:04:01 The next thing you can do in the Personas scripting tools is you can use some logging
statements.
00:04:07 So I guess that something goes wrong up here when we're calculating the next date for Friday

00:04:12 because it seems like we're going into the if block as we should. What I can do here, I can
simply say session.utils.log
00:04:25 and I'm curious about what's actually in the day value because that's the one that is used in my
if block
00:04:30 when I compare to see what should be done. And then we will update the day value in our if
block
00:04:36 so we should have the same log statement down here again to see if the expected result is
actually there.
00:04:43 Last but not least, we could put another statement here at the very bottom and we could have
a look at what is actually returned as a Friday variable.
00:04:50 So again session.utils.log and in here we take Friday, our variable, and we want to have this
as a string.
00:05:01 So let's say toDateString and that's actually a very important statement here, our log method
uses only strings.
00:05:08 So to make sure that whatever is in day here is converted into a string. There's a simple trick.
Just add + "" (empty string) to it
00:05:17 and then it will be converted to a string. So doing the same here.
00:05:21 Saving our script and switching now on the right side here into our logging tools and let's
execute our script again.
00:05:29 Okay. Our script is executed. So the value is 5, that looks pretty good.
00:05:33 That is Friday, what we expected. So it should actually be 5 equals 5 and after that day should
be set to 7.
00:05:39 But if you look here again you see it's 0. And so we know for sure it went into the wrong if
block.
00:05:45 And the last log statement, as expected, now shows still July 7. So we have narrowed down
the problem.
00:05:51 It's somehow wrong over here. It somewhere doesn't evaluate our if condition correctly,
00:05:56 despite the fact that everything looks correct. We have reached the point of not being able to
debug the issue
00:06:03 using the script editor and its tools. Therefore, we need to have a look at external ones.
00:06:08 SAP Screen Personas scripts are executed in the browser. Therefore, you can use existing
JavaScript development tools provided for each browser
00:06:15 to inspect and debug your scripts. All the major browsers have their own toolset
00:06:20 that are similar in regards to generic functionalities like the console output, breakpoints, or the
inspecting of variables.
00:06:27 But they also have some differences. My personal preference for debugging JavaScript is to
use Google Chrome developer tools.
00:06:34 Therefore, I will use them today. However, you could of course use your preferred browser and
debugger tools.
00:06:40 The functionality that I will use is also available, for example, in the Internet Explorer or Firefox
developer tools.
00:06:47 Let's get back to our buggy script. Let's open the development tools in Chrome.
00:06:52 So you can go to More Tools and then check Developer Tools. And now on the right side, you
will see my developer tools.
00:07:00 Here at the bottom you have the console. Here is some more information about the network.
00:07:04 And there are several other tabs that you can explore on your own when you want to debug
some scripting code.
00:07:10 Let's go back into our script. So we assume that something might be wrong up here.
00:07:15 What I want to do now is I want to be able to use of the debugger tools to inspect that script.
00:07:20 The simplest way to do that is just typing debugger into my script, clicking on save,
00:07:26 and then pressing the execute button. What you will see now, my screen is kind of blurry now,

00:07:32 and it's stopped here because the script execution is interrupted at the line where I put the
debugger statement.
00:07:38 And now I have full access to everything in my Chrome debugger tools. I can hover over
variables, for example, today here I can see that it's July 7.
00:07:46 I can check the day variable and, as expected, the 5. I can see that the Friday value that I
used as a constant for the comparisons is also 5.
00:07:55 And now I can also add additional breakpoints to my screen, so on my script. Let me add one
here, for example,
00:08:01 and click on continue execution. Now we are at the next breakpoint and I can again check the
variables and,
00:08:08 as you have seen in the log before, we have a 0 here and this one is 5.
00:08:12 So there's something wrong. So we got 0 as a result, which was not expected.
00:08:17 Let's just do the execution one more time and let me go back there again. I want to see the
first breakpoint again.
00:08:23 Let's have a closer look. So day is 5 and the Friday value is 5.
00:08:27 Ah, and do you see the difference? There's one mistake I made here.
00:08:33 So I used an explicit comparison operator over here, which compares the values also very
explicitly in regards to their type.
00:08:41 And then I used the fridayValue here as a string with the value 5. And day that is returned as a
value from the today.getDay method as an integer.
00:08:49 That's why that comparison actually is always false and we always get it to the second if block.

00:08:56 Let's finish the script here. We can also remove our breakpoint here because we don't need it
anymore.
00:09:01 And we can go back into our script editor and fix the script. So let's first remove the debugger.

00:09:07 You could either change the comparison and have a more abstract comparison, or do the right
thing and also use an integer here for our constant.
00:09:15 So let's remove this one here. We can also remove our session commands again
00:09:20 because we don't need them anymore. And down here, we have another session command.
00:09:25 So let's give it another shot. Let's execute our script. Don't forget to save, of course.
00:09:30 Now execute the script and have a look here once this pop-up has gone. Finally, we have the
right value here and now our script has the search criteria that is from today,
00:09:41 Friday the 7th, until the end of next week, Friday the 14th.
00:09:45 So let's also remove the two comments at the bottom here so that our script is fully functional
again. Let's save.
00:09:53 We can close the script editor because we're done. We can also go back to our URL and
remove the parameter that suppresses our onLoad events
00:10:00 and let's press Enter here. And by now, you see on my screen, the real result,
00:10:07 the result that I expected. So there's a purchase order with a delivery expected today,
00:10:11 but there are also a few more ones next week. So we have debugged and fixed the script
here.
00:10:17 In this unit, you learned how to inspect, instrument, and debug your scripts by using the inbuilt
SAP Screen Personas tools
00:10:23 as well as one browser's development tools. In the next unit, you will learn how to manage
scripts by creating a script library.
00:10:30 Thank you.
Week 02 Unit 06

00:00:06 Hello and welcome to Week 2, Unit 6 of our openSAP course "Using SAP Screen Personas for
Advanced Scenarios".
00:00:13 In the last unit, we gave you tips on how to debug scripts using SAP Screen Personas. Today,
we will continue to focus on scripts.
00:00:21 We will show you how you can manage your scripts by creating script libraries within
Personas. So let's get right to it.
00:00:29 JavaScript libraries allow packaging reusable code for usage within a flavor or across flavors.
This helps to remove duplicate code and makes the scripts developed for your flavors more
maintainable.
00:00:40 In Week 2, Unit 4, we showed you how you can manipulate and calculate data in SAP Screen
Personas using tables.
00:00:47 We will use the same example to walk you through the process of including the JavaScript
Library and using it within the flavor.
00:00:53 Let's start by accessing the Personas Flavor Gallery, and downloading a JavaScript library
available for scripting with tables.
00:01:01 So I'm going to access the SAP Screen Personas Flavor Gallery. I'm going to show the filter
bar here and select the type JavaScript Library.
00:01:12 Hit OK... and click on Go. As you can see, there is a Table Control Utilities available for
download.
00:01:22 Let's take a look at it. This is the JavaScript Library that copies the contents of the table control

00:01:29 and returns an array of table content. There are other utility functions within the JavaScript
library as well.
00:01:36 So we are going to click on Downloads, and click on the TableControlUtilities.
00:01:43 We're going to accept the end-user license agreement. And once that's done, your Table
Control Utilities is downloaded on your desktop.
00:01:53 So the next step – let's take a quick look at the TableControlUtilities JavaScript file. Okay, so
we have a function for copying the table contents,
00:02:06 which takes the table control ID. And as I showed you in a previous unit,
00:02:11 you can copy the contents of the table controls and it returns a two-dimensional array. In
addition to this function, there are other utility functions that you can use for table controls.
00:02:22 You can print the column names for the table. You can find the first table row index that
matches a specific value that you're looking for in a column.
00:02:35 And also, lastly, you can find the first empty row index within a table. This is useful when you
are inserting in a table.
00:02:43 For example, when you are doing a create purchase order in ME21N. Now let's see how you
can include this within SAP Screen Personas.
00:02:55 I launch the SAP Screen Personas Administration transaction. And in here you see a resource.

00:03:05 You would use the previously downloaded ZIP file, and click on Create via Upload.
00:03:13 And over here you're going to select the JavaScript Library that you just downloaded. So
you're going to find it over here in your desktop and upload it to the system.
00:03:24 We have here already imported the JavaScript Library, so let's take a quick look at what
information is provided in the resource.
00:03:34 As you can see, there is a preview of the resources available. So these are all the functions we
talked about.
00:03:41 The name of the JavaScript Library is TableControlUtilities.js. Now one thing that we would
need when we are coding our scripts is this GUID.
00:03:51 So we are going to make a copy of this GUID and keep it handy when we use it for the
scripting.
00:03:59 Now we're done in the admin control. Now that the script library is uploaded, let's see how we
can include it within Personas.
00:04:07 The scenario that we are looking at is clicking on the report By Order Number. And if you
recall, we filtered down the report by a set of purchase order documents.
00:04:20 So I'm going to select a range, and hit Execute.
00:04:28 Let's refresh our memories with the scenario that we implemented. I have here a list of
purchase order documents,
00:04:38 and the column over here indicates the total number of items that are not yet invoiced. So we
wanted to create a script that basically sums up all the quantities in this column
00:04:51 and reports it back. So the script was bound to this particular script button.
00:04:56 If you click on it... it's going to show you the number of items that are not yet invoiced.
00:05:03 Let's open the Scripting mode. I'm going to make this a little bigger so you can
00:05:11 So here's the function that we created originally, it's called copyTableContents.
00:05:16 So I'm just going to remove this entire function because we need to include our JavaScript
Library.
00:05:24 The way we include the JavaScript Library is by using session.utils.include Let's take a look at
what "include" expects.
00:05:37 So it expects a string ID, which is basically the resource ID. Here we are going to use the
GUID value of the resource.
00:05:44 And the second field is a Boolean. That basically indicates how often the JavaScript Library
gets executed.
00:05:52 So, for instance, if you pass a true value to it, it will get executed every time it's invoked. And if
you pass a false value, it will get invoked only once per session.
00:06:08 So here's the GUID value that we have copied. We're going to pass "false" to the second
parameter.
00:06:18 We're going to save the JavaScript. Now we're ready to test this out.
00:06:25 Let's hit Close, and click on the same script button over here.
00:06:32 There you go. Now we have included a JavaScript library in our code,
00:06:37 and that's been invoked to a copy of the table, into an array. And we're using the array to
compute the total items that are not yet invoiced.
00:06:46 Today, we showed you how to find and make a JavaScript library available for flavor
development within SAP Screen Personas.
00:06:53 You could create your own libraries as well and start using them within your flavors. Let's do a
quick recap on what we learned during this week.
00:07:01 This week, we focused on scripting. We learned how to handle pop-ups and dynamic controls,

00:07:06 and switch flavors based on what appears on the screen. We also learned how to incorporate
remote function calls and how to debug scripts.
00:07:14 We looked at advanced events and how to handle them. And also demoed scripting options
available for table controls.
00:07:21 In Week 3, we will be focusing on building a consistent user experience using corporate
branding and templates.
00:07:28 Thank you.
www.sap.com

© 2017 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or
for any purpose without the express permission of SAP SE or an SAP affiliate
company.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. Please see
http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP SE and its distributors contain
proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for
informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and
services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be
construed as constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue
any course of business outlined in this document or any related presentation,
or to develop
or release any functionality mentioned therein. This document, or any related
presentation, and SAP SE’s or its affiliated companies’ strategy and possible
future developments, products, and/or platform directions and functionality
are all subject to change and may be changed by SAP SE or its affiliated
companies at any time
for any reason without notice. The information in this document is not a
commitment, promise, or legal obligation to deliver any material, code, or
functionality. All forward-looking statements are subject to various risks and
uncertainties that could cause actual results to differ materially from
expectations. Readers are cautioned not to place undue reliance on these
forward-looking statements, which speak only as of their dates, and they
should not be relied upon in making purchasing decisions.