Create Interesting Visualizations

in Web Intelligence Report using

HTML Components

Applies to:
BusinessObjects Web Intelligence XI Release 2, XI R3 For more information, visit the Business Objects
homepage.

Summary
This document provides a guide for how to embed HTML components in a Web Intelligence Report. It also
provides example of creating some interesting visualizations in a Web Intelligence Report using HTML.
Limitations of the process are briefly mentioned.
Author:

Arijit Das

Company: Tata Consultancy Services Ltd.

Created on: 2 April 2010

Author Bio
The author has been associated with Tata Consultancy Services Ltd. for 2.5 years and has worked in
Telecom and Utilities domain as a BusinessObjects Consultant. He has mainly worked in development of
Universe and Web Intelligence Reports in BusinessObjects Enterprise XI Release 2 and BusinessObjects
Enterprise XI R3.

SAP COMMUNITY NETWORK

2010 SAP AG

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

1

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Table of Contents
Introduction ......................................................................................................................................................... 3
Examples of HTML components in WebI ........................................................................................................... 3
Add a marquee in WebI Report ...................................................................................................................... 4
Requirement ................................................................................................................................................................ 4
Solution ........................................................................................................................................................................ 4
Customization .............................................................................................................................................................. 4

Add Bar Chart inside table cells ...................................................................................................................... 5

Requirement ................................................................................................................................................................ 5
Solution ........................................................................................................................................................................ 5

Add a tooltip text ............................................................................................................................................. 7

Requirement ................................................................................................................................................................ 7
Solution ........................................................................................................................................................................ 7

Limitations ........................................................................................................................................................... 7
Related Content .................................................................................................................................................. 8
Disclaimer and Liability Notice ............................................................................................................................ 9

SAP COMMUNITY NETWORK

2010 SAP AG

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

2

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Introduction
The purpose of a web browser is to read HTML documents and display them as web pages. When we use
Web Intelligence as a web based application, embedding HTML contents in the report provides a good way
to enhance the reporting capability of BusinessObjects Web Intelligence (WebI).
The purpose of this document is to show how to add HTML components in a WebI report using some simple
examples of HTML components to enhance reporting in Web Intelligence.

Adding HTML Components in WebI Report

To use HTML components within a WebI report, follow the steps below:
1. In the Edit Report mode, add the HTML code in the formula editor for a cell.
2. In the Display property of the cell set the Read cell content as option to HTML as shown below:

3. You can add HTML code in a table cell(s) as well as in a free-standing cell.
Note: You can build HTML tagged objects in the universe as well. But while using that in WebI, in the display property of
the cell using the object you must select Read Cell Content as HTML.

Note: In the Edit mode, only the HTML code will be visible inside the cell. In the view mode, the code will be translated to
web content.

If browser setting allows, JavaScript and CSS can also be used to enhance HTML functionalities.

Examples of HTML components in WebI

This section shows some simple examples of using HTML components to enhance reporting in WebI.

SAP COMMUNITY NETWORK

2010 SAP AG

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

3

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Add a marquee in WebI Report

Requirement
Add a marquee in a WebI report. There will be a scrolling message inside the report. The message can be
text or image.
Solution
To add marquee in a WebI Report with a simple text, follow the steps mentioned below:
1. Drag a blank cell in the report.
2. Enter the code below in the Formula Editor for that cell.
="<html><marquee direction=right
onmouseover=this.stop();onmouseout=this.start();>This is a marquee</marquee></html>"

3.

Select the cell and go to Properties tab.

4.

In Display section, select HTML in Read cell content as field.

5.

Adjust the cell height and width to define the scroll area.

6.

Save the report.

This will show a scrolling text This is a marquee in the defined scroll area within the WebI report when
viewed in HTML report panel.
Customization
Create following variables in WebI:
Variable

Purpose

Allowed Values

Variable
Type

Example

Content

Define the content

to be scrolled.

Free form text

String

=This is a
Marquee

Direction

Define the direction

of scroll.

LEFT | RIGHT | UP | DOWN

String

=RIGHT

Behavior

Define the scroll

behavior.

SCROLL | SLIDE | ALTERNATE

String

=ALTERNATE

BkgColor

Define the
background color of
scroll area.

Color value

String

=#FAFAFA

ScrollSpeed

Define the scroll

speed.

Enter an integer. Higher value

indicates higher speed. For better
visibility, use a value between 5 and
20.

String

=8

In the cell defining the scroll area, give the formula as below:
="<html><MARQUEE direction="+[Direction]+" BEHAVIOR="+[Behavior]+"
BGCOLOR="+[BkgColor]+" SCROLLAMOUNT="+[ScrollSpeed]+" ONMOUSEOVER=this.stop();
ONMOUSEOUT=this.start();>"+[Content]+"</MARQUEE></html>"

If you want a scrolling image, define the variable Content with <IMG> tag, e.g. =<img src=URL />.

SAP COMMUNITY NETWORK

2010 SAP AG

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

4

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Add Bar Chart inside table cells

Requirement
For simplicity, assume a requirement as below:

A view having columns for Event, Current Score, and Score of Previous attempt.

Show a table in the report with columns Event and Comparison. In the Comparison column, we have
to show a horizontal bar chart comparing current and previous score.

Solution
The idea is to use a HTML table with background color where the width of the area filled by the color is
dynamically varied by the score values.
Suppose, the data in the table is like below:

To achieve the requirement, follow the steps below:

1. Drag the following objects in the query:
Event (dimension), Current Score (measure), Previous Score (measure)
2. In the report, define a Vertical Table with two columns: one for Event and another for the
comparison.
3. In the Event column, define the formula as =[Event] and in the Comparison column, define the
formula as below:
="<html><table><tr><td><div style='background-color:#b5d7e7; width:"+[Current
Score]+";'/></td><td>"+[Current Score]+"</td></tr><tr><td><div style='backgroundcolor:#7bbace; width:"+[Previous Score]+";'/><td>"+[Previous
Score]+"</td></td></tr></table>"

4. In Display property for the cells of Comparison column, select HTML in Read cell content as field.
5. Adjust the cell height and width to fit the chart.
6. Save the report.
Define two variables as percentage values of ([Current Score]+[Previous Score]) and use them in place of
[Current Score] and [Previous Score] in the comparison formula so that the width of the column can be fixed.

SAP COMMUNITY NETWORK

2010 SAP AG

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

5

Create Interesting Visualizations in Web Intelligence Report using HTML Components

In the HTML viewer, the report will look like below:

Then let us add one legend for the colors used.

1. Add one free-standing cell in the report.
2. In the Formula Editor of the cell, give the formula as below:
="<html><fieldset><legend>Legend</legend><table><tr><td><div style='backgroundcolor:#b5d7e7;width:50'/></td><td>Current Score</td></tr><tr><td><div
style='background-color:#7bbace;width:50'/><td>Previous
Score</td></td></tr></table></fieldset></html>

3. In Display property for the cell, select HTML in Read cell content as field.
In the HTML viewer, the report will look like below now:

SAP COMMUNITY NETWORK

2010 SAP AG

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

6

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Add a tooltip text

Requirement
To add a tooltip text over a link or image within WebI report.
Solution
To add a tooltip text over a link within a WebI report, follow the steps below:
1. Define the link in HTML syntax. For example:
="<a title=+Char(34)+This link will navigate you to the detail report+Char(34)+
href=http://anvm21:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=11004&sType=wid>
Detail Report</a>"

2. In Display property for the cell, select HTML in Read cell content as field.
When mouse is hovered over the link, the tooltip will be visible as shown below:

To add a tooltip text over an image within a WebI report, use the alt attribute in <IMG> tag. For example,
=<img src=URL alt=Tooltip/>

Limitations
The limitations of using HTML components within WebI reports are:

The HTML components are visible only in HTML report panel.

When saved as an Excel or PDF, the report will show the HTML code instead of the content.

Use of HTML functionalities depends on the browser support.

SAP COMMUNITY NETWORK

2010 SAP AG

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

7

Create Interesting Visualizations in Web Intelligence Report using HTML Components

Related Content
To know about Web Intelligence visit here.
To know about HTML visit here.
To know about HTML charts visit here.
For more information, visit the Business Objects homepage.

SAP COMMUNITY NETWORK

2010 SAP AG

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

8

Create Interesting Visualizations in Web Intelligence Report using HTML Components

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

9