 Skip to content

 Skip to breadcrumbs
 Skip to header menu
 Skip to action menu
 Skip to quick search

Welcome to the new version of SAP Community Wiki: Learn What's New? and what has
changed.

Community Wiki
 Spaces


Quick Search

 Help



 Log in

SAP Imagineering

 Pages

1.
2.
3.




Skip to end of metadata

Go to start of metadata
SAP Screen Personas

Product Support

Product Updates

Fundamentals

SAP Fiori UX

Mobile Topics

Editor

Scripting

Best Practices & Tips

Customer / Partner Visits

Installation & Configuration

Administration

Integration

Meet the Team

Create: Kranthi Kumar Muppala Nov 09, 2015 20:02

Last Update: Regina Sheynblat Feb 06, 2019 21:35

Scripting: Including Global Javascript

Libraries
SAP SCREEN PERSONAS KNOWLEDGE BASE - by Tamas Hoznek , Regina Sheynblat ,
Kranthi Kumar Muppala

Purpose

This article shows how a Javascript library can be included within scripts so that functions from
the library can be reused across scripts within a flavor or scripts across flavors. This feature helps
remove code duplication in scripts and improves maintainability.

Overview

In order to include a Javascript library to be used in scripts, the Javascript file must be uploaded
as a resource file using the SAP Screen Personas administration transaction and the uploaded
resource ID can then be used as a parameter of the session.utils.include API. These steps are
explained in detail in the following sections. There is also a section that mentions a few caveats
on how the Javascript libraries need to be structured to work correctly in SAP GUI for Windows
and SAP GUI for Java.

Upload the Javascript File

I will use a Javascript file with the following contents and will refer to the file name as
'TableControlUtilities.js' in this section.

TableControlUtilities.js
1  /**
2  * Returns an array of rows containing information from the table control.
 * @param {string} sTableControlId - The ID of the table control.
3  * @returns {Array[Object]} The contents array.
4  */
5 copyTableContents = function(sTableControlId) {
6     // Fetch the table and its columns
    var oTableControl = session.findById(sTableControlId),
7     aColumns = oTableControl.columns,
8     aContents = [],
9     nTopRow,
1     oRow,
0     sColumnName,
    nRowIndex,
1     i;
1     if (oTableControl.rowCount > 0) {
1         //Set the visible row to 0
2         oTableControl.firstVisibleRow = 0;
1         //Get the Max visible row number
        nTopRow = oTableControl.visibleRowCount - 1;
3         //Loop through all the rows
1         for (nRowIndex = 0; nRowIndex < oTableControl.rowCount; nRowIndex++)
4 {
1             oRow = {};
            if (nRowIndex > nTopRow) {
5                 // Set the first visible row to the next set of rows. If the
1 next set goes beyond the maximum rows,
6                 // adjust it so that the set's last row is the table's last
row.
1
                if (nTopRow + oTableControl.visibleRowCount >
7 oTableControl.rowCount) {
1                     oTableControl.firstVisibleRow = oTableControl.rowCount -
8 oTableControl.visibleRowCount;
1                 } else {
                    oTableControl.firstVisibleRow = nTopRow + 1;
9                 }
2                 nTopRow += oTableControl.visibleRowCount;
0             }
2             // Populate the row information.
1             for (i = 0; i < aColumns.length; i++) {
                sColumnName = aColumns.elementAt(i).name;
2                 oRow[sColumnName] = oTableControl.getCellValue(nRowIndex,
2 sColumnName);
2             }
3             // Break after the first blank row - the values usually contain
all underscores like "____" for a 4 character column.
2             if (!oRow[aColumns.elementAt(0).name].replace(/_/g, "")) {
4                 break;
2             }
5             aContents.push(oRow);
2         }
    }
6     return aContents;
2 };
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7

1. Open the transaction /PERSONAS/ADMIN

in your favorite SAP GUI application and
navigate to Resources, then click on the
'Create' button..
2. In the file selection dialog, change the file
filter from 'Images...' to 'JavaScript Files
(*.js)'.
3. Choose the file 'TableControlUtilities.js' or
any Javascript file from the file system. The
library file is now uploaded as a new
resource.
4. Double-click the new resource in the grid to
display its details. You can change the
description to provide more information
about the included functionality.
5. Make a note or copy the value of the GUID
field in the Metadata tab. This is the ID of
the Javascript library that will be used in
subsequent sections.
Include the Javascript Library

The uploaded Javascript library can be used in any script of any flavor using the
session.util.include API. This function accepts two parameters:

scriptResourceId - this is the GUID of the uploaded resource file.

alwaysExecute: this accepts a Boolean value - if set to 'true', then the Javascript file is always
executed when the include is called; if set to 'false', the Javascript file is only executed once
when the include is called for the very first time in a session.

Here's an example of how the 'TableControlUtilities.js' library can be used to copy the contents
of a table control.

1. Go to transaction GUIT.
2. In the OK Code field, input 1000 and hit
enter key. This will open the table control
test screen.
3. Create a new flavor or open an existing
flavor and open the script editor.
4. Create a new script and input the following
script contents:
 Script to Copy Contents of the GUIT -
1000 Table Control

1// Load the 'TableControlUtilities.js' library.

2session.utils.include("005056840F9E1ED792F82B5AA410703F", false);
// Fetch the contents of the table control.
3var aContents =
4copyTableContents("wnd[0]/usr/tblSAPM_GUITEST_PORTABLETABLECONTROL");
5// Output the contents to the browser console.
6console.log(aContents);

5. Save the script and execute it.

6. Open the browser console and observe the
output of the table control's contents.

Usage in SAP GUI for Windows and SAP GUI for Java

The session.utils.include API works as described in previous sections in SAP GUI for HTML.
There are a couple of caveats for using the API in SAP GUI for Windows and SAP GUI for
Java:

1. The alwaysExecute parameter is ignored in

SAP GUI for Windows and SAP GUI for
Java. The included script is always executed.
2. In SAP GUI for HTML, functions such as
the copyTableContents from the example are
available as a part of the window object and
can be accessed directly from any script.
However, this is not possible in SAP GUI for
Windows and SAP GUI for Java. In order to
use functions defined in the Javascript
library in these GUI applications, the library
file should return an object with the
functions. Here's an example of a library that
would work on all GUIs:

Table Control Library that will Work on

all GUIs

1var tableControlLibrary = {
2    copyTableContents: function(sTableControlId) {
        // Implementation...
3    },
4    exportToSpreadsheet: function(sTableControlId) {
5        // Implementation...
6    }
};
7return tableControlLibrary;
8
 9

Here's the corresponding usage of the above

library:

Usage of the Table Control Library

// Load the 'TableControlUtilities.js' library.

1var tableControlLibrary =
2session.utils.include("005056840F9E1ED792F82B5AA410703F", true);
// Fetch the contents of the table control.
3var aContents =
4tableControlLibrary.copyTableContents("wnd[0]/usr/tblSAPM_GUITEST_PORTA
BLETABLECONTROL");

Notice the difference in the way the

copyTableContents function is invoked in
the above example.

Related Content

Related Search Terms:

SAP Screen Personas, Scripting, Script Include, Global Scripts, session.utils.include

 Privacy
 Terms of Use
 Legal Disclosure
 Copyright
 Trademark
 Cookie Preferences