bi dashboardingui guide

UI GUIDELINES

Industry Value Accelerator Front-EndAuthors:Michael SanjongcoYouko Watari

August, 2009 Version 1

FOR INTERNAL USE ONLY


Title: UI Standards for Industry Value Accelerators Front-EndComponents

Version: 1.1

of 922

Table of Contents:

Versions..................................................................................................................... 6Open Issues............................................................................................................... 71 Overview............................................................................................................. 8

1.1 Who Should Use This Document..................................................................81.2 Prerequisites ..................................................................................................81.3 General Guiding Principals ...........................................................................8

1.3.1 Design Standards.................................................................................................81.3.2 IVA Development Methodology and Best Practices ...........................................9

1.3.3 Additional References and Resources..............................................................102 IVA Framework Overview................................................................................ 11

2.1 Definition of M1 and M2 Builds ...................................................................112.2 Definition of IVA UI Framework...................................................................112.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 Navigation ....................................................................................................172.4.1 Navigation – Tabbed...........................................................................................17

2.4.2 Navigation – Non-Tabbed...................................................................................193 Dashboard Builder Standards ........................................................................ 21

3.1 Dashboard Builder Setup............................................................................213.2 Navigation Region Standards .....................................................................223.3 Content Head Standards .............................................................................23

3.3.1 Configuration Standards for Viewer..................................................................234 IVA HTML Wrapper Standards........................................................................ 25

4.1 Navigation Region Standards .....................................................................255 Xcelsius Standards.......................................................................................... 26

5.1 Development Environment Setup Requirement ........................................275.2 Xcelsius Canvas Standards ........................................................................28

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



Version: 1.1

of 923

5.2.2 Canvas Properties..............................................................................................29

5.3 Content Region Standards..........................................................................295.3.1 Xcelsius Framework...........................................................................................29

5.4 Header ..........................................................................................................315.4.1 Header Layout ....................................................................................................31

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

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

5.5 Side Bar........................................................................................................355.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 .............................................................................................................415.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



Version: 1.1

of 924

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

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

5.6.11 Line Chart Properties .........................................................................................57

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.............................................................................656 Web Intelligence Standards............................................................................ 67

6.1 WebI Report Layout .....................................................................................676.1.1 First Page Layout ...............................................................................................67

6.1.2 Subsequent Page Layout...................................................................................69

6.2 Page Header.................................................................................................706.2.1 Report Header Properties ..................................................................................70

6.2.2 SAP Branding Properties...................................................................................71

6.2.3 IVA Branding Properties ....................................................................................71

6.3 Report Title...................................................................................................726.3.1 Report Title Properties.......................................................................................72

6.3.2 Report Subtitle Properties .................................................................................72

6.4 Section Header.............................................................................................736.4.1 Section Header Bar Properties ..........................................................................73

6.5 Report Body .................................................................................................74



Version: 1.1

of 925

6.5.1 List of Visualization Included in Report Body...................................................746.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..................................................................................................826.6.1 Report Footer Properties ...................................................................................82

6.6.2 Run Date Properties ...........................................................................................82

6.6.3 Page Number Properties....................................................................................83Appendix A: References and Resources.............................................................. 84

A.1 IVA Development Methodology ..................................................................84A.2 IVA Design and Development Templates...................................................84A.3 Visualization References and Tools ...........................................................85

Appendix B: UI Standards in Action – IVA Examples.......................................... 87



Version: 1.1

of 926

VersionsQ2, 2009 Version 1 – First version

08/18/2009 V1.1

Added a screenshot of TPE integrated withinCRM



Version: 1.1

of 927

Open IssuesDate 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 M1and determine specific UI standards thatwill be applied

WIP

7/1/2009 Need to include CRM/TPEexample

Show how IVA can be integrated withinSAP Portal.

WIP

Text in orange: Topics that are still under discussion and may or may not change



Version: 1.1

of 928

1 OverviewThis document defines the User Interface (UI) guidelines for designing and deploying IndustryValue Accelerator (IVA) front-end components (“dashboard”). These guidelines mainly cater toIVA built in Xcelsius, SAP BusinessObjects (SBO) Dashboard Builder, SAP BusinessObjectsWeb Intelligence and SAP Portal.

1.1 Who Should Use This DocumentThe 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-salesconsulting 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 withM1 and/or M2 build activities

Please see the section 2.1, Definition of M1 and M2 Builds for more explanation of what M1 andM2 build are.

1.2 PrerequisitesThis document assumes that the reader of this document has a working knowledge of the specificSAP 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 layoutstandards and specifics are set up within the tools mentioned above. For more information on thespecific product functionality mentioned in this document and how to use the functionality, pleaserefer to the User’s Guide for the particular product.

It also assumes that the reader is familiar with the IVA solution architecture and developmentmethodology.

1.3 General Guiding Principals

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



Version: 1.1

of 929

General UI Standard and Guidelines – This UI Standard document follows the generalguidelines described in the SAP User Interface Standards.

Color Scheme – The basic set of colors (e.g. use of blue, gold, and gray as primarycolors) in this UI Standard document follows the standard SAP color palette as defined inSAP Brand Tools by SAP Global Branding Team. In addition, we follow thecolor/gradation scheme used within SAP CRM.

confidential© SAP 2008 / Page 1© SAP 2007 / Page 1

Secondary color palette100%

Primary color palette100%

Definition and halftone values of colors

RGB 68/105/125

RGB 96/127/143

RGB 125/150/164

RGB 152/173/183

RGB 180/195/203

RGB 4/53/123 RGB 240/171/0 RGB 102/102/102RGB 153/153/153RGB 204/204/204

RGB 21/101/112

RGB 98/146/147

RGB 127/166/167

RGB 154/185/185

RGB 181/204/204

RGB 85/118/48

RGB 110/138/79

RGB 136/160/111

RGB 162/180/141

RGB 187/200/172

RGB 119/74/57

RGB 140/101/87

RGB 161/129/118

RGB 181/156/147

RGB 201/183/176

RGB 100/68/89

RGB 123/96/114

RGB 147/125/139

RGB 170/152/164

RGB 193/180/189

RGB 73/108/96

RGB 101/129/120

RGB 129/152/144

RGB 156/174/168

RGB 183/196/191

RGB 129/110/44

RGB 148/132/75

RGB 167/154/108

RGB 186/176/139

RGB 205/197/171

RGB 132/76/84

RGB 150/103/110

RGB 169/130/136

RGB 188/157/162

RGB 206/183/187

85%

70%

55%

40%

RGB 158/48/57Tertiary color palette100%

85%

70%

55%

40%

SAP Blue SAP Gold SAP Dark GraySAP GraySAP Light Gray

Dove Petrol Violet/MauveWarm RedWarm Green

Cool Green Ocher Warning RedCool Red

Figure 1: SAP Color Palette

1.3.2 IVA Development Methodology and Best PracticesFrom the project management and solution build point of view, the IVA Front-End build activitiesare defined in the following:

IVA Solution Development Methodology – This methodology defines the end-to-endprocess, tasks, deliverables, stakeholders, etc. for the IVA development. The M1 and M2build are key phases within this methodology.

Important Note: Specific Xcelsius visualization best practice (e.g. what type of chart issuitable to what type of analysis) is to be documented within the methodology. Hencethis document only includes those types of visualization that are included in the bestpractice.

IVA Architecture & Engineering M1 & M2 Process – This is a sub-set of the abovemethodology and further defines detail activities included in the M1 & M2 phases

IVA Architecture & Engineering Standards and Best Practices – This defines keyA&E development standards outside UI standards, such as naming convention, filingrules, packaging standards, and other development best practices



Version: 1.1

of 9210

Specific locations on where to find the above contents are included in the Appendix section of thisdocument.

1.3.3 Additional References and ResourcesWe have variety of additional reference and resources that help IVA Solution Managers andArchitect with understanding best practices in visualization design and Xcelsius design. Pleasesee Appendix A for the list of resources.



Version: 1.1

of 9211

2 IVA Framework Overview

2.1 Definition of M1 and M2 BuildsAn IVA solution is developed using aforementioned IVA Solution Development Methodology.Through the development process following the methodology, an IVA, as a physical technicalsolution 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 IVAto IVA’s specific industry stakeholder and further refine the use case for the IVA, andrefine requirements for the KPIs, visualization, and workflow. The data for M1 build isstatic and may be mocked up. In most cases, a M1 build consists of one or multiple SWFfiles generated from Xcelsius. Multiple SWF files are bundled together as a single tab-format dashboard rendered through HTML page. PDF mock-ups of Web Intelligencereports may be linked from the SWF.

M2 Build – It is a connected model and is a solution available to qualified SAP customersand partners for deployment. The data for M2 build is dynamic sourced from SAP BW orother data sources. In most cases, a M2 front- end build consists of one or multiple SWFfiles generated from Xcelsius. Multiple SWF files are bundled together as a single tab-format dashboard using Dashboard developed via SBO Dashboard Builder and accessedvia InfoView. Refreshable Web Intelligence reports may be linked from the SWF.

2.2 Definition of IVA UI FrameworkIn general, the IVA UI Framework consists of following SAP BusinessObjects elements:

Dashboard tab structure via SAP BusinessObjects Dashboard Builder (M2 Build only) orSAP 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 andM2 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):



Version: 1.1

of 9212

Figure 2: Trade Promotion Effectiveness (TPE) IVA integrated within SAP CRM portal

2.3 Window TypesThis section describes the window types used within IVA and how the Framework above isapplied 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 inthe 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 theylog into the application and return to after interacting with other windows. A primarywindow is a window which contains information that is essential, important, or occurs firstin a sequence in the user's interaction with an application. There is only one primarywindow.Secondary Window: A secondary window is a child window and is opened from theprimary window or other secondary windows. In the context of IVA, a secondary windowcan be a window that is used for providing detailed level analysis via pop-up or a detailreport.

2.3.1 M1 Primary Window – Tabbed Structure



Version: 1.1

of 9213

Figure 3: M1 Primary Window Elements

Callout Name Description Tool (Format)

A NavigationRegion

The primary navigation for the IVA, in a tabstructure is displayed here.

IVA A&E Wrapper (HTML)

B ContentRegion

Content Region displays the content for theselected view. The branding is included inthis area.

Xcelsius (Flash)

Below is an example of a M1 primary window with tabs using IVA A&E Wrapper and Flash SWFfiles, run on Internet Explorer:



Version: 1.1

of 9214

Figure 4: Example of M1 Primary Window with Tabs

2.3.2 M1 Primary Window – Non-Tabbed StructureSome IVAs do not have contents across multiple tabs. In such a situation, the Navigation Regionabove (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:



Version: 1.1

of 9215

Figure 5: Example of M1 Primary Window without tabs

2.3.3 M1 Secondary WindowThere is no secondary window within M1 build. However, Content Region within the M1 buildmay contain a pop-up window or a link to a static Web Intelligence report. The specific standardsfor those elements are explained within Xcelsius Standards (for pop-up) and Web IntelligenceStandards (for Web Intelligence reports).



Version: 1.1

of 9216

Figure 6: Example of M1 Primary Window with a “pop-up”

2.3.4 M2 Primary Window – Tabbed Structure





Version: 1.1

of 9217

A NavigationRegion

The primary navigation for the IVA, in a tabstructure and menu structure for sub-pagesis displayed here.

SAP BusinessObjectsDashboard Builder(Dashboard)

B ContentHead

The Content Head contains the name of theContent area.


C ContentRegion


Xcelsius (Flash)

2.3.5 M2 Primary Window – Non-Tabbed StructureSome IVAs do not have contents across multiple tabs. In such a situation, the Navigation Regionand 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 NavigationThe navigation for IVAs varies based on the specific IVA’s use cases. Each IVA’s navigationsand workflow is defined within the IVA’s Visualization Mock-up document and VisualizationSpecification document. The following describes a general navigation used within the M1 and M2builds.

2.4.1 Navigation – TabbedThe following explains typical navigation for IVAs that includes multiple tabs.

The first tab in the primary window isenterprise/executive (or highest aggregateddimension) area. This should be the “at aglance” or summary KPI area where theanalysis starts.

Summary KPI table is placed upper left of theContent Region.



Version: 1.1

of 9218

Clicking on one of the KPIs on the KPI table willdynamically change the display for the othercharts/tables/graphs on the tab to displaycorresponding measures and dimensions fordetail-level analysis.

Some of the detail level analysis may include aradio button or check box that allows additionalmeasure(s) to be displayed.

Use the Navigation Region to do furtheranalysis specific to certain business/subjectarea. The navigation within a business/subjectarea is similar to the enterprise/executive area.



Version: 1.1

of 9219

2.4.2 Navigation – Non-Tabbed

The first view of the primary window isenterprise/executive (or highest aggregateddimension) area.

Summary KPI table is placed upper left of theContent Region.

Clicking on one of the KPIs on the KPI table willdynamically change the display for the othercharts/tables/graphs on the tab to displaycorresponding measures and dimensions fordetail-level analysis.

Additional visualization can be displayed by theuse of radio buttons or click boxes.



Version: 1.1

of 9220

Fisheye or drop down list on the header areaallows dimension-specific analysis.



Version: 1.1

of 9221

3 Dashboard Builder StandardsThis section explains the UI standards for the Navigation Region and Content Head using SAPBusinessObjects (SBO) Dashboard Builder (callouts A and B below). The standards for theContent Region are explained in section 5. Xcelsius Standard.



A NavigationRegion



B ContentHead



C ContentRegion


Xcelsius (Flash)

3.1 Dashboard Builder SetupThe default style for the Dashboard Builder should be set up as “Windows.” The followingstandards 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 CMCpreference function can allow setting different page style or creating a new style.



Version: 1.1

of 9222

Figure 9: Dashboard and Analytics Preference screen in CMC

3.2 Navigation Region StandardsThe Navigation Region contains two layers of navigation for IVA:

Figure 10: Navigation Region using SBO Dashboard Manager

Callout Name Dashboard Manager TechnicalFunctionality Used

UI Standard

A Tabs Dashboard Builder Tab function.

Use “Add a new tab” button to addadditional tabs.

Use standard product functionality tocreate tabs and set visualizationspecifications in terms of size, font,and color. No customizationsnecessary.

Some IVAs may require the first tabto have sub tabs. Default structureof Dashboard Builder’s first tab doesnot include sub tabs and does notallow sub tabs. Configure the firsttab so that second tab with sub tabswill be show as the display for thefirst tab.



Version: 1.1

of 9223


UI Standard

B Sub Tab Dashboard Builder Sub Tab function.

Use “Add a new sub tab” button toadd additional sub tabs.

Use standard product functionality tocreate sub tabs and set visualizationspecifications in terms of size, font,and color. No customizationsnecessary.

3.3 Content Head StandardsContent Head provides a heading title for the Content Region1 and acts as a container/viewer forthe Flash file developed via Xcelsius.

Figure 11: Content Head using SBO Dashboard Manager


UI Standard

A ContentTitle

Dashboard Builder’s Analytic Viewerfunction.

Use Analytic Toolkit for adding newViewer.

Use standard product functionalityto create viewer and setvisualization specifications interms of size, font, and color. Nocustomizations necessary.

3.3.1 Configuration Standards for ViewerUnder the “Content” configuration area for the Viewer, set “Document Retrieval Properties” as“Display document read from original document list only”

1 See “Xcelsius Standards” section of this document for the Content Region UI standards.



Version: 1.1

of 9224

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



Version: 1.1

of 9225

4 IVA HTML Wrapper StandardsThis section explains the Navigation Region using IVA HTM Wrapper (callout A below). Thestandards for the Content Region are explained in section 5. Xcelsius Standard.



A NavigationRegion



B ContentRegion


Xcelsius (Flash)

4.1 Navigation Region StandardsThe Navigation Region contains single layer of navigation for IVA, using HTML as a language tocreate 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 thehtml file. No further customization other than the tab names (specific to IVA) is necessary. Formore specific instructions on how to modify the tab names, please refer to the instructionsincluded in the Wrapper HTML package.



Version: 1.1

of 9226

5 Xcelsius StandardsThis section explains the UI standards for the Content Region using Xcelsius. As described insection 2.3 Window Types, the Content Region is defined as follows for M1 and M2:

M1 Primary Window



A NavigationRegion



B ContentRegion


Xcelsius (Flash)



Version: 1.1

of 9227

M2 Primary Window



A NavigationRegion



B ContentHead



C ContentRegion


Xcelsius (Flash)

5.1 Development Environment Setup RequirementThe screen resolution under the display property of your monitor on your developmentenvironment needs to be set up as 1280 by 768 pixels or more.



Version: 1.1

of 9228

5.2 Xcelsius Canvas StandardsXcelsius canvas defines the size and color of the outer frame of the Content Region. Standardsize for IVA is as follows:

5.2.1 Canvas Size and Theme

Property Standards

Width 1280 pixels

Height 768 pixels

Theme Elan

Default ColorScheme

Current Theme Colors

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



Version: 1.1

of 9229

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 FrameworkThe Content Region using Xcelsius contains the following sub areas:



Version: 1.1

of 9230

Figure 19: Xcelsius Framework


A Header Includes page header and primary contentnavigation for the IVA.


B Side Bar The Content Head contains the name of theContent area.


C Body Content Region displays the content for theselected view. The branding is included inthis area.

Xcelsius (Flash)

An example of Content Region based on the above framework using Xcelsius looks like below:



Version: 1.1

of 9231

Figure 20: Example of Content Region using Xcelsius

The following sections explain each component included in the framework and standards forXcelsius objects.

5.4 Header

5.4.1 Header Layout

Figure 21: Example of Header Area

Callout Name Description

A Title Title of the Content Region (dashboard page)

B HeaderDetail

(Optional)

Houses navigation component that allows dynamic visibility of the bodyarea within the Content Region. Also may include other components thatare global to the IVA.



Version: 1.1

of 9232

5.4.2 Title Properties

Figure 22: Example of Title within Header Area

XcelsiusComponent

Type

Property Standards

Background Color RGB 152/175/220

Transparency 0%

Background

Border Scale 100%

Font Verdana

Font Style Bold

Font Size 14

Label

Font Color RGB 0/0/0

Print Button Transparency 100%

5.4.3 Header Detail Properties

Figure 23: Examples of Header Detail within Header Area

XcelsiusComponent

Type

Property Group Property Standard



Version: 1.1

of 9233

XcelsiusComponent

Type


Sizing Method Scale

Width 125

Images

Height 60

Horizontal Margin 5Thumbnails

Vertical Margin 0

Background Color RGB 255/255/255 (white)

Fisheye2

Label Header Color RGB 255/255/255 (white)

Default Color RGB 255/255/255 (white)

Over Color RGB 255/255/255 (white)

Thumbnails

Selected Color 6658507;RGB 101/153/203

Number of LabelsDisplayed

5Layout

List Transparency 0 %

Font Verdana

Font Type Bold

Text - Title

Font Color RGB 0/0/0 (black)

Font Verdana

Font Type Bold

Text - Labels

Font Color RGB 0/0/0 (black)

Combo Box3

Color - Labels Default Color RGB 0/0/0 (black)

2 Size of the fisheye component is defined by the number of buttons included in the fisheye. Thenumber of buttons is driven by each IVA’s requirements.3 Size of Combo Box is defined by height of the background that fits the component.



Version: 1.1

of 9234

XcelsiusComponent

Type


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

Color – LabelBackgrounds

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

Color – Drop-DownButton

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)

Scroll Bar

Button Symbol Color RGB 0/0/0 (black)



Version: 1.1

of 9235

5.5 Side Bar

5.5.1 Side Bar Background Properties

XcelsiusComponent

Type

Property Standards


Transparency 0%

Background

Border Scale 100%

Figure 24: Side Bar Area

5.5.2 Side Bar Layout


A SAP IVABranding

The SAP logo and IVA branding area

B IVA Logo

(optional)

The IVA logo. The logo could be theparticular customer’s logo.

C Side BarDetails

External links and other industryspecific contents for the IVA



Version: 1.1

of 9236

Figure 25: Side Bar Layout

5.5.3 SAP IVA Branding Properties

Figure 26: Example of IVA Branding within Side Bar

XcelsiusComponent

Type

Property Group Property Standards

JPEG or SWFOptions

Image File Use “Side Bar Logo.psd” file

Resize Image toComponent

Yes

Embed File Yes

ImageComponent

Transparency 0%

Label Font Verdana

Font Type Bold

Font Size 14

Font Color RGB 255/255/255 (white)



Version: 1.1

of 9237

5.5.4 IVA Logo Properties

Figure 27: Example of IVA Logo within Side Bar

XcelsiusComponent

Type


JPEG or SWFOptions

Image File Use appropriate logo image file for theIVA

Resize Image toComponent

Yes

Embed File Yes

ImageComponent

Transparency 0%

5.5.5 Side Bar Detail PropertiesThe Side Bar Detail may contain variety of links and texts. The following are thelist 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



Version: 1.1

of 9238

Side Bar Detail

Type

XcelsiusComponent

Type

PropertyGroup

Property Standards

Wrap Text Yes

Show Border No

Layout

Show Fill No

Font Verdana

Font Type Bold

Font Size 10


“Data As Of”Text

Label

Text

Alignment Center

Wrap Text Yes

Show Border No

Layout

Show Fill No

Font Verdana

Font Type Bold

Font Size 12


Hyperlinkgroup Header

Text

Label

Text

Alignment Left

Layout Show Button Background No

Font Verdana

Font Type Bold, Underlined

Font Size 10


Hyperlink Text URL Button

Text

Alignment Left



Version: 1.1

of 9239

Side Bar Detail

Type

XcelsiusComponent

Type

PropertyGroup

Property Standards

Default Color RGB 255/255/255 (white)Labels

Pressed Color RGB 255/255/255 (white)

Show Button Background YesLayout

Transparency 0%

Font Verdana

Font Type Bold

Font Size 10


Text

Alignment Center

Default Color RGB 255/255/255 (white)Button Color



Search

FunctionButtons

SearchConnectionRefresh

Labels

Pressed Color RGB 1/72/128

Font Verdana

Font Type Regular

Font Size 13


Input Text Text

Alignment Left

Input TextArea

Color Background Color RGB 255/255/255 (white)

Layout Show Button Background Yes

Font Verdana

View FunctionButton

URL Button

Text

Font Type Bold



Version: 1.1

of 9240

Side Bar Detail

Type

XcelsiusComponent

Type

PropertyGroup

Property Standards

Font Size 10


Alignment Center

Default Color RGB 255/255/255 (white)Button Color


Default Color RGB 255/255/255 (white)Labels

Pressed Color RGB 1/72/128

Layout Transparency 100%

Font Verdana

Font Type Regular

Font Size 14

Title Text


Font Verdana

Font Type Regular

Font Size 13

Labels Text


Labels Default Color RGB 1/72/128





SearchResultsDisplay

List Box

LabelBackgrounds




Version: 1.1

of 9241

Side Bar Detail

Type

XcelsiusComponent

Type

PropertyGroup

Property Standards

Track Color RGB 245/245/245



Scroll Bar

Button Symbol Color RGB 101/153/203

5.6 Body

5.6.1 Body LayoutThe 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 andworkflow required for the IVA solution.

General recommendation is not to exceed four (4) components within the Body area, as shown inthe below figure.

Figure 29: Recommended Visualization Pane Layout within Body Area

5.6.2 General Body Layout GuidelinesAs a rule, when you are viewing a dashboard, your eyes should be drawn to the information thatis most important. Follow the layout guidelines below for effective visualization design:

Most important information should be on the top left and highlight important information



Version: 1.1

of 9242

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 followingdirections in general:

o From Top to bottomo 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 visualizationso Use gray border for group container

Chart Borderso Do not use outer border for combo, bar, and line charts within a group containero Use outer border for pie chart

Chart Colorso 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 usuallydynamic, use default colors based on the Elan color theme. If necessary, useSAP secondary colors (e.g. Dove, Petrol, Warm Red, etc.).

o Choose colors thoroughly depending on what you are trying to convey. Forexample, if you’re trying to convey attention, use colors that are hot like red and ifyou’re trying to make it less visible, use cooler colors.

Othero Avoid scroll bars; If the contents to be displayed is too large, consider use of

WebI report insteado Avoid use of tabs as much as possible; tabs increase the SWF file size and

affects performanceo Use click box for display/hide of additional contents/data pointso Add addition information around visualization like legend, dates, thresholds, etc.



Version: 1.1

of 9243

o Choose the right graph in order to display appropriate data i.e. bar chart vs. piechart

o Do not clutter the visualization with useless decorationo Deliver information in summaries and exceptions to highlight pertinent datao 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 listin Appendix A.

5.6.3 List of Components Included in BodyAlthough each IVA may include different set of visualizations, the following is the list ofvisualization components generally included and standardized in IVA:

VisualizationComponent

Example

Title Bar

Background N/A

KPI Table



Version: 1.1

of 9244


Example

Combo Chart

Column Chart



Version: 1.1

of 9245


Example

Bar Chart

Stacked Column/BarChart



Version: 1.1

of 9246


Example

Line Chart

Pie Chart



Version: 1.1

of 9247


Example

What If

Alerts

Trends

Drop Down List

Tabs

Click Box

Radio Button



Version: 1.1

of 9248


Example

Detail Report Link

5.6.4 Title Bar Properties

Figure 32: Example of a Title Bar

XcelsiusComponent

Type

Property Standards


Transparency 0%

Background

Border Scale 100%

Font Verdana

Font Style Bold

Font Size 12

Label

Alignment Left

5.6.5 Background Properties

XcelsiusComponent

Type

Property Standards


Transparency 0%

Background

Border Scale 100%



Version: 1.1

of 9249

5.6.6 KPI Table Properties

Figure 33: Example of a KPI Table

XcelsiusComponent

Type


Layout Show Gridlines Yes

Color Gridline Color 1/72/128

Over Color RGB 224/224/224Color – Rows


Track Color RGB 245/245/245



Scroll Bar


Font

(Defined in theExcel sheet)

Font Verdana

SpreadsheetTable

Font Type Regular

Font Size 10

Font Color Automatic (black)



Version: 1.1

of 9250

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



Version: 1.1

of 9251

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

(not shownabove)

Line Circle RGB 255/192/0 RGB 255/192/0



Version: 1.1

of 9252

Figure 37: Combo Chart Series Settings and Relationship to the Sample

The column and line settings are as follows:

Marker Size Transparency Enable Markers Notes

Column 25 0% N/A

Line 25 0% Yes

Marker Size can also dependon the number of series



Version: 1.1

of 9253

5.6.7.3 Combo Chart Axes

Figure 38: Combo Chart Axes Settings

Axes are set as follow:

Axes Line Color Thickness

Vertical Axis RGB 0/0/0 1

Horizontal RGB 0/0/0 1

Horizontal Gridlines – Major RGB 236/236/236 1

Horizontal Gridlines – Major RGB 236/236/236 1



Version: 1.1

of 9254

5.6.7.4 Combo Chart Texts

Figure 39: Combo Chart and Text Settings

Text Type Property Standards

ALL TEXTS Font Verdana


Chart Title Font Type Bold

Font Size 12

Alignment Center

Font Type Bold

Font Size 10

Sub Title

Alignment Center

Font VerdanaHorizontal (Category) Axis Title

Horizontal (Category) Axis LabelsFont Type Bold



Version: 1.1

of 9255

Vertical (Category) Axis Title

Vertical (Category) Axis Labels

Legend

Mouse-Over Values

Font Size 10

5.6.8 Column Chart Properties

Figure 40: Example of a Column Chart

5.6.8.1 Column Chart LayoutPlease see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.8.2 Column Chart SeriesThe series colors and marker size are set as follows:

Series Fill Marker Size Transparency

Series 1 RGB 255/192/0


25 0%

5.6.8.3 Column Chart AxesPlease see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.8.4 Column Chart TextsPlease see section 5.3.6.4 Combo Chart Texts for the standard.



Version: 1.1

of 9256

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 textstandard.

5.6.10 Stacked Column/Bar Chart Properties

Figure 42: Example of a Stacked Column Chart

5.6.10.1 Stack Column/Bar Chart LayoutPlease see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.10.2 Stack Column/Bar Chart SeriesThe series fill colors are set as follows:

Series Fill



Version: 1.1

of 9257




AdditionalSeries

Use SAP Color Scheme as the selection guide

5.6.10.3 Stack Bar Chart AxesPlease see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.10.4 Stack Bar Chart TextsPlease see section 5.3.6.4 Combo Chart Texts for the standard.

5.6.11 Line Chart Properties

Figure 43: Example of a Line Chart

5.6.11.1 Line Chart LayoutPlease see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.11.2 Line Chart SeriesThe series colors and marker size are set as follows:

Series Shape Line Fill



Version: 1.1

of 9258

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 AxesPlease see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.11.4 Column Chart TextsPlease see section 5.3.6.4 Combo Chart Texts for the standard.

5.6.11.5 Line Chart Series

5.6.12 Pie Chart Properties

Figure 44: Example of a Pie Chart



Version: 1.1

of 9259

5.6.12.1 Pie Chart Layout

Figure 45: Pie Chart Layout Settings

5.6.12.2 Pie Chart SeriesUse default color Xcelsius selects based on the color theme, unless you know that the pie chartalways include x number of colors. Use standard set of colors used in other charts in conjunctionwith SAP color scheme in selecting colors for each data point.

5.6.12.3 Pie Chart TextsRefer to Section 5.3.6 for the Chart Text standard.



Version: 1.1

of 9260

5.6.13 What-If Properties

Figure 46: Example of a What-If

XcelsiusComponent

Type



Transparency 0%

Background General

Border Scale 100%

Font Verdana

Font Type Bold

Font Size 10


Label Text

Alignment Center

Layout Show Gridlines Yes

Color Gridline Color RGB 52/75/109

SpreadsheetTable

Color – Rows Over Color RGB 150/168/195



Version: 1.1

of 9261

XcelsiusComponent

Type





Button Color RGB 255/255/255 (white)

Scroll Bar


Layout Enable Ticks Yes; Auto Scale

Font Verdana

Font Type Bold

Font Size 12

Text - Title


Font Verdana

Font Type Bold

Font Size 10

Text - Value


Color Marker Color RGB 240/171/0


HorizontalSlider

Tick Color RGB 111/119/119

5.6.14 Alerts Properties



Version: 1.1

of 9262

Figure 47: Example of Alerts

XcelsiusComponent

Type


Red Alert Color RGB 255/0/0 (Xcelsius default)

Yellow Alert Color RGB 255/255/0 (Xcelsius default)

Icon Alerts

Green Alert Color RGB 0/255/0 (Xcelsius default)

5.6.15 Trends Properties

Figure 48: Example of Trends

XcelsiusComponent

Type


Positive Value Color(Green)

RGB 0/176/80

(Default Green – Makes it easier toread the arrow compared with thegreen used in alerts)

Zero Value Color(Yellow)

RGB 255/255/0 (Xcelsius default)

Trend Icon Colors

Negative Value Color(Red)

RGB 255/0/0 (Xcelsius default)

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 standardincluded in the Header area. Please refer to section 5.2.3.2, Header Detail Properties of thisdocument.



Version: 1.1

of 9263

5.6.17 Tab Properties

Figure 50: Example of Tabs

XcelsiusComponent

Type


Button Separation 0Layout

Transparency 0%

Font Verdana

Font Type Regular

Font Size 10


Text –Title

Alignment Center

Font Verdana

Font Type Bold

Font Size 11


Label BasedMenu

Labels

Alignment Center

Tab SetContainer

General Tab Alignment Left

Font Verdana

Font Type Bold

Font Size 12

Labels


Color Background Color RGB 255/255/255



Version: 1.1

of 9264

XcelsiusComponent

Type


Tab Background –Over Color

RGB 255/255/255

Tab Background –Selected Color

RGB 101/153/203

Labels – DefaultColor

RGB 0/0/0

This option is valid only when youhave more than 2 tabs

Labels – Over Color RGB 1/72/128

Note: This option in Xcelsius does notseem to work.

Labels – SelectedColor

RGB 0/0/0

This option in Xcelsius does not seemto work.

5.6.18 Click Box Properties

Figure 51: Example of a Click Box

XcelsiusComponent

Type


Font Verdana

Font Type Bold

Font Size 10

Check Box Text – Title


5.6.19 Radio Button Properties

Figure 52: Example of Radio Buttons



Version: 1.1

of 9265

XcelsiusComponent

Type


Marker size 18

Horizontal Margin 0

Vertical Margin 0

Layout

Enable Background No

Font Verdana

Font Type Bold

Font Size 10

Text – Labels


Default Color RGB 216/216/216

Radio Button

Color - Marker


5.6.20 Detail Report Link Properties

Figure 53: Example of a Detail Report Link

XcelsiusComponent

Type


Layout Show Background Yes

Font Verdana

Font Type Bold

Font Size 10

URL Button

Text – Label




Version: 1.1

of 9266

Alignment Center

Default Color RGB 255/255/255 (white)Color – Button


Default Color RGB 0/0/0Color – Labels




Version: 1.1

of 9267

6 Web Intelligence StandardsThis section explains the UI standards for Web Intelligence (WebI) reports. WebI reports areused for detail-level analysis within IVA. A WebI report is called by Xcelsius (via URL buttons andOpenDoc 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 donewithin WebI application, WebI reports uses own layout and other standards as described in thissection.

6.1 WebI Report Layout

6.1.1 First Page LayoutThe layout used for the first page of the report includes report title section which is not included inthe subsequent pages.



Version: 1.1

of 9268

Figure 55: WebI Report First Page Layout


A Page Header The page header for the page. This section includes SAP and IVAbranding.

Page Header is repeated in every page.

B Report Title The report title for the report that includes the name of the report andother report-level information.

Report Title only appears on the first page of the report

C Section Header The Section Header is the name of the dimension for which Report Bodyis sliced by.

Section Header appears on the top of every report section.

Alternatively, Section Header is used as the title section for the ReportBody.

D Report Body The Report Body includes charts and tables for the given section header.

E 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, here’s the example:



Version: 1.1

of 9269

Figure 56: Example of WebI Structure View for a First Page

6.1.2 Subsequent Page LayoutThe layout used for the subsequent pages of the report is as follows. Please refer to the abovesection for the definitions.



Version: 1.1

of 9270

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 ObjectType


Appearance Background Color RGB 255/153/0

Top Margin

Bottom Margin

Left Margin

Right Margin

20 px

Report Headerand Footer

Page Layout

Page Orientation Landscape



Version: 1.1

of 9271

Show Page Header

Show Page Footer

Yes

Header Height

Footer Height

37 px

6.2.2 SAP Branding Properties

WebI ObjectType


Width 55 pxDisplay

Height 21 px

Left Edge 5 px

Free-StandingCell

(Blank)

Relative Position

Top edge 4 px

6.2.3 IVA Branding Properties

WebI ObjectType


Width Depends on the IVA name’s lengthDisplay

Height 21 px

Font Arial, 10, RegularText Format

Text Color RGB 0/0/0

Vertical TextAlignment

Bottom

Horizontal TextAlignment

Left

Left Edge 61 px

Free-StandingCell

(Blank)

Relative Position

Top edge 4 px



Version: 1.1

of 9272

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

WebITemplate Type


Width Depends on the text lengthDisplay

Height 26 px

Font Arial, 8, Regular



Bottom

Text Format


Left

Left Edge 10 px

Free-StandingCell

(Blank)

Relative Position

Top edge 37 px

6.3.2 Report Subtitle Properties

WebITemplate Type


Width Depends on the text lengthDisplay

Height 42 px

Font Arial, 12, Bold

Free-StandingCell

(Blank)

Text Format




Version: 1.1

of 9273

WebITemplate Type



Bottom


Left

Left Edge 10 pxRelative Position

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

WebITemplate Type


Width 986 pxDisplay

Height 24 px

Text Format Font Arial, 9, Bold



Bottom


Left

Free-StandingCell

(Blank)




Version: 1.1

of 9274

WebITemplate Type


Left Edge 12 pxRelative Position

Top edge 12 px

6.5 Report Body

Figure 61: Example of a Report Body

6.5.1 List of Visualization Included in Report BodyAlthough 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



Version: 1.1

of 9275

Visualization Example

Bar Chart

Stacked Column Chart

Pie Chart

Table and Cross Tab

6.5.2 Color PaletteFor all the charts/graphs included in this standard, the color for the data uses the following colorpalette available within WebI:



Version: 1.1

of 9276

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 239/162/82

Green RGB 0/148/112

6.5.3 Column Chart, Bar Chart, and Stacked Column Chart PropertiesColumn, bar, and stacked column charts all share the same standard. Column chart uses WebInamed called Vertical Grouped Bar Chart, while the bar char uses WebI template named VerticalGroped 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 chartexample below) or multiple data points (as shown in the column chart example below). Includechart legend when the chart includes multiple data points.



Version: 1.1

of 9277

Stacked bar chart will always include multiple dimensions for the x axis, so legend must beincluded.

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

WebITemplate Type


Display ALL Depends on the requirement, includingthe size. The size will mainly dependon what other charts and tables areincluded in the Report Body.

Bar Chart -VerticalGrouped

Bar Chart - Appearance Show Floor Yes



Version: 1.1

of 9278

WebITemplate Type


Floor Color RGB 240/240/244

Show Column/bar chart: If more than singleseries, then Yes

Stacked column chart: Yes

Position Right

Text Format Arial, 12, Bold

VerticalGrouped

Legend

Color RGB 0/0/0

Text Format Arial, 12, BoldLegend Title


Text Format Arial, 12, BoldLegend Values


Enable Depends


Title


Palette See Section 6.5.1.1 aboveData

Border Color If single series: RGB 51/51/153

If multiple series: RGB 51/102/255

Values Yes

Text Format Arial, 8, Regular

X Axis


Grid Yes

Show Markers Yes

Grid Color RGB 179/179/201

Y Axis

Values Yes



Version: 1.1

of 9279

WebITemplate Type




Enable Depends


X and Y Axis Label


Page Layout Relative Position Varies depending on othervisualizations placed on the ReportBody.

6.5.4 Pie Chart Properties

Figure 66: Example of a Pie Chart

WebITemplate Type


Display ALL Depends on the requirement, includingthe size. The size will mainly dependon what other charts and tables areincluded in the Report Body.

Appearance Show Floor No

Show Yes

Position Right


Pie

Legend

Color RGB 0/0/0



Version: 1.1

of 9280

WebITemplate Type


Text Format Arial, 12, BoldLegend Title


Text Format Arial, 8, regularLegend Values


Enable Depends


Title


Palette See Section 6.5.1.1 aboveData

Border Color RGB 102/102/153

Enable Depends


Y Axis



6.5.5 Table and Cross Tab Chart Properties

Figure 67: Example of a Table

WebITemplate Type


Text Format Arial, 9, BoldHorizontalTable

Header Cells




Version: 1.1

of 9281

WebITemplate Type



Bottom


Left

Vertical Table

Crosstab





Bottom

Body Cells


Left

Background color RGB 255/255/255




Canter


Left

Footer Cells

Background color RGB 255/255/255

Frequency 2

Color RGB 240/240/240

AlternateRow/Column Colors





Version: 1.1

of 9282

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 PropertiesReport Footer properties are set along with Report Header. Please refer to section 6.2.1. ReportHeader.

6.6.2 Run Date Properties

WebITemplate Type




Version: 1.1

of 9283

WebITemplate Type


Width 108 pxDisplay

Height 21 px




Bottom

Text Format


Left

Left Edge 6 px

Last RefreshDate

Relative Position

Top edge 6 px

6.6.3 Page Number Properties

WebITemplate Type


Width 108 pxDisplay

Height 21 px




Bottom

Text Format


Right

Left Edge 878 px

Page Number/Total Pages

Relative Position

Top edge 8 px

FOR NTERNAL USE ONLY


Version: 1.1

of 9284

Appendix A: References and Resources

A.1 IVA Development MethodologyThe following are the list of documents for the IVA standard design and developmentmethodology:

IVA Development Process Overview(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/61c0cd81-0117-2c10-dc9c-c140d4b771f2)

o Set of training materials (Webinars and PowerPoint slides) that explain theoverall IVA process and detailed explanations about ecosystem andstakeholders. It also includes step-by-step training on Governance and Launchactivities.

Visioning Phase Training(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/c0e49223-282d-2c10-239d-e935761ab537)

o Set of training materials (Webinars and PowerPoint slides) that explain theprocess, techniques, and templates used within the Visioning phase of the IVAdevelopment

IVA Development – “At a Glance”(https://portal.wdf.sap.corp/irj/go/km/docs/guid/611f3d76-746d-2c10-78b2-c8a253a48155)

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-3d87-bd3179d388de)

o Detailed development plan template for M1 and M2 development

IVA Reference Architecture (https://portal.wdf.sap.corp/irj/go/km/docs/guid/504ceea6-97ec-2b10-44aa-9dfad3c897fc)

o IVA reference architecture slides – This can be used as a template for the futureIVA architecture.

A.2 IVA Design and Development TemplatesVision 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)

https://portal.wdf.sap.corp/irj/go/km/navigation/guid/61c0cd81-0117-2c10-dc9c-

https://portal.wdf.sap.corp/irj/go/km/navigation/guid/c0e49223-282d-2c10-239d-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/611f3d76-746d-2c10-78b2-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/71289eba-746d-2c10-3d87-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/504ceea6-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/20773b40-e468-2c10-46a0-ffa3642aadf5

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



Version: 1.1

of 9285

o This document includes a set of basic design pattern for the IVA visualization andcan be used as a future IVA mock-up template

Metadata Workbook (https://portal.wdf.sap.corp/irj/go/km/docs/guid/b08899ad-99ec-2b10-f6bf-a470f5fd9859)

o This document captures metadata information for KPIs and dimensions to beincluded 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 specificationsfor IVA dashboards and reports.

Xcelsius Template (https://portal.wdf.sap.corp/irj/go/km/navigation/guid/100174fa-956d-2c10-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-9a8a-e940cf074808)

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-a98a-a417c208241a)

o This document provides development standards (naming standards andpackaging standards) for used for M1 and M2 development

IVA Logo File (https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-5a8b-81ae9d050d26)

o Adobe Photoshop file for the IVA logo(https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-5a8b-81ae9d050d26)

A.3 Visualization References and ToolsThe following reference is used as an additional best practice reference for BI visualizationdesign:

6 BI Pitfalls and How to Avoid Them (http://www.information-management.com/specialreports/2009_151/business_intelligence_bi_data_visualization-10015710-1.html?ET=informationmgmt:e1039:2129501a:&st=email)

o By Robert Kearse, published by Information Management. It describes datavisualization influences how users consume information. It is an external link:

Data Visualization Patters (https://portal.wdf.sap.corp/irj/go/km/docs/guid/8017c6c7-516b-2c10-5a99-81b43b776c16)

o Summary of dashboard design principles from Stephen Few's book, "InformationDashboard Design."

https://portal.wdf.sap.corp/irj/go/km/docs/guid/b08899ad-99ec-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/5190f2d4-956d-2c10-81b6-97ab63efab9f

https://portal.wdf.sap.corp/irj/go/km/navigation/guid/100174fa-956d-

https://portal.wdf.sap.corp/irj/go/km/navigation/guid/e04e8e40-516b-2c10-9a8a-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/8008d84b-966d-2c10-a98a-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-

https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-5a8b-

http://www.information-/

https://portal.wdf.sap.corp/irj/go/km/docs/guid/8017c6c7-



Version: 1.1

of 9286

Xcelsius Dashboard Design Best Practice(https://portal.wdf.sap.corp/irj/go/km/docs/guid/809aa5f6-516b-2c10-d1bd-93759647335e)

o Presentation on visualization best practice using Xcelsius, compiled by RichLewis (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 A free color picker tool.

https://portal.wdf.sap.corp/irj/go/km/docs/guid/809aa5f6-516b-2c10-d1bd-

http://kuler.adobe.com/#null

http://www.iconico.com/colorpic/

INTERNAL

Title: UI Standards for Industry Value Accelerators Front-End Components

Version: 1.1

of 9287

Appendix B: UI Standards in Action – IVA ExamplesThis section provides a few of the IVA and other Xcelsius dashboard developed by Industry Analytics team using the UI standards illustrated in thisdocument.

INTERNAL


Version: 1.1

of 9288

Figure 69: SAP American Recovery and Reinvestment Act (ARRA) IVA – M2

INTERNAL


Version: 1.1

of 9289

Figure 70: SAP Maximizing Customer Revenue and Retention (MCRR) IVA – M1

INTERNAL


Version: 1.1

of 9290

Figure 71: SAP QatarGas IVA POC

INTERNAL


Version: 1.1

of 9291

Figure 72: Trade Promotion Effectiveness (TPE) integrated within SAP CRM Portal – M2



Version: 1.1

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 theexpress 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 componentsof 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, SystemStorage, 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 IBMCorporation.

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 ofAdobe 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 orregistered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide WebConsortium, 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 inventedand implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAPproducts and services mentioned herein as well as their respective logos are trademarks or registeredtrademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, WebIntelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of Business Objects S.A. in the United States andin other countries. Business Objects is an SAP company.

All other product and service names mentioned are the trademarks of their respective companies. Datacontained 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 AGand its affiliated companies ("SAP Group") for informational purposes only, without representationor warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect tothe materials. The only warranties for SAP Group products and services are those that are setforth in the express warranty statements accompanying such products and services, if any.Nothing herein should be construed as constituting an additional warrant.

bi dashboardingui guide

Documents