How to Read Variable Values in

WAD 7.0 Using JavaScript

Applies to:
SAP NetWeaver 7.0

Summary
There are many occasions where we need to evaluate the variable entry made by the users or fire actions
based on the value input by the users which may not be completely possible within the scope of the SAP
functionalities directly. In that case we can make use of the JavaScript functionalities in WAD to tweak the
design to get what we need. In this How to paper, I have given a basic example of how we can read the
variable value Input by the user and fire WAD commands accordingly. The code can be customized based
on various business needs.
Author:

M. Mohamed Abdul Rahman Shafi

Company: Infosys Technologies Limited.

Created on: 30 August 2010

Author Bio
Shafi is a SAP BI Consultant working in Infosys Technologies Limited currently with around 3 years of
experience. He has extensively worked in SAP BI Developments Projects. His core skills include modelling,
reporting and planning using SAPBI 3.5, SAPBI 7.0 and SAP BI Integrated Planning.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

1

How to Read Variable Values in WAD 7.0 Using JavaScript

Table of Contents
Business Scenario .............................................................................................................................................. 3
Background Info: ................................................................................................................................................. 3
Step By Step Approach: ..................................................................................................................................... 5
Appendix ........................................................................................................................................................... 13
Disclaimer and Liability Notice .......................................................................................................................... 14

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

2

How to Read Variable Values in WAD 7.0 Using JavaScript

Business Scenario
We have many real-time situations where we need to validate the User input, into a variable and fire
respective actions based on the same in a Web report as follows.

Redirecting to a different layout based on user Input.

Disabling controls of WAD based on user Input.

Displaying alert messages to users based on customer exit variable values

Confirmation messages based on User interaction via variable values

Or any other scenarios.

In all this cases, there are two parts associated with it.

Reading user response.

Firing an action based on it.

Both the above two steps are not supported directly by WAD commands.
In order to make this work we seek the help of JavaScript.

Background Info:
We have the option of adding a JavaScript to the WAD layout using the scrip item. As we all know, all the
Web pages rendered via Web in SAP BI has a background Html / XHTML source code and by writing
customized JavaScript we can navigate retrieve or write back values into them.
In our example we need the details of the variables present in the data provider in the WAD layout.
For this we can use the XML item in the layout, which on execution displays the parameters and data of the
Data provider as XML codes which will not be visible to the user directly.
Based on the XML code we can use JavaScript to navigate and read the values we need from the data
provider.
Also the Script item in WAD allows us to generate automated JavaScript for WAD commands thorough
wizard, which we can change as per requirement and call in our custom JavaScript code.
Combining both we have the option to fulfill the requirements stated above with a few degree of
customization based on every requirement.
In our example we have the same two steps explained above.
1. Reading Variable values

This common JavaScript code with variable name will read the variable values.

2. Firing Action based on it

Based on the values input by the user, we redirect the user to a different layout.

In this article we can see how this is achieved using the following objects.
1. WAD Layouts

Main Layout
i. XML item
ii. Scrip Item
iii. Text Item
iv. Data provider

Sub Layout 1
i. Text item

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

3

How to Read Variable Values in WAD 7.0 Using JavaScript

Sub Layout 2
i. Text item

2. Query

A simple test Query with a Text Variable input.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

4

How to Read Variable Values in WAD 7.0 Using JavaScript

Step By Step Approach:

1. Creation of Sub Layout.
a. Open up WAD in the System
b. Place a Text item in it and save it as X_VAR_1

c.

Select the text property of the text item and then input the value as Welcome to Template
1

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

5

How to Read Variable Values in WAD 7.0 Using JavaScript

d. Similarly create another Template called as X_VAR_2 with a text item and with value
Welcome to Template 2.
2. Creation of Main Layout
a. Create a new Template and add the following items in it.
i. XML item
ii. Script Item
iii. Text Item

b. This is the main layout in which we are going to write the redirection JavaScript based on
user variable entry.
c.

Create a Data provider and assign a Query that has the User Entry variable that will be used
for redirection. For this Example I have a query with a single Input enabled text variable
XTESTINP.

d. Assign the data provider to the XML Web item.

e. The click on the script item and add click on the add with wizard button.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

6

How to Read Variable Values in WAD 7.0 Using JavaScript

f.

From the Pop up menu select the All Commands tab and locate the SET_TEMPLATE
command under Commands for Web Templates.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

7

How to Read Variable Values in WAD 7.0 Using JavaScript

g.

From the Pop up Menu select the Web template to be redirected (in our case it is
X_VAR_1).

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

8

How to Read Variable Values in WAD 7.0 Using JavaScript

h.

Thus a JavaScript will be automatically created with a name function

executeJS_SET_TEMPLATE_R as shown.

i.

Perform similar steps for creating a JavaScript to redirect to second template X_VAR_2.
Please note that the JavaScript created again will have the same name
executeJS_SET_TEMPLATE_R. Just to make a difference between the two, rename it as
executeJS_SET_TEMPLATE_R2.

j.

Now scroll to the end of the code window and copy paste the custom code in the appendix
section.

k.

Now Click on the Text item to give a value to it as Redirecting .... Please Wait. This is to
inform the user that they arer being redirected until the sub template opens up.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

9

How to Read Variable Values in WAD 7.0 Using JavaScript

l.

Now save the template as X_VAR_MAIN.

m. Now say Ok and click on the XHTML tab in the main layout.
n. Add the JavaScript code to invoke the redirection script on the load of the main layout as
shown.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

10

How to Read Variable Values in WAD 7.0 Using JavaScript

3. Execution
a. Now run the main template and from the selection screen input the variable value as INP1
and say OK.

b.

You can see the First Template.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

11

How to Read Variable Values in WAD 7.0 Using JavaScript

c.

When you refresh the main Layout and change the Input as INP2 you can see teh Second
template.

d. This way based on the variable value we can fire corresponding WAD commands. And in
this example we have used SET_TEMPLATE for redirection.
4. Code Explanation
a. The XML Web item generates the XML version of the parameters of the data provider and its
data in the backend invisible to the users.
b. This can be seen, by right clicking on the browser window and selecting view Source once
the main layout is loaded without the JavaScript code added to its XHTML tab.
c.

We use standard JavaScript code to navigate between different hierarchy of XML tags
generated and read our respective variable name and values.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

12

How to Read Variable Values in WAD 7.0 Using JavaScript

Appendix
function redirect_wad()
{
var varnm = "XTESTINP";
// Name of the variable to be read
root = document.childNodes[0];
// <HTML>
body = root.getElementsByTagName("BODY")[0];
// <BODY>
xml = body.getElementsByTagName("XML")[0];
// <XML>
bics = xml.childNodes[0];
// <BICS_VIEW>
vars = bics.getElementsByTagName("VARIABLES")[0]; // <VARIABLES>
varl = vars.getElementsByTagName("VARIABLE");
// gives no. of variable in DP
for ( i = 0; i <= varl.length; i++ )
// Loop one by one
{
vari = vars.getElementsByTagName("VARIABLE")[i];
varnam = vari.attributes[0].text;
// get variable name
mem = vari.getElementsByTagName("MEMBER")[0];
varval = mem.attributes.getNamedItem("name").value; // read variable value
if (varnam == varnm)
//check varname in loop needs to be
read
{
if (varval == "INP1")
// check for value1 and fire command1
{
executeJS_SET_TEMPLATE_R();
}
if (varval == "INP2")
{
executeJS_SET_TEMPLATE_R2();
}
break;
}
}
}

SAP COMMUNITY NETWORK

2010 SAP AG

// check for value2 and fire command2

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

13

How to Read Variable Values in WAD 7.0 Using JavaScript

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not
supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document,
and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or
code sample, including any liability resulting from incompatibility between the content within this document and the materials and
services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this
document.

SAP COMMUNITY NETWORK

2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

14