Skip to Content

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.

JS_BEX.JPG

 

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

JS_WAD.JPG

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

image

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:

image

To report this post you need to login first.

22 Comments

You must be Logged on to comment or reply to a post.

  1. Witalij Rudnicki
    Thank you, Andrey. This is nice trick that certainly requires good knowledge of JavaScript and structure of elements of the page generated by WebAD. Would you recommend any good sources for further reading on these topics? Regards. Vitaliy
    (0) 
  2. Rajendra Tewani
    This is a good trick.
    How can we restrict the key figure formatting to specific columns? For example, if we have two trend columns can we show the pictures in one and not in the other?
    Also can we do the formatting based on the value of the lead column?
    (0) 
  3. David Jahn
    hi andrey,

    very usefull blog! thx for that! i have one question regarding the options to adapt your model to manipulate the status of an IP input ready querie cell? i had a query with some input ready cells and in addiction of a charcter value the input ready cell must be blocked..

    my java-script knowledge is very limited, so i don´t know if there is a similar way solve my requirements..

    (0) 
  4. Rafael Del Rosal
    Hi,
    I have a requirement to format the columns text from horizontal to vertical and I think it can be posible implementing this solution. What is the tag to access the element column? and what is the style parameter to show the column text verticaly?
    Best regards,
    (0) 
  5. Shlomi Weiss
    Hi

    Very interesting stuff,
    Well done

    I need to remove the # symbol from a column chart
    I believe that the chart HTML is within a separated iframe and not in the main page so, I believe that your trick won’t work and in any case in a chart the # symbol is not inside a table cell (

    ).

    Any idea?

    Shlomi

    (0) 
    1. Andrey Uryukin Post author
      Hi.

      I guess that if you will execute the page, right click and goto “view source” you will be able to see which tags are “compounded” to the chart.
      Then just change the JS code according to those tags.

      Regards.

      (0) 
  6. Udo Tummers
    If you don’t want to use images from a “foreign” website (there is a risk in howlong the image will be there) you can put you images on the SAp-server:
    se80
    MIME Repository
    SAP -> BW -> Customer -> Images
    Import MIME Objects

    And then use the next string in your URL:

    url(/irj/servlet/prt/portal/prtroot/com.sap.ip.bi.web.portal.integration.mimerepository?path=/sap/bw/mime/Customer/Images/IMAGE1.jpg)

    (0) 
    1. Andrey Uryukin Post author
      Thanks.
      Actually, I always use a relative path to MIME repository, as you have mentioned.
      Final path used in the blog just because simplification reasons.
      Regards.
      (0) 
  7. Hagen Kunze

    Hi Andrey,

    a very useful blog – we already could adapt this functionality for our reports.

    Now we are facing the demand to set the colour of complete colums depending on its title, f.e. title = ‘turnover’ -> color = red.

    Do you have any idea ?!

    Regards
    Hagen

    (0) 
    1. Andrey Uryukin Post author

      Hi,

      Only the idea I have is to use the next algorithm:

      1. check if TD text is “yourtitle” like

      if(Elements[i].innerText==’your title’

      2. then running on each N column with constant offset and setting a needed color.

      For example-the report:

      customer      gross taxes net

      111               10     11     12

      222               20     21     22

      333               30     31     32

      You want to color the “taxes” column.

      This is the 3rd column and we have 4 constant cols in the report.

      So the next column to color will be 7th (3 + 4 constant cols of the report), and the next will be 7 + 4 = 11th column.

      Something like that.

      Regards.

      (0) 
    1. Andrey Uryukin Post author

      Hi.

      Unfortunately after SDN upgrading to the new engine the code is “gone” and I have ho another copy.

      But there is a basis for the code:

      var Elements=document.getElementsByTagName(‘td’);

        for(var i=0;i<Elements.length;i++) {

          if(Elements[i].innerText==’#’) {

              Elements[i].innerText=’ ‘;

          }

        }

      }

      You can google for the other possibilites of JS like setting background color or any font and then extend this code.

      Regards/

      (0) 
  8. Hagen Kunze

    Hi Andrey,

    your solution is working fine using BW 7.0; working with BW 7.3 we have the following problem:

    We’d added a script webitem into our Webtemplate and the javascript code to format the output as usual.

    The XHTML tab now doesn’t contain a commented line like

    (<!– insert data providers, items and other template content here –>):

    to insert own coding

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

    Thus We inserted this coding as follows:

                    </tbody>

                </table>

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

            </body>

        </html>

    </bi:bisp>

    Running the Web application the format is changed, but if we make one navigation step (f.e. page down to show the next rows or only setting a filter) the output isn’t formated any longer.

    Do you have any idea?!

    Regards

    Hagen

    (0) 
      1. Hagen Kunze

        Hello Andrey,

        you are right – the parameter was switched on. After having switched off it works perfectly.

        We made a copy for 0ANALYSIS_PATTERN and changed it – in 0ANALYSIS_PATTERN the parameter ist set per default.

        Thanks a lot

        Hagen

        (0) 
  9. ravi rawat

    Hi Andrey,

    It is really helpful blog…

    I have implemented your logic in WAD 3.x for changing some values and it works.

    The only problem is about coloring some of the cells in output. How can we achieve this in WAD 3.x.

    I have already raised a question on SDN which is still open..

    Hiding characteristics based on authorization?

    Please help me out in resolving the issue.

    Thanks in advance,

    Ravi Rawat

    (0) 
  10. Guido Brune

    Hello,

    with the following code the DOM can be manipulated.

    prerequiste:

    1.) Analysis item is rendered as plain HTML

    2.) JavaScript is placed Scritpitem on the webtemplate

    example Coding:

    function prepareDocuments(){

    var alltd = document.getElementsByTagName(“td”);

    for (var i=0; i < alltd.length; i++)

    {

    if (  document.getElementsByTagName(“td”)[i].firstChild.data == “#” )

    {

    try {

    var newa = document.createElement(“a”);

    newa.setAttribute(“href”, “http://www.sap.com“);

    newa.setAttribute(“target”, “_blank”);

    var newtext = document.createTextNode(“Dokument”);

    newa.appendChild(newtext);

    document.getElementsByTagName(“td”)[i].firstChild.data = ” “;

    document.getElementsByTagName(“td”)[i].appendChild(newa);

    } catch (ex) {

    alert(ex);

    }

    }

    }

    }

    The function can be call at the event onload of tag body.

    It is assumed that instead of a-tag you can place a img-tag there.

    All the best,

    Guido

    (0) 

Leave a Reply