Formatting Bex queries output with WAD Script WebItem

[Former Member]

Introduction

Usually Bex query, which has been displayed within WAD application,
uses standard CSS settings (fonts, font size etc). But sometimes we need to
change such settings and format some cells according to business requirements.

Goal

This blog describes how to format some cells within WAD application using javascript.

Business scenario

Let us consider a scenario where we have the following business
requirements (for example):

1. Remove # (Not Assigned) values in end user interface and replace # with, let's say 'No Data' string.
2. Set any font color and background color for several cells.
3. Underline and set bold text in those cells which have 'No Data'
4. Add picture to some key figure that will show trend of key figure value.

Implementation

I have created simple Bex query which displays some amount for
company code, customer and currency.

Also I have created simple formula key figure which returns 1 if
amount value greater than X and 0 if the value less than X.

Then I have created simple WAD page with dataprovider, analysis item
and script webitem.

Then I have added following javascript code to the script webitem

This code does following actions:

If the cell contains # then this value will be removed with 'No Data'

Font color will be red

Background color will be green

The text will be bold and underlined

Font style will be "Italic"

Font family will be "brush script mt"

If the cell contains value 1 then some picture (arrow up) will be shown instead of 1

If the cell contains value 0 then some picture (arrow down) will be shown instead of 0

Also this code includes function addLoadEvent for using in XHTML tab in WAD.

Next, goto XHTML tab and insert following code after commented line
(<!-- insert data providers, items and other template content here -->):

<script type="text/javascript">addLoadEvent(ModifyData);</script>

Finally, the report will be displayed as following: