How to Read Variable Values in WAD 7.0 Using JavaScript

5/19/2018 How to Read Variable Values in WAD 7.0 Using JavaScript

1/14

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX -bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2010 SAP AG 1

How to Read Variable Values inWAD 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 actionsbased on the value input by the users which may not be completely possible within the scope of the SAPfunctionalities directly. In that case we can make use of the JavaScript functionalities in WAD to tweak thedesign to get what we need. In this How to paper, I have given a basic example of how we can read thevariable value Input by the user and fire WAD commands accordingly. The code can be customized basedon 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 ofexperience. 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.


2/14

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


3/14



Business Scenario

We have many real-time situations where we need to validate the User input, into a variable and firerespective 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 theWeb pages rendered via Web in SAP BI has a background Html / XHTML source code and by writingcustomized 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 theData 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 dataprovider.

Also the Script item in WAD allows us to generate automated JavaScript for WAD commands thoroughwizard, 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


4/14



Sub Layout 2

i. Text item

2. Query

A simple test Query with a Text Variable input.


5/14



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


6/14



d. Similarly create another Template called as X_VAR_2 with a text item and with valueWelcome 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 onuser variable entry.

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

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.


7/14



f. From the Pop up menu select the All Commands tab and locate the SET_TEMPLATE

command under Commands for Web Templates.


8/14



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


9/14



h. Thus a JavaScript will be automatically created with a name functionexecuteJS_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 nameexecuteJS_SET_TEMPLATE_R. Just to make a difference between the two, rename it asexecuteJS_SET_TEMPLATE_R2.

j. Now scroll to the end of the code window and copy paste the custom code in the appendixsection.

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


10/14



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 asshown.


11/14



3. Execution

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

b. You can see the First Template.


12/14



c. When you refresh the main Layout and change the Input as INP2 you can see teh Secondtemplate.

d. This way based on the variable value we can fire corresponding WAD commands. And inthis 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 itsdata in the backend invisible to the users.

b. This can be seen, by right clicking on the browser window and selecting view Source oncethe 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 tagsgenerated and read our respective variable name and values.


13/14



Appendix

function redirect_wad()

{

var varnm = "XTESTINP"; // Name of the variable to be read

root = document.childNodes[0]; //

body = root.getElementsByTagName("BODY")[0]; //

xml = body.getElementsByTagName("XML")[0]; //

bics = xml.childNodes[0]; //

vars = bics.getElementsByTagName("VARIABLES")[0]; //

varl = vars.getElementsByTagName("VARIABLE"); // gives no. of variable in DP

for ( i = 0; i


14/14



Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is notsupported 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 orcode sample, including any liability resulting from incompatibility between the content within this document and the materials andservices offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of thisdocument.

How to Read Variable Values in WAD 7.0 Using JavaScript

Documents

Transcript of How to Read Variable Values in WAD 7.0 Using JavaScript