BI DashboardingUI Guide

UI GUIDELINES
Industry Value Accelerator Front-End

Authors:
Michael Sanjongco
Youko Watari
August, 2009
Version 1
FOR INTERNAL USE ONLY
Table of Contents:
Versions..................................................................................................................... 6
Open Issues............................................................................................................... 7
1 Overview............................................................................................................. 8
1.1
Who Should Use This Document..................................................................8
1.2
Prerequisites ..................................................................................................8
1.3
General Guiding Principals ...........................................................................8
1.3.1
Design Standards.................................................................................................8
1.3.2
IVA Development Methodology and Best Practices ...........................................9
1.3.3
Additional References and Resources ..............................................................10
IVA Framework Overview................................................................................ 11

2.1
Definition of M1 and M2 Builds ...................................................................11
2.2
Definition of IVA UI Framework...................................................................11
2.3
Window Types..............................................................................................12
2.3.1
M1 Primary Window Tabbed Structure...........................................................12
2.3.2
M1 Primary Window Non-Tabbed Structure...................................................14
2.3.3
M1 Secondary Window.......................................................................................15
2.3.4
M2 Primary Window Tabbed Structure...........................................................16
2.3.5
M2 Primary Window Non-Tabbed Structure...................................................17
2.4
2.4.1
Navigation Tabbed...........................................................................................17
2.4.2
Navigation Non-Tabbed...................................................................................19
Dashboard Builder Standards ........................................................................ 21

3.1
Dashboard Builder Setup ............................................................................21
3.2
Navigation Region Standards .....................................................................22
3.3
Content Head Standards .............................................................................23
3.3.1
Navigation Region Standards .....................................................................25
Xcelsius Standards.......................................................................................... 26
5.1
Development Environment Setup Requirement ........................................27
5.2
Xcelsius Canvas Standards ........................................................................28
5.2.1
2
Configuration Standards for Viewer ..................................................................23
IVA HTML Wrapper Standards........................................................................ 25

4.1
Navigation ....................................................................................................17
Canvas Size and Theme.....................................................................................28

Title: UI Standards for Industry Value Accelerators Front-End
Components
Version: 1.1
Page 2 of 92
5.2.2
Canvas Properties..............................................................................................29
5.3
Content Region Standards..........................................................................29
5.3.1
Xcelsius Framework...........................................................................................29
5.4
Header ..........................................................................................................31
5.4.1
Header Layout ....................................................................................................31
5.4.2
Title Properties ...................................................................................................32
5.4.3
Header Detail Properties ....................................................................................32
5.5
Side Bar ........................................................................................................35
5.5.1
Side Bar Background Properties .......................................................................35
5.5.2
Side Bar Layout ..................................................................................................35
5.5.3
SAP IVA Branding Properties ............................................................................36
5.5.4
IVA Logo Properties ...........................................................................................37
5.5.5
Side Bar Detail Properties..................................................................................37
5.6
Body .............................................................................................................41
5.6.1
Body Layout .......................................................................................................41
5.6.2
General Body Layout Guidelines.......................................................................41
5.6.3
List of Components Included in Body...............................................................43
5.6.4
Title Bar Properties ............................................................................................48
5.6.5
Background Properties ......................................................................................48
5.6.6
KPI Table Properties...........................................................................................49
5.6.7
Combo Chart Properties ....................................................................................50
5.6.7.1
Combo Chart Layout ....................................................................................50
5.6.7.2
Combo Chart Series.....................................................................................51
5.6.7.3
Combo Chart Axes.......................................................................................53
5.6.7.4
Combo Chart Texts ......................................................................................54
5.6.8
Column Chart Properties ...................................................................................55
5.6.8.1
Column Chart Layout ...................................................................................55
5.6.8.2
Column Chart Series....................................................................................55
5.6.8.3
Column Chart Axes ......................................................................................55
5.6.8.4
Column Chart Texts .....................................................................................55
5.6.9
Bar Chart Properties...........................................................................................56
5.6.10
Stacked Column/Bar Chart Properties ..............................................................56
5.6.10.1
Stack Column/Bar Chart Layout ...................................................................56
5.6.10.2
Stack Column/Bar Chart Series....................................................................56

Components
Version: 1.1
Page 3 of 92
5.6.10.3
Stack Bar Chart Axes...................................................................................57
5.6.10.4
Stack Bar Chart Texts ..................................................................................57
5.6.11
5.6.11.1
Line Chart Layout.........................................................................................57
5.6.11.2
Line Chart Series .........................................................................................57
5.6.11.3
Column Chart Axes ......................................................................................58
5.6.11.4
Column Chart Texts .....................................................................................58
5.6.11.5
Line Chart Series .........................................................................................58
5.6.12
Pie Chart Properties ...........................................................................................58
5.6.12.1
Pie Chart Layout ..........................................................................................59
5.6.12.2
Pie Chart Series...........................................................................................59
5.6.12.3
Pie Chart Texts ............................................................................................59
5.6.13
What-If Properties...............................................................................................60
5.6.14
Alerts Properties ................................................................................................61
5.6.15
Trends Properties...............................................................................................62
5.6.16
Drop Down Properties........................................................................................62
5.6.17
Tab Properties ....................................................................................................63
5.6.18
Click Box Properties...........................................................................................64
5.6.19
Radio Button Properties.....................................................................................64
5.6.20
Detail Report Link Properties.............................................................................65
Web Intelligence Standards ............................................................................ 67

6.1
WebI Report Layout .....................................................................................67
6.1.1
First Page Layout ...............................................................................................67
6.1.2
Subsequent Page Layout...................................................................................69
6.2
Page Header.................................................................................................70
6.2.1
Report Header Properties ..................................................................................70
6.2.2
SAP Branding Properties ...................................................................................71
6.2.3
IVA Branding Properties ....................................................................................71
6.3
Report Title...................................................................................................72
6.3.1
Report Title Properties .......................................................................................72
6.3.2
Report Subtitle Properties .................................................................................72
6.4
6.4.1
6.5
4
Line Chart Properties .........................................................................................57
Section Header.............................................................................................73
Section Header Bar Properties ..........................................................................73
Report Body .................................................................................................74

Components
Version: 1.1
Page 4 of 92
6.5.1
List of Visualization Included in Report Body...................................................74
6.5.2
Color Palette.......................................................................................................75
6.5.3
Column Chart, Bar Chart, and Stacked Column Chart Properties ...................76
6.5.4
Pie Chart Properties ...........................................................................................79
6.5.5
Table and Cross Tab Chart Properties ..............................................................80
6.6
Page Footer..................................................................................................82
6.6.1
Report Footer Properties ...................................................................................82
6.6.2
Run Date Properties ...........................................................................................82
6.6.3
Page Number Properties....................................................................................83
Appendix A: References and Resources.............................................................. 84

A.1
IVA Development Methodology ..................................................................84
A.2
IVA Design and Development Templates...................................................84
A.3
Visualization References and Tools ...........................................................85
Appendix B: UI Standards in Action IVA Examples.......................................... 87

Components
Version: 1.1
Page 5 of 92
Versions
Q2, 2009
Version 1 First version
08/18/2009
V1.1
Added a screenshot of TPE integrated within
CRM

Components
Version: 1.1
Page 6 of 92
Open Issues
Date
Issue
Reason (e.g. Technical, Design

Decision, etc)
Status
7/1/2009
Use of Adobe Flex
Need to figure out how to use this for M1

and determine specific UI standards that
will be applied
WIP
7/1/2009
Need to include CRM/TPE

example
Show how IVA can be integrated within

SAP Portal.
WIP
Text in orange: Topics that are still under discussion and may or may not change

Components
Version: 1.1
Page 7 of 92
1 Overview
This document defines the User Interface (UI) guidelines for designing and deploying Industry
Value Accelerator (IVA) front-end components (dashboard). These guidelines mainly cater to
IVA built in Xcelsius, SAP BusinessObjects (SBO) Dashboard Builder, SAP BusinessObjects
Web Intelligence and SAP Portal.
1.1 Who Should Use This Document

The target audiences of this document are as follows:
Existing and new members of Industry Analytics Architecture & Engineering team,
specifically those who will be responsible for building Milestone 1 (M1) and/or Milestone 2
(M2) IVA builds
SAP BusinessObjects (SBO) Field Services professionals and/or SBO pre-sales
consulting professionals who will be responsible for building M1 an/or M2 IVA builds
Any other members of SAP entities outside Industry Analytics who may be involved with
M1 and/or M2 build activities
Please see the section 2.1, Definition of M1 and M2 Builds for more explanation of what M1 and
M2 build are.
1.2 Prerequisites
This document assumes that the reader of this document has a working knowledge of the specific
SAP BusinessObjects software used within the IVA solution, specifically:
SAP BusinessObjects Dashboard Builder
Xcelsius
SAP BusinessObjects Web Intelligence
SAP Portal
Hence, this document does not explain how and where some of the configuration and layout
standards and specifics are set up within the tools mentioned above. For more information on the
specific product functionality mentioned in this document and how to use the functionality, please
refer to the Users Guide for the particular product.
It also assumes that the reader is familiar with the IVA solution architecture and development
methodology.
1.3 General Guiding Principals

1.3.1 Design Standards
This UI Standards document is a part of overall SAP and IVA standards and methodology:
8

Components
Version: 1.1
Page 8 of 92
General UI Standard and Guidelines This UI Standard document follows the general
guidelines described in the SAP User Interface Standards.
Color Scheme The basic set of colors (e.g. use of blue, gold, and gray as primary
colors) in this UI Standard document follows the standard SAP color palette as defined in
SAP Brand Tools by SAP Global Branding Team. In addition, we follow the
color/gradation scheme used within SAP CRM.
Definition and halftone values of colors
SAP Blue
SAP Gold
SAP Light Gray
SAP Gray
SAP Dark Gray
RGB 4/53/123
RGB 240/171/0
RGB 204/204/204
RGB 153/153/153
RGB 102/102/102
Dove
Petrol
Warm Green
Warm Red
Violet/Mauve
RGB 68/105/125
RGB 21/101/112
RGB 85/118/48
RGB 119/74/57
RGB 100/68/89
Primary color palette

100%
Secondary color palette

100%
RGB 96/127/143
RGB 98/146/147
RGB 110/138/79
RGB 140/101/87
RGB 123/96/114
85%
RGB 125/150/164
RGB 127/166/167
RGB 136/160/111
RGB 161/129/118
RGB 147/125/139
70%
RGB 152/173/183
RGB 154/185/185
RGB 162/180/141
RGB 181/156/147
RGB 170/152/164
55%
RGB 180/195/203
RGB 181/204/204
RGB 187/200/172
RGB 201/183/176
RGB 193/180/189
40%
Cool Green
Ocher
Cool Red
RGB 73/108/96
RGB 129/110/44
RGB 132/76/84
Warning Red
RGB 101/129/120
RGB 148/132/75
RGB 150/103/110
85%
RGB 129/152/144
RGB 167/154/108
RGB 169/130/136
70%
RGB 156/174/168
RGB 186/176/139
RGB 188/157/162
55%
RGB 183/196/191
RGB 205/197/171
RGB 206/183/187
40%
Tertiary color palette

100%
RGB 158/48/57
SAP 2007
2008 / Page 1
confidential
Figure 1: SAP Color Palette
1.3.2 IVA Development Methodology and Best Practices

From the project management and solution build point of view, the IVA Front-End build activities
are defined in the following:
IVA Solution Development Methodology This methodology defines the end-to-end
process, tasks, deliverables, stakeholders, etc. for the IVA development. The M1 and M2
build are key phases within this methodology.
Important Note: Specific Xcelsius visualization best practice (e.g. what type of chart is
suitable to what type of analysis) is to be documented within the methodology. Hence
this document only includes those types of visualization that are included in the best
practice.
IVA Architecture & Engineering M1 & M2 Process This is a sub-set of the above
methodology and further defines detail activities included in the M1 & M2 phases
IVA Architecture & Engineering Standards and Best Practices This defines key
A&E development standards outside UI standards, such as naming convention, filing
rules, packaging standards, and other development best practices

Components
Version: 1.1
Page 9 of 92
Specific locations on where to find the above contents are included in the Appendix section of this
document.
1.3.3 Additional References and Resources

We have variety of additional reference and resources that help IVA Solution Managers and
Architect with understanding best practices in visualization design and Xcelsius design. Please
see Appendix A for the list of resources.
10

Components
Version: 1.1
Page 10 of 92
2 IVA Framework Overview

2.1 Definition of M1 and M2 Builds
An IVA solution is developed using aforementioned IVA Solution Development Methodology.
Through the development process following the methodology, an IVA, as a physical technical
solution progresses its form and capability from Milestone 1 (M1) build to Milestone 2 (2) build.
M1 Build It is a disconnected model. Primary use of M1 is to socialize the specific IVA
to IVAs specific industry stakeholder and further refine the use case for the IVA, and
refine requirements for the KPIs, visualization, and workflow. The data for M1 build is
static and may be mocked up. In most cases, a M1 build consists of one or multiple SWF
files generated from Xcelsius. Multiple SWF files are bundled together as a single tabformat dashboard rendered through HTML page. PDF mock-ups of Web Intelligence
reports may be linked from the SWF.
M2 Build It is a connected model and is a solution available to qualified SAP customers
and partners for deployment. The data for M2 build is dynamic sourced from SAP BW or
other data sources. In most cases, a M2 front- end build consists of one or multiple SWF
files generated from Xcelsius. Multiple SWF files are bundled together as a single tabformat dashboard using Dashboard developed via SBO Dashboard Builder and accessed
via InfoView. Refreshable Web Intelligence reports may be linked from the SWF.
2.2 Definition of IVA UI Framework

In general, the IVA UI Framework consists of following SAP BusinessObjects elements:
Dashboard tab structure via SAP BusinessObjects Dashboard Builder (M2 Build only) or
SAP Portal
Dashboard tab structure via IVA A&E HTML wrapper
Dashboard contents defined and deployed via Xcelsius (M1 and M2 Builds)
Detail reports defined and deployed via SAP Business Objects Web Intelligence (M1 and
M2 Builds)
The elements in the UI Framework above are described in the following section of this document;
specific UI standard for each of the elements are included.
In addition, the M1 and M2 build IVA can be deployed using the SAP Portal (see below example):
11

Components
Version: 1.1
Page 11 of 92
Figure 2: Trade Promotion Effectiveness (TPE) IVA integrated within SAP CRM portal
2.3 Window Types

This section describes the window types used within IVA and how the Framework above is
applied within the window.
Within IVA, since M1 (disconnected stand-alone build) and M2 (fully-connected, integrated build)
uses different SBO elements as described below with a certain product behavior and limitations in
the look and feel, the window standards are defined based on the build type (M1 or M2).
The following is the general definitions of primary and secondary windows:
Primary Window: The primary window is the window that the user first sees when they
log into the application and return to after interacting with other windows. A primary
window is a window which contains information that is essential, important, or occurs first
in a sequence in the user's interaction with an application. There is only one primary
window.
Secondary Window: A secondary window is a child window and is opened from the
primary window or other secondary windows. In the context of IVA, a secondary window
can be a window that is used for providing detailed level analysis via pop-up or a detail
report.
2.3.1 M1 Primary Window Tabbed Structure
12

Components
Version: 1.1
Page 12 of 92
Figure 3: M1 Primary Window Elements
Callout
Name
Description
Tool (Format)
Navigation
Region
The primary navigation for the IVA, in a tab

structure is displayed here.
IVA A&E Wrapper (HTML)
Content
Region
Content Region displays the content for the

selected view. The branding is included in
this area.
Xcelsius (Flash)
Below is an example of a M1 primary window with tabs using IVA A&E Wrapper and Flash SWF
files, run on Internet Explorer:
13

Components
Version: 1.1
Page 13 of 92
Figure 4: Example of M1 Primary Window with Tabs
2.3.2 M1 Primary Window Non-Tabbed Structure

Some IVAs do not have contents across multiple tabs. In such a situation, the Navigation Region
above (using the IVA A&E Wrapper) is not used.
Below is an example of a M1 primary window with without tabs, run on Internet Explorer:
14

Components
Version: 1.1
Page 14 of 92
Figure 5: Example of M1 Primary Window without tabs
2.3.3 M1 Secondary Window

There is no secondary window within M1 build. However, Content Region within the M1 build
may contain a pop-up window or a link to a static Web Intelligence report. The specific standards
for those elements are explained within Xcelsius Standards (for pop-up) and Web Intelligence
Standards (for Web Intelligence reports).
15

Components
Version: 1.1
Page 15 of 92
Figure 6: Example of M1 Primary Window with a pop-up
2.3.4 M2 Primary Window Tabbed Structure
Callout
16
Name
Description

Components
Version: 1.1
Tool (Format)
Page 16 of 92

A
Navigation
Region

structure and menu structure for sub-pages
is displayed here.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Head
The Content Head contains the name of the

Content area.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Region

this area.
Xcelsius (Flash)
2.3.5 M2 Primary Window Non-Tabbed Structure

Some IVAs do not have contents across multiple tabs. In such a situation, the Navigation Region
and Content Header above (using SBO Dashboard Builder) are not used.
See section 2.3.2. M1 Primary Window Non-Tabbed for an example of how this window looks.
2.4 Navigation
The navigation for IVAs varies based on the specific IVAs use cases. Each IVAs navigations
and workflow is defined within the IVAs Visualization Mock-up document and Visualization
Specification document. The following describes a general navigation used within the M1 and M2
builds.
2.4.1 Navigation Tabbed

The following explains typical navigation for IVAs that includes multiple tabs.
The first tab in the primary window is

enterprise/executive (or highest aggregated
dimension) area. This should be the at a
glance or summary KPI area where the
analysis starts.
Summary KPI table is placed upper left of the
Content Region.
17

Components
Version: 1.1
Page 17 of 92
Clicking on one of the KPIs on the KPI table will

dynamically change the display for the other
charts/tables/graphs on the tab to display
corresponding measures and dimensions for
detail-level analysis.
Some of the detail level analysis may include a

radio button or check box that allows additional
measure(s) to be displayed.
Use the Navigation Region to do further

analysis specific to certain business/subject
area. The navigation within a business/subject
area is similar to the enterprise/executive area.
18

Components
Version: 1.1
Page 18 of 92
2.4.2 Navigation Non-Tabbed

The first view of the primary window is
enterprise/executive (or highest aggregated
dimension) area.
Summary KPI table is placed upper left of the
Content Region.
Clicking on one of the KPIs on the KPI table will

dynamically change the display for the other
charts/tables/graphs on the tab to display
corresponding measures and dimensions for
detail-level analysis.
Additional visualization can be displayed by the

use of radio buttons or click boxes.
19

Components
Version: 1.1
Page 19 of 92
Fisheye or drop down list on the header area

allows dimension-specific analysis.
20

Components
Version: 1.1
Page 20 of 92
3 Dashboard Builder Standards

This section explains the UI standards for the Navigation Region and Content Head using SAP
BusinessObjects (SBO) Dashboard Builder (callouts A and B below). The standards for the
Content Region are explained in section 5. Xcelsius Standard.
Callout
Name
Description
Tool (Format)
Navigation
Region

is displayed here.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Head

Content area.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Region

this area.
Xcelsius (Flash)
3.1 Dashboard Builder Setup

The default style for the Dashboard Builder should be set up as Windows. The following
standards for the Navigation Region and Content Header are based on the default property of the
Windows style.
Should a specific IVA require different look & feel for its deployment purpose, the CMC
preference function can allow setting different page style or creating a new style.
21

Components
Version: 1.1
Page 21 of 92
Figure 9: Dashboard and Analytics Preference screen in CMC
3.2 Navigation Region Standards

The Navigation Region contains two layers of navigation for IVA:
Figure 10: Navigation Region using SBO Dashboard Manager
Callout
Name
Tabs
Dashboard Manager Technical

Functionality Used
Dashboard Builder Tab function.
Use Add a new tab button to add
additional tabs.
UI Standard
Use standard product functionality to

create tabs and set visualization
specifications in terms of size, font,
and color. No customizations
necessary.
Some IVAs may require the first tab

to have sub tabs. Default structure
of Dashboard Builders first tab does
not include sub tabs and does not
allow sub tabs. Configure the first
tab so that second tab with sub tabs
will be show as the display for the
first tab.
22

Components
Version: 1.1
Page 22 of 92

Callout
Name
Sub Tab

Functionality Used
UI Standard
Dashboard Builder Sub Tab function. Use standard product functionality to

create sub tabs and set visualization
Use Add a new sub tab button to
specifications in terms of size, font,
add additional sub tabs.
and color. No customizations
necessary.
3.3 Content Head Standards

Content Head provides a heading title for the Content Region1 and acts as a container/viewer for
the Flash file developed via Xcelsius.
Figure 11: Content Head using SBO Dashboard Manager
Callout
Name
Content
Title

Functionality Used
Dashboard Builders Analytic Viewer
function.
Use Analytic Toolkit for adding new
Viewer.
UI Standard
Use standard product functionality

to create viewer and set
visualization specifications in
terms of size, font, and color. No
customizations necessary.
3.3.1 Configuration Standards for Viewer

Under the Content configuration area for the Viewer, set Document Retrieval Properties as
Display document read from original document list only
See Xcelsius Standards section of this document for the Content Region UI standards.
23

Components
Version: 1.1
Page 23 of 92
Figure 12: M2 Document Retrieval Properties
Under the Layout area for the Viewer, set the Display as option to:
A window inside a tab option
Default Style as the window style
Figure 13: Layout properties
24

Components
Version: 1.1
Page 24 of 92
4 IVA HTML Wrapper Standards

This section explains the Navigation Region using IVA HTM Wrapper (callout A below). The
standards for the Content Region are explained in section 5. Xcelsius Standard.
Callout
Name
Description
Tool (Format)
Navigation
Region

Content
Region

this area.
Xcelsius (Flash)
4.1 Navigation Region Standards

The Navigation Region contains single layer of navigation for IVA, using HTML as a language to
create simple tabbed structure to house a Flash SWF file in each tab.
Figure 15: Example of Navigation Region using IVA A&E Wrapper
The font and color standards have been setup within the cascading style document used for the
html file. No further customization other than the tab names (specific to IVA) is necessary. For
more specific instructions on how to modify the tab names, please refer to the instructions
included in the Wrapper HTML package.
25

Components
Version: 1.1
Page 25 of 92
5 Xcelsius Standards
This section explains the UI standards for the Content Region using Xcelsius. As described in
section 2.3 Window Types, the Content Region is defined as follows for M1 and M2:
M1 Primary Window
Callout
Name
Description
Navigation
Region

Content
Region

this area.
Xcelsius (Flash)
26
Tool (Format)

Components
Version: 1.1
Page 26 of 92
M2 Primary Window
Callout
Name
Description
Tool (Format)
Navigation
Region

is displayed here.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Head

Content area.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Content
Region

this area.
Xcelsius (Flash)
5.1 Development Environment Setup Requirement

The screen resolution under the display property of your monitor on your development
environment needs to be set up as 1280 by 768 pixels or more.
27

Components
Version: 1.1
Page 27 of 92
5.2 Xcelsius Canvas Standards

Xcelsius canvas defines the size and color of the outer frame of the Content Region. Standard
size for IVA is as follows:
5.2.1 Canvas Size and Theme

Property
Standards
Width
1280 pixels
Height
768 pixels
Theme
Elan
Default Color
Scheme
28
Current Theme Colors

Although this theme does not include official SAP colors, it
includes basic set of colors that we can use to follow the SAP
color palette (gold, blue, and gray)

Components
Version: 1.1
Page 28 of 92
Figure 18: Xcelsius Standard Layout
5.2.2 Canvas Properties

Property
Standards
Type
Solid
Color
RGB 242/242/242
5.3 Content Region Standards

5.3.1 Xcelsius Framework
The Content Region using Xcelsius contains the following sub areas:
29

Components
Version: 1.1
Page 29 of 92
Figure 19: Xcelsius Framework
Callout
Name
Description
Tool (Format)
Header
Includes page header and primary content

navigation for the IVA.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Side Bar

Content area.
SAP BusinessObjects
Dashboard Builder
(Dashboard)
Body

this area.
Xcelsius (Flash)
An example of Content Region based on the above framework using Xcelsius looks like below:
30

Components
Version: 1.1
Page 30 of 92
Figure 20: Example of Content Region using Xcelsius
The following sections explain each component included in the framework and standards for
Xcelsius objects.
5.4 Header
5.4.1 Header Layout
Figure 21: Example of Header Area
Callout
Name
Title
Header
Detail
(Optional)
31
Description
Title of the Content Region (dashboard page)
Houses navigation component that allows dynamic visibility of the body
area within the Content Region. Also may include other components that
are global to the IVA.

Components
Version: 1.1
Page 31 of 92
5.4.2 Title Properties
Figure 22: Example of Title within Header Area
Xcelsius
Component
Type
Background
Label
Print Button
Property
Standards
Background Color
RGB 152/175/220
Transparency
0%
Border Scale
100%
Font
Verdana
Font Style
Bold
Font Size
14
Font Color
RGB 0/0/0
Transparency
100%
5.4.3 Header Detail Properties
Figure 23: Examples of Header Detail within Header Area
Xcelsius
Component
Type
32
Property Group
Property
Standard

Components
Version: 1.1
Page 32 of 92

Xcelsius
Component
Type
Fisheye2
Property Group
Images
Thumbnails
Standard
Sizing Method
Scale
Width
125
Height
60
Horizontal Margin
Vertical Margin
Background Color
RGB 255/255/255 (white)
Label Header Color
RGB 255/255/255 (white)
Thumbnails
Combo Box3
Property
Layout
Text - Title
Text - Labels
Color - Labels
Default Color
RGB 255/255/255 (white)
Over Color
RGB 255/255/255 (white)
Selected Color
6658507;RGB 101/153/203
Number of Labels
Displayed
List Transparency
0%
Font
Verdana
Font Type
Bold
Font Color
RGB 0/0/0 (black)
Font
Verdana
Font Type
Bold
Font Color
RGB 0/0/0 (black)
Default Color
RGB 0/0/0 (black)
Size of the fisheye component is defined by the number of buttons included in the fisheye. The
number of buttons is driven by each IVAs requirements.
3
Size of Combo Box is defined by height of the background that fits the component.
33

Components
Version: 1.1
Page 33 of 92

Xcelsius
Component
Type
Property Group
Color Label
Backgrounds
Color Drop-Down
Button
Scroll Bar
34
Property
Standard
Over Color
RGB 0/0/0 (black)
Selected Color
RGB 255/255/255 (white)
Default Color
RGB 227/227/227
Over Color
RGB 150/168/195
Selected Color
RGB 52/75/109
Button Color
RGB 108/155/225
Arrow Color
RGB 255/255/255 (white)
Selected Button Color
RGB 108/155/225
Selected Arrow Color
RGB 255/255/255 (white)
Track Color
RGB 255/255/255 (white)
Thumb Color
RGB 150/168/195
Button Color
RGB 255/255/255 (white)
Button Symbol Color
RGB 0/0/0 (black)

Components
Version: 1.1
Page 34 of 92
5.5 Side Bar

5.5.1 Side Bar Background Properties
Xcelsius
Component
Type
Background
Property
Standards
Background Color
RGB 51/85/168
Transparency
0%
Border Scale
100%
Figure 24: Side Bar Area
5.5.2 Side Bar Layout

Callout
Description
SAP IVA
Branding
The SAP logo and IVA branding area
IVA Logo
(optional)
The IVA logo. The logo could be the

particular customers logo.
Side Bar
Details
External links and other industry

specific contents for the IVA
35
Name

Components
Version: 1.1
Page 35 of 92

Figure 25: Side Bar Layout
5.5.3 SAP IVA Branding Properties
Figure 26: Example of IVA Branding within Side Bar
Xcelsius
Component
Type
Image
Component
Property Group
JPEG or SWF
Options
Property
Image File
Use Side Bar Logo.psd file
Resize Image to
Component
Yes
Embed File
Yes
Transparency
Label
36
Standards
0%
Font
Verdana
Font Type
Bold
Font Size
14
Font Color
RGB 255/255/255 (white)

Components
Version: 1.1
Page 36 of 92
5.5.4 IVA Logo Properties
Figure 27: Example of IVA Logo within Side Bar
Xcelsius
Component
Type
Image
Component
Property Group
JPEG or SWF
Options
Property
Standards
Image File
Use appropriate logo image file for the

IVA
Resize Image to
Component
Yes
Embed File
Yes
Transparency
0%
5.5.5 Side Bar Detail Properties

The Side Bar Detail may contain variety of links and texts. The following are the
list of typical labels included in the Side Bar Detail area:
Data As Of text
Hyperlink group header text (e.g. Links or My News)
Hyper link text
Search Function button
Input text area
View function button
Search results display
Drop Down List
Figure 28: Example of IVA Logo within Side Bar
Each item above is explained below
37

Components
Version: 1.1
Page 37 of 92

Side Bar Detail
Type
Data As Of
Text
Xcelsius
Component
Type
Label
Property
Group
Layout
Yes
Show Border
No
Show Fill
No
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 255/255/255 (white)
Alignment
Center
Wrap Text
Yes
Show Border
No
Show Fill
No
Font
Verdana
Font Type
Bold
Font Size
12
Font Color
RGB 187/209/243
Alignment
Left
Layout
Show Button Background
No
Text
Font
Verdana
Font Type
Bold, Underlined
Font Size
10
Font Color
RGB 255/255/255 (white)
Alignment
Left
Layout
Text
Hyperlink Text URL Button
38

Components
Version: 1.1
Standards
Wrap Text
Text
Label
Hyperlink
group Header
Text
Property
Page 38 of 92

Side Bar Detail
Type
Xcelsius
Component
Type
Property
Group
Labels
Search
Function
Buttons
Search
Connection
Refresh
RGB 255/255/255 (white)
Pressed Color
RGB 255/255/255 (white)
Yes
Transparency
0%
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 1/72/128
Alignment
Center
Default Color
RGB 255/255/255 (white)
Pressed Color
RGB 255/255/255 (white)
Default Color
RGB 255/255/255 (white)
Pressed Color
RGB 1/72/128
Font
Verdana
Font Type
Regular
Font Size
13
Font Color
RGB 1/72/128
Alignment
Left
Color
Background Color
RGB 255/255/255 (white)
Layout
Yes
Text
Font
Verdana
Font Type
Bold
Layout
Button Color
Labels
View Function
Button
39
Input Text
URL Button
Text

Components
Version: 1.1
Standards
Default Color
Text
Input Text
Area
Property
Page 39 of 92

Side Bar Detail
Type
Xcelsius
Component
Type
Property
Group
10
Font Color
RGB 1/72/128
Alignment
Center
Default Color
RGB 255/255/255 (white)
Pressed Color
RGB 255/255/255 (white)
Default Color
RGB 255/255/255 (white)
Pressed Color
RGB 1/72/128
Layout
Transparency
100%
Title Text
Font
Verdana
Font Type
Regular
Font Size
14
Font Color
RGB 1/72/128
Font
Verdana
Font Type
Regular
Font Size
13
Font Color
RGB 1/72/128
Default Color
RGB 1/72/128
Over Color
RGB 1/72/128
Selected Color
RGB 255/255/255 (white)
Default Color
RGB 255/255/255 (white)
Over Color
RGB 224/224/224
Selected Color
RGB 101/153/203
Labels
List Box
Labels Text
Labels
Label
Backgrounds
40

Components
Version: 1.1
Standards
Font Size
Button Color
Search
Results
Display
Property
Page 40 of 92

Side Bar Detail
Type
Xcelsius
Component
Type
Property
Group
Scroll Bar
Property
Standards
Track Color
RGB 245/245/245
Thumb Color
RGB 101/153/203
Button Color
RGB 245/245/245
Button Symbol Color
RGB 101/153/203
5.6 Body
5.6.1 Body Layout
The Body area consists of one or more visualization panes which display IVA KPIs via table,
graph, chart, or indicators. The layout of the components depends on the specific use case and
workflow required for the IVA solution.
General recommendation is not to exceed four (4) components within the Body area, as shown in
the below figure.
Figure 29: Recommended Visualization Pane Layout within Body Area
5.6.2 General Body Layout Guidelines

As a rule, when you are viewing a dashboard, your eyes should be drawn to the information that
is most important. Follow the layout guidelines below for effective visualization design:
Most important information should be on the top left and highlight important information
41

Components
Version: 1.1
Page 41 of 92
Figure 30: Example of 4-pane layout with a pop-out secondary window (Source: Stephen Few)
Workflow and dynamic visualization within a single Body area follows in the following
directions in general:
o From Top to bottom
o From Left to right
Hence the landing visualization usually is placed on the top left quadrant of the Body
Grouping of Visualizations
o Arrange and group related visualizations
o Use gray border for group container
Chart Borders
o Do not use outer border for combo, bar, and line charts within a group container
o Use outer border for pie chart
Chart Colors
o For combo, bar, and line charts in which number of data series are between 1
and 3, use the following three as the standard colors:
Blue actual measure
Green target measure
Gold secondary measure
o For pie chart, since the number of slices to be included in the chart is usually
dynamic, use default colors based on the Elan color theme. If necessary, use
SAP secondary colors (e.g. Dove, Petrol, Warm Red, etc.).
o Choose colors thoroughly depending on what you are trying to convey. For
example, if youre trying to convey attention, use colors that are hot like red and if
youre trying to make it less visible, use cooler colors.
Other
o Avoid scroll bars; If the contents to be displayed is too large, consider use of
WebI report instead
o Avoid use of tabs as much as possible; tabs increase the SWF file size and
affects performance
o Use click box for display/hide of additional contents/data points
o Add addition information around visualization like legend, dates, thresholds, etc.
42

Components
Version: 1.1
Page 42 of 92
o
o
o
o
Choose the right graph in order to display appropriate data i.e. bar chart vs. pie
chart
Do not clutter the visualization with useless decoration
Deliver information in summaries and exceptions to highlight pertinent data
Choose the right text. For example, Verdana is great for dashboards that are
viewed via browser
Figure 31: Examples of fine and poor legibility (Source: Stephen Few)
For additional resources and references for visualization best practices, refer to the reference list
in Appendix A.
5.6.3 List of Components Included in Body

Although each IVA may include different set of visualizations, the following is the list of
visualization components generally included and standardized in IVA:
Visualization
Component
Example
Title Bar
Background
N/A
KPI Table
43

Components
Version: 1.1
Page 43 of 92

Visualization
Component
Example
Combo Chart
Column Chart
44

Components
Version: 1.1
Page 44 of 92

Visualization
Component
Example
Bar Chart
Stacked Column/Bar
Chart
45

Components
Version: 1.1
Page 45 of 92

Visualization
Component
Example
Line Chart
Pie Chart
46

Components
Version: 1.1
Page 46 of 92

Visualization
Component
Example
What If
Alerts
Trends
Drop Down List
Tabs
Click Box
Radio Button
47

Components
Version: 1.1
Page 47 of 92

Visualization
Component
Example
Detail Report Link
5.6.4 Title Bar Properties
Figure 32: Example of a Title Bar
Xcelsius
Component
Type
Background
Label
Property
Standards
Background Color
RGB 150/177/249
Transparency
0%
Border Scale
100%
Font
Verdana
Font Style
Bold
Font Size
12
Alignment
Left
5.6.5 Background Properties

Xcelsius
Component
Type
Background
48
Property
Standards
Background Color
RGB 255/255/255 (white)
Transparency
0%
Border Scale
100%

Components
Version: 1.1
Page 48 of 92
5.6.6 KPI Table Properties
Figure 33: Example of a KPI Table
Xcelsius
Component
Type
Spreadsheet
Table
Property Group
Property
Standards
Layout
Show Gridlines
Yes
Color
Gridline Color
1/72/128
Color Rows
Over Color
RGB 224/224/224
Selected Color
RGB 101/153/203
Track Color
RGB 245/245/245
Thumb Color
RGB 101/153/203
Button Color
RGB 245/245/245
Button Symbol Color
RGB 101/153/203
Font
Verdana
Font Type
Regular
Font Size
10
Font Color
Automatic (black)
Scroll Bar
Font
(Defined in the
Excel sheet)
49

Components
Version: 1.1
Page 49 of 92
5.6.7 Combo Chart Properties
Figure 34: Example of a Combo Chart
5.6.7.1 Combo Chart Layout
Figure 35: Combo Chart Layout Settings
50

Components
Version: 1.1
Page 50 of 92
5.6.7.2 Combo Chart Series
Figure 36: Combo Chart Series Settings and Color Panel
The series type, shape, and colors are set as follows:

Series
Type
Shape
Line
Fill
Series 1
Column
N/A
N/A
RGB 1/72/128
Series 2
Line
Circle
RGB 146/208/80
RGB 146/208/80
Series 3
Line
Circle
RGB 255/192/0
RGB 255/192/0
(not shown
above)
51

Components
Version: 1.1
Page 51 of 92
Figure 37: Combo Chart Series Settings and Relationship to the Sample
The column and line settings are as follows:
52
Marker Size Transparency Enable Markers
Notes
Column
25
0%
N/A
Marker Size can also depend

on the number of series
Line
25
0%
Yes

Components
Version: 1.1
Page 52 of 92
5.6.7.3 Combo Chart Axes
Figure 38: Combo Chart Axes Settings
Axes are set as follow:

Axes
53
Line Color
Thickness
Vertical Axis
RGB 0/0/0
Horizontal
RGB 0/0/0
Horizontal Gridlines Major
RGB 236/236/236
Horizontal Gridlines Major
RGB 236/236/236

Components
Version: 1.1
Page 53 of 92
5.6.7.4 Combo Chart Texts
Figure 39: Combo Chart and Text Settings
Text Type
ALL TEXTS
Chart Title
Sub Title
Horizontal (Category) Axis Title

Horizontal (Category) Axis Labels
54
Property
Standards
Font
Verdana
Font Color
RGB 0/0/0
Font Type
Bold
Font Size
12
Alignment
Center
Font Type
Bold
Font Size
10
Alignment
Center
Font
Verdana
Font Type
Bold

Components
Version: 1.1
Page 54 of 92

Vertical (Category) Axis Title
Font Size
10
Vertical (Category) Axis Labels

Legend
Mouse-Over Values
5.6.8 Column Chart Properties
Figure 40: Example of a Column Chart
5.6.8.1 Column Chart Layout

Please see section 5.3.6.1 Combo Chart Layout for the standard.
5.6.8.2 Column Chart Series

The series colors and marker size are set as follows:
Series
Fill
Marker Size
Transparency
Series 1
RGB 255/192/0
25
0%
Series 2
RGB 1/72/128
5.6.8.3 Column Chart Axes

Please see section 5.3.6.3 Combo Chart Axes for the standard.
5.6.8.4 Column Chart Texts

Please see section 5.3.6.4 Combo Chart Texts for the standard.
55

Components
Version: 1.1
Page 55 of 92
5.6.9 Bar Chart Properties
Figure 41: Example of a Bar Chart
Please refer to section 5.3.7 Column Chart Properties for the layout series, axes, and text
standard.
5.6.10
Stacked Column/Bar Chart Properties
Figure 42: Example of a Stacked Column Chart
5.6.10.1
Stack Column/Bar Chart Layout
5.6.10.2
Stack Column/Bar Chart Series
The series fill colors are set as follows:

Series
56
Fill

Components
Version: 1.1
Page 56 of 92

Series 1
RGB 1/72/128
Series 2
RGB 255/192/0
Series 3
RGB 255/192/0
Additional Use SAP Color Scheme as the selection guide

Series
5.6.10.3
Stack Bar Chart Axes
5.6.10.4
Stack Bar Chart Texts
5.6.11
Line Chart Properties
Figure 43: Example of a Line Chart
5.6.11.1
Line Chart Layout
5.6.11.2
Line Chart Series
The series colors and marker size are set as follows:

Series
57
Shape
Line
Fill

Components
Version: 1.1
Page 57 of 92

Series 1
Square
RGB 1/72/128
RGB 1/72/128
Series 2
Circle
RGB 255/192/0
RGB 255/192/0
Series 3
Star
Varies
Same as Line
5.6.11.3
Column Chart Axes
5.6.11.4
Column Chart Texts
5.6.11.5
Line Chart Series
5.6.12
Pie Chart Properties
Figure 44: Example of a Pie Chart
58

Components
Version: 1.1
Page 58 of 92
5.6.12.1
Pie Chart Layout
Figure 45: Pie Chart Layout Settings
5.6.12.2
Pie Chart Series
Use default color Xcelsius selects based on the color theme, unless you know that the pie chart
always include x number of colors. Use standard set of colors used in other charts in conjunction
with SAP color scheme in selecting colors for each data point.
5.6.12.3
Pie Chart Texts
Refer to Section 5.3.6 for the Chart Text standard.
59

Components
Version: 1.1
Page 59 of 92
5.6.13
What-If Properties
Figure 46: Example of a What-If
Xcelsius
Component
Type
Background
Label
Spreadsheet
Table
60
Property Group
General
Property
Standards
Background Color
RGB 255/255/255 (white)
Transparency
0%
Border Scale
100%
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 10/15/20
Alignment
Center
Layout
Show Gridlines
Yes
Color
Gridline Color
RGB 52/75/109
Color Rows
Over Color
RGB 150/168/195
Text

Components
Version: 1.1
Page 60 of 92

Xcelsius
Component
Type
Property Group
RGB 52/75/109
Track Color
RGB 255/255/255 (white)
Thumb Color
RGB 150/168/195
Button Color
RGB 255/255/255 (white)
Button Symbol Color
RGB 0/0/0
Layout
Enable Ticks
Yes; Auto Scale
Text - Title
Font
Verdana
Font Type
Bold
Font Size
12
Font Color
RGB 0/0/0
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 0/0/0
Marker Color
RGB 240/171/0
Track Color
RGB 255/255/255 (white)
Tick Color
RGB 111/119/119
Text - Value
Color
5.6.14
61
Standards
Selected Color
Scroll Bar
Horizontal
Slider
Property
Alerts Properties

Components
Version: 1.1
Page 61 of 92

Figure 47: Example of Alerts
Xcelsius
Component
Type
Icon
5.6.15
Property Group
Alerts
Property
Standards
Red Alert Color
RGB 255/0/0 (Xcelsius default)
Yellow Alert Color
Green Alert Color
Trends Properties
Figure 48: Example of Trends
Xcelsius
Component
Type
Trend Icon
Property Group
Colors
Property
Standards
Positive Value Color

(Green)
RGB 0/176/80
Zero Value Color

(Yellow)
(Default Green Makes it easier to

read the arrow compared with the
green used in alerts)
Negative Value Color RGB 255/0/0 (Xcelsius default)

(Red)
5.6.16
Drop Down Properties
Figure 49: Example of Drop Down List
The standards for Drop Down within Body area are the same as the Drop Down standard
included in the Header area. Please refer to section 5.2.3.2, Header Detail Properties of this
document.
62

Components
Version: 1.1
Page 62 of 92
5.6.17
Tab Properties
Figure 50: Example of Tabs
Xcelsius
Component
Type
Label Based
Menu
Property Group
Layout
Transparency
0%
Font
Verdana
Font Type
Regular
Font Size
10
Font Color
RGB 0/0/0
Alignment
Center
Font
Verdana
Font Type
Bold
Font Size
11
Font Color
RGB 0/0/0
Alignment
Center
General
Tab Alignment
Left
Labels
Font
Verdana
Font Type
Bold
Font Size
12
Font Color
RGB 0/0/0
Background Color
RGB 255/255/255
Labels
Color
63
Standards
Button Separation
Text Title
Tab Set
Container
Property

Components
Version: 1.1
Page 63 of 92

Xcelsius
Component
Type
Property Group
Property
Standards
Tab Background
Over Color
RGB 255/255/255
Tab Background
Selected Color
RGB 101/153/203
Labels Default
Color
RGB 0/0/0
Labels Over Color
RGB 1/72/128
This option is valid only when you

have more than 2 tabs
Note: This option in Xcelsius does not

seem to work.
Labels Selected
Color
5.6.18
RGB 0/0/0
This option in Xcelsius does not seem
to work.
Click Box Properties
Figure 51: Example of a Click Box
Xcelsius
Component
Type
Check Box
5.6.19
Property Group
Text Title
Property
Standards
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 0/0/0
Radio Button Properties
Figure 52: Example of Radio Buttons
64

Components
Version: 1.1
Page 64 of 92
Xcelsius
Component
Type
Radio Button
Property Group
Layout
Text Labels
Color - Marker
5.6.20
Property
Standards
Marker size
18
Horizontal Margin
Vertical Margin
Enable Background
No
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 0/0/0
Default Color
RGB 216/216/216
Selected Color
RGB 1/72/128
Detail Report Link Properties
Figure 53: Example of a Detail Report Link
Xcelsius
Component
Type
URL Button
65
Property Group
Property
Standards
Layout
Show Background
Yes
Text Label
Font
Verdana
Font Type
Bold
Font Size
10
Font Color
RGB 0/0/0

Components
Version: 1.1
Page 65 of 92
Color Button
Color Labels
66
Alignment
Center
Default Color
RGB 255/255/255 (white)
Selected Color
RGB 255/255/255 (white)
Default Color
RGB 0/0/0
Selected Color
RGB 255/255/255 (white)

Components
Version: 1.1
Page 66 of 92
6 Web Intelligence Standards

This section explains the UI standards for Web Intelligence (WebI) reports. WebI reports are
used for detail-level analysis within IVA. A WebI report is called by Xcelsius (via URL buttons and
OpenDoc function) and opens up as a separate window.
Figure 54: Example of a WebI Report
Since this is not displayed within the dashboard framework as well as the construction is done
within WebI application, WebI reports uses own layout and other standards as described in this
section.
6.1 WebI Report Layout

6.1.1 First Page Layout
The layout used for the first page of the report includes report title section which is not included in
the subsequent pages.
67

Components
Version: 1.1
Page 67 of 92
Figure 55: WebI Report First Page Layout
Callout
Name
Page Header
Description
The page header for the page. This section includes SAP and IVA
branding.
Page Header is repeated in every page.
Report Title
The report title for the report that includes the name of the report and
other report-level information.
Report Title only appears on the first page of the report
Section Header The Section Header is the name of the dimension for which Report Body
is sliced by.
Section Header appears on the top of every report section.
Alternatively, Section Header is used as the title section for the Report
Body.
D
Report Body
The Report Body includes charts and tables for the given section header.
Page Footer
The page footer for the page. This section run date and page number.
Page Footer is repeated in every page.
From the WebI structure point of view, heres the example:
68

Components
Version: 1.1
Page 68 of 92
Figure 56: Example of WebI Structure View for a First Page
6.1.2 Subsequent Page Layout

The layout used for the subsequent pages of the report is as follows. Please refer to the above
section for the definitions.
69

Components
Version: 1.1
Page 69 of 92
Figure 57: WebI Report Subsequent Page Layout
6.2 Page Header

Figure 58: Example of a Page Header
Page Header includes the following three elements:

Report Header (native to WebI)
SAP Branding
IVA Branding
6.2.1 Report Header Properties

WebI Object
Type
Property Group
Report Header Appearance

and Footer
Page Layout
Property
Standards
Background Color
RGB 255/153/0
Top Margin
20 px
Bottom Margin
Left Margin
Right Margin
Page Orientation
70
Landscape

Components
Version: 1.1
Page 70 of 92

Show Page Header
Yes
Show Page Footer

Header Height
37 px
Footer Height
6.2.2 SAP Branding Properties

WebI Object
Type
Property Group
Free-Standing Display
Cell
(Blank)
Relative Position
Property
Standards
Width
55 px
Height
21 px
Left Edge
5 px
Top edge
4 px
6.2.3 IVA Branding Properties

WebI Object
Type
Property Group
Cell
(Blank)
Text Format
Relative Position
71
Property
Standards
Width
Depends on the IVA names length
Height
21 px
Font
Arial, 10, Regular
Text Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Left Edge
61 px
Top edge
4 px

Components
Version: 1.1
Page 71 of 92
6.3 Report Title
Figure 59: Example of a Report Subtitle
Page Header includes the following two elements:

Report Title
Report Subtitle
6.3.1 Report Title Properties

WebI
Template Type
Property Group
Cell
(Blank)
Text Format
Relative Position
Property
Standards
Width
Depends on the text length
Height
26 px
Font
Arial, 8, Regular
Font Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Left Edge
10 px
Top edge
37 px
6.3.2 Report Subtitle Properties

WebI
Template Type
Property Group
Cell
(Blank)
Text Format
72
Property
Standards
Width
Depends on the text length
Height
42 px
Font
Arial, 12, Bold
Font Color
RGB 0/0/0

Components
Version: 1.1
Page 72 of 92

WebI
Template Type
Property Group
Relative Position
Property
Standards
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Left Edge
10 px
Top edge
37 px
6.4 Section Header
Figure 60: Example of a Section Header
Section Header includes the following:

Section Header Bar
6.4.1 Section Header Bar Properties

WebI
Template Type
Property Group
Cell
(Blank)
Text Format
73
Property
Standards
Width
986 px
Height
24 px
Font
Arial, 9, Bold
Font Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Background Color
RGB 255/204/0

Components
Version: 1.1
Page 73 of 92

WebI
Template Type
Property Group
Relative Position
Property
Standards
Left Edge
12 px
Top edge
12 px
6.5 Report Body
Figure 61: Example of a Report Body
6.5.1 List of Visualization Included in Report Body

Although each WebI report may include different set of visualizations (charts, graphs, and tables),
the following is the list of visualizations generally included and standardized in WebI reports:
Visualization
Example
Column Chart
74

Components
Version: 1.1
Page 74 of 92

Visualization
Example
Bar Chart
Stacked Column Chart
Pie Chart
Table and Cross Tab
6.5.2 Color Palette

For all the charts/graphs included in this standard, the color for the data uses the following color
palette available within WebI:
75

Components
Version: 1.1
Page 75 of 92
Figure 62: WebI Color Palette Used
The first three colors (Blue, Orange, and Green), used most common in the charts and graphs,
are defined as follows:
Color
Fill
Blue
RGB 58/101/152
Orange
Green
239/162/82
RGB 0/148/112
6.5.3 Column Chart, Bar Chart, and Stacked Column Chart Properties
Column, bar, and stacked column charts all share the same standard. Column chart uses WebI
named called Vertical Grouped Bar Chart, while the bar char uses WebI template named Vertical
Groped Bar Chart. Stacked column chart uses WebI template named Vertical Stacked bar chart.
Both column and bar chart may include either single data point (as shown in the bar chart
example below) or multiple data points (as shown in the column chart example below). Include
chart legend when the chart includes multiple data points.
76

Components
Version: 1.1
Page 76 of 92
Stacked bar chart will always include multiple dimensions for the x axis, so legend must be
included.
Inclusion of chart title and X and Y axis titles are optional, depending on the report requirements.
Figure 63: Example of a Column Chart
Figure 64: Example of a Bar Chart
Figure 65: Example of a Stacked Column Chart
WebI
Template Type
Bar Chart Vertical
Grouped
Bar Chart -
77
Property Group
Property
Standards
Display
ALL
Depends on the requirement, including

the size. The size will mainly depend
on what other charts and tables are
included in the Report Body.
Appearance
Show Floor
Yes

Components
Version: 1.1
Page 77 of 92

WebI
Template Type
Property Group
Vertical
Grouped
Legend
Property
Standards
Floor Color
RGB 240/240/244
Show
Column/bar chart: If more than single

series, then Yes
Stacked column chart: Yes
Legend Title
Legend Values
Title
Data
Position
Right
Text Format
Arial, 12, Bold
Color
RGB 0/0/0
Text Format
Arial, 12, Bold
Text Color
RGB 0/0/0
Text Format
Arial, 12, Bold
Text Color
RGB 0/0/0
Enable
Depends
Text Format
Arial, 12, Bold
Text Color
RGB 0/0/0
Palette
See Section 6.5.1.1 above
Border Color
If single series: RGB 51/51/153

If multiple series: RGB 51/102/255
X Axis
Y Axis
78
Values
Yes
Text Format
Arial, 8, Regular
Text Color
RGB 0/0/0
Grid
Yes
Show Markers
Yes
Grid Color
RGB 179/179/201
Values
Yes

Components
Version: 1.1
Page 78 of 92

WebI
Template Type
Property Group
X and Y Axis Label
Page Layout
Property
Standards
Text Format
Arial, 8, Regular
Text Color
RGB 0/0/0
Enable
Depends
Text Format
Arial, 10, Bold
Text Color
RGB 0/0/0
Relative Position
Varies depending on other

visualizations placed on the Report
Body.
6.5.4 Pie Chart Properties
Figure 66: Example of a Pie Chart
WebI
Template Type
Pie
79
Property Group
Property
Standards
Display
ALL
Depends on the requirement, including

the size. The size will mainly depend
on what other charts and tables are
included in the Report Body.
Appearance
Show Floor
No
Legend
Show
Yes
Position
Right
Text Format
Arial, 12, Bold
Color
RGB 0/0/0

Components
Version: 1.1
Page 79 of 92

WebI
Template Type
Property Group
Legend Title
Legend Values
Title
Data
Y Axis
Page Layout
Property
Standards
Text Format
Arial, 12, Bold
Text Color
RGB 0/0/0
Text Format
Arial, 8, regular
Text Color
RGB 0/0/0
Enable
Depends
Text Format
Arial, 12, Bold
Text Color
RGB 0/0/0
Palette
See Section 6.5.1.1 above
Border Color
RGB 102/102/153
Enable
Depends
Text Format
Arial, 10, Bold
Text Color
RGB 0/0/0
Relative Position

Body.
6.5.5 Table and Cross Tab Chart Properties
Figure 67: Example of a Table
WebI
Template Type
Horizontal
Table
80
Property Group
Header Cells
Property
Standards
Text Format
Arial, 9, Bold
Text Color
RGB 255/255/255

Components
Version: 1.1
Page 80 of 92

WebI
Template Type
Property Group
Vertical Table
Crosstab
Body Cells
Footer Cells
Alternate
Row/Column Colors
Page Layout
81
Property
Standards
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Background Color
RGB 81/117/185
Text Format
Arial, 9, Regular
Text Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Background color
RGB 255/255/255
Text Format
Arial, 9, Regular
Text Color
RGB 0/0/0
Vertical Text
Alignment
Canter
Horizontal Text
Alignment
Left
Background color
RGB 255/255/255
Frequency
Color
RGB 240/240/240
Text Color
RGB 0/0/0
Relative Position

Body.

Components
Version: 1.1
Page 81 of 92
6.6 Page Footer
Figure 68: Example of a Page Footer
Page Header includes the following three elements:

Report Footer (native to WebI)
Run Date
Page Number
6.6.1 Report Footer Properties

Report Footer properties are set along with Report Header. Please refer to section 6.2.1. Report
Header.
6.6.2 Run Date Properties

WebI
Template Type
82
Property Group
Property
Standards

Components
Version: 1.1
Page 82 of 92

WebI
Template Type
Last Refresh
Date
Property Group
Display
Text Format
Relative Position
Property
Standards
Width
108 px
Height
21 px
Font
Arial, 8, Regular
Text Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Left
Left Edge
6 px
Top edge
6 px
6.6.3 Page Number Properties

WebI
Template Type
Property Group
Page Number/ Display

Total Pages
Text Format
Relative Position
83
Property
Standards
Width
108 px
Height
21 px
Font
Arial, 8, Regular
Text Color
RGB 0/0/0
Vertical Text
Alignment
Bottom
Horizontal Text
Alignment
Right
Left Edge
878 px
Top edge
8 px

Components
Version: 1.1
Page 83 of 92
FOR NTERNAL USE ONLY
Appendix A: References and Resources

A.1 IVA Development Methodology
The following are the list of documents for the IVA standard design and development
methodology:
IVA Development Process Overview
(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/61c0cd81-0117-2c10-dc9cc140d4b771f2)
o
Set of training materials (Webinars and PowerPoint slides) that explain the
overall IVA process and detailed explanations about ecosystem and
stakeholders. It also includes step-by-step training on Governance and Launch
activities.
Visioning Phase Training

(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/c0e49223-282d-2c10-239de935761ab537)
o
Set of training materials (Webinars and PowerPoint slides) that explain the
process, techniques, and templates used within the Visioning phase of the IVA
development
IVA Development At a Glance

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/611f3d76-746d-2c10-78b2c8a253a48155)
o
At a glance document that lists all necessary inputs and outputs (deliverables)
necessary for an IVA development from Governance phase to M2 Launch phase.
Architecture and Engineering Detailed Development Plan Template

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/71289eba-746d-2c10-3d87bd3179d388de)
o
Detailed development plan template for M1 and M2 development
IVA Reference Architecture (https://portal.wdf.sap.corp/irj/go/km/docs/guid/504ceea697ec-2b10-44aa-9dfad3c897fc)

o
IVA reference architecture slides This can be used as a template for the future
IVA architecture.
A.2 IVA Design and Development Templates

Vision Phase Synopsis Document Template
(https://portal.wdf.sap.corp/irj/go/km/docs/guid/20773b40-e468-2c10-46a0-ffa3642aadf5)
o
This document is used during the Visioning phase to capture Use Cases, KPIs,
and key dimensions to be included in IVA
Visualization Mock-Up Document Template

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0f438b9-98ec-2b10-84b5-9c66dd75171f)
84

Components
Version: 1.1
Page 84 of 92
This document includes a set of basic design pattern for the IVA visualization and
can be used as a future IVA mock-up template
Metadata Workbook (https://portal.wdf.sap.corp/irj/go/km/docs/guid/b08899ad-99ec2b10-f6bf-a470f5fd9859)

o
This document captures metadata information for KPIs and dimensions to be

included in IVA
Visualization Specification Template

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/5190f2d4-956d-2c10-81b6-97ab63efab9f
o
This document act as a template for defining visualization technical specifications

for IVA dashboards and reports.
Xcelsius Template (https://portal.wdf.sap.corp/irj/go/km/navigation/guid/100174fa-956d2c10-6aac-c88a2aecd18f)

o
Template XLF document that includes standard themes and canvas size.
IVA A&E Wrapper Sample/Template

(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/e04e8e40-516b-2c10-9a8ae940cf074808)
o
Sample code for the IVA A&E Wrapper
IVA Technical Development Standards and Best Practice

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/8008d84b-966d-2c10-a98aa417c208241a)
o
This document provides development standards (naming standards and

packaging standards) for used for M1 and M2 development
IVA Logo File (https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c105a8b-81ae9d050d26)

o
Adobe Photoshop file for the IVA logo

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-5a8b81ae9d050d26)
A.3 Visualization References and Tools

The following reference is used as an additional best practice reference for BI visualization
design:
6 BI Pitfalls and How to Avoid Them (http://www.informationmanagement.com/specialreports/2009_151/business_intelligence_bi_data_visualization10015710-1.html?ET=informationmgmt:e1039:2129501a:&st=email)
o
By Robert Kearse, published by Information Management. It describes data

visualization influences how users consume information. It is an external link:
Data Visualization Patters (https://portal.wdf.sap.corp/irj/go/km/docs/guid/8017c6c7516b-2c10-5a99-81b43b776c16)

o
85
Summary of dashboard design principles from Stephen Few's book, "Information

Dashboard Design."

Components
Version: 1.1
Page 85 of 92
Xcelsius Dashboard Design Best Practice

(https://portal.wdf.sap.corp/irj/go/km/docs/guid/809aa5f6-516b-2c10-d1bd93759647335e)
o
Presentation on visualization best practice using Xcelsius, compiled by Rich

Lewis (SAP).
Adobe Kuler (http://kuler.adobe.com/#null)

o
A free web-hosted application for generating and searching color themes.
Iconico ColorPic (http://www.iconico.com/colorpic/)

o
86
A free color picker tool.

Components
Version: 1.1
Page 86 of 92
INTERNAL
Appendix B: UI Standards in Action IVA Examples

This section provides a few of the IVA and other Xcelsius dashboard developed by Industry Analytics team using the UI standards illustrated in this
document.
87
Title: UI Standards for Industry Value Accelerators Front-End Components

Version: 1.1
Page 87 of 92
INTERNAL
Figure 69: SAP American Recovery and Reinvestment Act (ARRA) IVA M2
88

Version: 1.1
Page 88 of 92
INTERNAL
Figure 70: SAP Maximizing Customer Revenue and Retention (MCRR) IVA M1
89

Version: 1.1
Page 89 of 92
INTERNAL
Figure 71: SAP QatarGas IVA POC
90

Version: 1.1
Page 90 of 92
INTERNAL
Figure 72: Trade Promotion Effectiveness (TPE) integrated within SAP CRM Portal M2
91

Version: 1.1
Page 91 of 92
Copyright 2009 SAP AG. All Rights Reserved
No part of this publication may be reproduced or transmitted in any form or for any purpose without the
express permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components
of other software vendors.
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z,
System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390,
OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+,
POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System
Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,
Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM
Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of
Adobe Systems Incorporated in the United States and/or other countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web
Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented
and implemented by Netscape.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP
products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and
in other countries. Business Objects is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials are provided by SAP AG
and its affiliated companies ("SAP Group") for informational purposes only, without representation
or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to
the materials. The only warranties for SAP Group products and services are those that are set
forth in the express warranty statements accompanying such products and services, if any.
Nothing herein should be construed as constituting an additional warrant.

Components
Version: 1.1
Page 92 of 92

BI DashboardingUI Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BI DashboardingUI Guide

Uploaded by

Copyright:

Available Formats

UI GUIDELINES

Industry Value Accelerator Front-End

FOR INTERNAL USE ONLY

Who Should Use This Document..................................................................8

General Guiding Principals ...........................................................................8

IVA Development Methodology and Best Practices ...........................................9

Additional References and Resources ..............................................................10

IVA Framework Overview................................................................................ 11

Definition of M1 and M2 Builds ...................................................................11

Definition of IVA UI Framework...................................................................11

M1 Primary Window Tabbed Structure...........................................................12

M1 Primary Window Non-Tabbed Structure...................................................14

M2 Primary Window Tabbed Structure...........................................................16

M2 Primary Window Non-Tabbed Structure...................................................17

Dashboard Builder Standards ........................................................................ 21

Dashboard Builder Setup ............................................................................21

Navigation Region Standards .....................................................................22

Content Head Standards .............................................................................23

Navigation Region Standards .....................................................................25

Development Environment Setup Requirement ........................................27

Xcelsius Canvas Standards ........................................................................28

Configuration Standards for Viewer ..................................................................23

IVA HTML Wrapper Standards........................................................................ 25

Canvas Size and Theme.....................................................................................28

FOR INTERNAL USE ONLY

Content Region Standards..........................................................................29

Header Layout ....................................................................................................31

Title Properties ...................................................................................................32

Header Detail Properties ....................................................................................32

Side Bar ........................................................................................................35

Side Bar Background Properties .......................................................................35

Side Bar Layout ..................................................................................................35

SAP IVA Branding Properties ............................................................................36

IVA Logo Properties ...........................................................................................37

Side Bar Detail Properties..................................................................................37

Body Layout .......................................................................................................41

General Body Layout Guidelines.......................................................................41

List of Components Included in Body...............................................................43

Title Bar Properties ............................................................................................48

Background Properties ......................................................................................48

KPI Table Properties...........................................................................................49

Combo Chart Properties ....................................................................................50

Combo Chart Layout ....................................................................................50

Combo Chart Series.....................................................................................51

Combo Chart Axes.......................................................................................53

Combo Chart Texts ......................................................................................54

Column Chart Properties ...................................................................................55

Column Chart Layout ...................................................................................55

Column Chart Series....................................................................................55

Column Chart Axes ......................................................................................55

Column Chart Texts .....................................................................................55

Bar Chart Properties...........................................................................................56

Stacked Column/Bar Chart Properties ..............................................................56

Stack Column/Bar Chart Layout ...................................................................56

Stack Column/Bar Chart Series....................................................................56

Title: UI Standards for Industry Value Accelerators Front-End

FOR INTERNAL USE ONLY

Stack Bar Chart Axes...................................................................................57

Stack Bar Chart Texts ..................................................................................57

Line Chart Layout.........................................................................................57

Line Chart Series .........................................................................................57

Column Chart Axes ......................................................................................58

Column Chart Texts .....................................................................................58

Line Chart Series .........................................................................................58