Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

Scripting in SAP Screen Personas for Web Dynpro ABAP is offered to allow primarily automation of re-occurring or complex steps. With the current release the basic functions are available to automate the current application.

Prerequisites

To work with the scripting features inside Web Dynpro ABAP based applications you need to have at least SAP Screen Personas 3.0 SP01 and SAP_UI 750 SP01 installed on your system – otherwise the SAP Screen Personas functions are not enabled for Web Dynpro ABAP based applications. See note 2181980 for more details on the system requirements.

Example

As example we use the product maintenance application from the Enterprise Procurement Model, which is part of each SAP NetWeaver installation. We enhance the application with a new button that will provide a dialog to ask the user for the new product name and will change this accordingly in the application.

The original application (S_EPM_FPM_PD) looks like the following:

After the adjustment the screen should look like the following:

I know there could be more improvements made with the layout capabilities of the Floorplanmanager as well as the SAP Screen Personas functions – but as the focus is on scripting let’s keep it as it is.

Start Scripting

Create a flavor and access a UI element

Each script is associated with a flavor – thus before we can create a script we need to create a flavor. After the flavor is created we leave the edit mode and switch to scripting mode. There the first action is to create a new script. The scripting engine is based on JavaScript, means nearly all JavaScript syntax can be used – however the access to some global objects may be limited.

The internal structure of the HTML page is controlled by the Web Dynpro ABAP and the Unified Rendering frameworks and by this the structure might change overtime to adopt changed browser behavior. To access the UI elements as seen from the framework a dedicated access is provided inside the scripting engine – do not use the standard objects inside the browser, e.g.

window

or

document

.

Using the global object

session

you have access to a bunch of functions built in to access the screen elements, access helping functions or use the logging. We’ll have all of them in use in the full example later on.

To access now a single element, e.g. the edit button you should start the inspector – this is an interactive tool which allows you to select any screen element that provides some interaction capabilities. While you hover over the element some basic information is displayed in the lower right section of the screen. Once you select the element via click the full available information for the element is shown.

The inspector view shows you all available attributes and methods for the object. Attributes have an indication whether they can be changed or they’re read only. Methods are like functions and can be invoked. As we like to invoke the press function on the button we click on the icon in front of the press entry. This produces a single line of code in which the element is accessed and the method is invoked.

session.findById("S_EPM_UX_PD_OVP.00.PAGE_HEADER.FPM_CA_TOOLBAR_FPM_EDIT_1").Press();

This line re-presents the pattern of using scripting quite well. Access the object with the

session.findById

function (the Id’s are stable) and then access either an attribute or invoke a method.

If you execute this script now, then the application changes into edit mode. However, if you execute the script for a second time you will see no visible change – except an error message on the Logging tab of the scripting area – this is due to the fact that the edit button is on the page but it’s inactive and as a result the press method cannot be called.

Initial Script – for straightforward case

Equipped with the knowledge on how to invoke actions on the UI we can complete our script to have the functionality working. The code would look like this:

session.findById("S_EPM_UX_PD_OVP.00.PAGE_HEADER.FPM_CA_TOOLBAR_FPM_EDIT_1").Press();
var sName = session.findById("EPM_PD_OVP_HEADER_FORM_CFG.00.V_FORM.FGRP_8").value;
sName = session.utils.prompt("Enter new Product Name", sName );
session.findById("EPM_PD_OVP_HEADER_FORM_CFG.00.V_FORM.FGRP_8").value = sName;
session.findById("S_EPM_UX_PD_OVP.00.PAGE_HEADER.FPM_CA_TOOLBAR_SAVE").Press();

The field with the ID

"EPM_PD_OVP_HEADER_FORM_CFG.00.V_FORM.FGRP_8"

is the input field for the product name – in the script we read the current value and exchange it with the input from the user – via the

session.prompt

method. This special method provides an input dialog for simple string values. For more complex inputs please use dedicated new screen elements which can be inserted via the editor.

Now we need to add this script to a new button on the screen to allow users to work with it. For this we quit the scripting mode and switch to edit mode. In there we add a new scripting button, place it in on the screen and assign our newly created script to it.

This covers the first part of using the scripting inside SAP Screen Personas for Web Dynpro ABAP. For using such scripts in a productive environment it’s highly recommended to use logging functions and secure the script with additional checks. Please see the follow up blog for this.