How to read Bex variable value with JavaScript within WAD

[Former Member]

Introduction

Reading and displaying the value of Bex variable within WAD could be done with very simple way by using Info Field web item.

But what happens if you need to use this value within WAD (for example embed this value to any caption or just display it in other way that Info Field) ?

Goal

This blog describes how to read Bex variable value with JavaScript within WAD and embed it to tray caption of analysis item.

Business scenario

Let us consider a scenario where you have WAD application with analysis item based on Bex report that shows some amounts per customer and company code. If user has selected a particular customer, he wants to show this selected value within caption of analysis item's tray.

General schema of implementation

We will follow the next steps in WAD:

1.     Add XML web item Data Provider – Information. This web item will generate XML with lot of useful information about the query such as variables and their values/texts, selections, query members and other information.

2.     Add Script web item that will parse XML data, find needed section (variables and their values), select variable value and concatenate it with a caption of analysis item's tray.  Important note-it is preferable to base XML web item Data Provider – Information on different query than used for analysis item.

You can create simple query just with one info object restricted by some variable and without any key figure.

Such query will generate simple XML, will be fast and would not nestle performance of the WAD application.

Detailed implementation

I will create Bex query for XML web item.

This query will include just one info object (0CUSTOMER) restricted by variable ZCUST.

There are no key figures in this query.

When you will execute the WAD application, this query will generate XML file that you can view by right click on internet explorer page and selecting View Source.

I'll bring only part (relevant for our topic) of generated XML:     

                   <BICS_VIEW>  <SERVICE_DESCRIPTION>    <QUERY>Z_READ_VAR_JS</QUERY>  </SERVICE_DESCRIPTION>  <INFO_PROVIDER name="ZSCNIP" text="IP Cube"/>  <QUERY name="Z_READ_VAR_JS" text="Z_READ_VAR_JS">    <DUE_DATE>20100907</DUE_DATE>    <CREATED_BY>URYKIN.ANDRE</CREATED_BY>    <CREATED_ON>20100907</CREATED_ON>    <UPDATED_BY>URYKIN.ANDRE</UPDATED_BY>    <UPDATED_ON>20100907</UPDATED_ON>  </QUERY>  <VARIABLES>    <VARIABLE name="ZCUST" type="INFO_OBJECT_MEMBER" isStateVariable="false" text="Customer">      <SELECTIONS>        <SELECTION type="SINGLE_MEMBER">          <MEMBER name="0001000102" type="MEMBER" text="OMPARTS IND LTD"/>        </SELECTION>      </SELECTIONS>    </VARIABLE>    <VARIABLE name="ZCCODE" type="INFO_OBJECT_MEMBER" isStateVariable="false" text="Company Code">      <SELECTIONS/>    </VARIABLE>  </VARIABLES>                                               

Then I'm going to create WAD page, add analysis item (set in his properties "With Tray" and add caption "Report for customer"), script item and XML web item.

Data provider DP_1 is based on the query that shows data within analysis item Data provider DP_2 is based on the query that has been created especially for XML web item.

Finally I'll add the next java script code to script web item:

function ModifyData( ) {    root = document.childNodes[0];   body = root.getElementsByTagName("BODY")[0];         xml  = body.getElementsByTagName("XML")[0];          bics = xml.childNodes[0];   for(var j=0; j<bics.childNodes.length;j++){      if(bics.childNodes[j].nodeName=='VARIABLES'){         for(var x=0; x<bics.childNodes[j].childNodes.length; x++){            if(bics.childNodes[j].childNodes[x].getAttribute("name")=='ZCUST'){               var customer = bics.childNodes[j].childNodes[x].childNodes[0].childNodes[0].firstChild.getAttribute("name");             }         }       }   }   var exp_item, caption;   caption = 'Report for customer-';   var Elements=document.getElementsByTagName('div');    for(var i=0;i<Elements.length;i++) {     if(Elements[i].innerText=='Report for customer') {         caption =  caption + customer;         Elements[i].innerText=caption;     }   } }  function addLoadEvent(func) {      var oldonload = window.onload;      if (typeof window.onload != 'function') {        window.onload = func;      } else {        window.onload = function() {          if (oldonload) {            oldonload();          }           func();        }   }    }

This script will be executed during web page loading. The script will take the following actions:

1.     Parse XML tags

2.     Find VARIABLES node

3.     Find ZCUST variable value

4.     Concatenate ZCUST variable value with the string "Report for customer" (this is the caption of analysis item's tray)

Finally, if I'll select 1000102 for customer in variable selection screen, the caption of report will be changed dynamically, as shownbelow: