BI DashboardingUI Guide

UI GUIDELINESIndustry Value Accelerator Front-End Authors: Michael Sanjongco Youko Watari August, 2009 Version 1 FOR INTERNAL USE ONLY FOR INTERNAL USE ONLY Table of Contents: Versions..................................................................................................................... 6 Open Issues............................................................................................................... 7 1 Overview............................................................................................................. 8 2 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 3 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 4 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 5 Navigation ....................................................................................................17 Canvas Size and Theme.....................................................................................28 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 2 of 92 FOR INTERNAL USE ONLY 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 3 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 3 of 92 ......................................................................11............................................................11...........................58 5.....................11.............................................2 Page Header...........................................12 6 Pie Chart Properties .................................................................67 6........................1 First Page Layout .........4......19 Radio Button Properties...................6......................................3 Report Title................................10........................2..................18 Click Box Properties..........64 5................1 Pie Chart Layout .....2 Report Subtitle Properties .......12.....3 IVA Branding Properties ................3........................74 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1...........2................................................................................71 6......................................................3 Pie Chart Texts ...........................6.....2 Pie Chart Series.............6...........16 Drop Down Properties...............6...............................73 Section Header Bar Properties ...................................20 Detail Report Link Properties.......6.......12................................................13 What-If Properties...................................................... 67 6..57 5.............................................1........6...59 5..........14 Alerts Properties .............................57 5.72 6.....1 Report Header Properties ..............................................6..................6..........................................................................................................................................................6.................1 Page 4 of 92 ....................................10...........................FOR INTERNAL USE ONLY 5...................................................................69 6.............64 5..................................................59 5...............6.........................................73 Report Body .....58 5..........61 5........................................1 Report Title Properties ....57 5.4 Stack Bar Chart Texts .......58 5...3 Stack Bar Chart Axes..............................2 Subsequent Page Layout...17 Tab Properties ................11......58 5............................................................72 6.............62 5..............................................................6..2.63 5....11............................................................................72 6..................................................6..............................6.....................................................................6...62 5.59 5...........................................................................................................................................................................6..................12....................6..........................................................1 Line Chart Layout..57 5...................................6.......1 WebI Report Layout ...........................71 6.....................................57 Section Header.........4 Column Chart Texts .....................................4 6.....................60 5...............67 6.......2 Line Chart Series ..................................................................................................5 4 Line Chart Properties ..........11 5......1 6...................3............70 6...................................3 Column Chart Axes ................................................................................................................65 Web Intelligence Standards ...................2 SAP Branding Properties ................................1..............6.............................................................................6.....................................70 6......5 Line Chart Series ..............15 Trends Properties.........6........................................... ........................................................82 6............83 Appendix A: References and Resources...75 6..........................1 Page 5 of 92 ............................................................................................79 6......................74 6.5 Table and Cross Tab Chart Properties .............1 List of Visualization Included in Report Body...................................5...........6.....6..........2 IVA Design and Development Templates................85 Appendix B: UI Standards in Action – IVA Examples. Bar Chart.....................4 Pie Chart Properties .... 87 5 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.........3 Visualization References and Tools ................5...............................................5......................................5........................82 6...........2 Run Date Properties ..................................................1 IVA Development Methodology ......................84 A............3 Column Chart.......................82 6.........................................6................................80 6.................................FOR INTERNAL USE ONLY 6..................................................................76 6..................................................................................84 A.........3 Page Number Properties........................................................ and Stacked Column Chart Properties ........5...6 Page Footer.2 Color Palette..................................1 Report Footer Properties ................... 84 A...................... 1 Added a screenshot of TPE integrated within CRM 6 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY Versions Q2. 2009 Version 1 – First version 08/18/2009 V1.1 Page 6 of 92 . FOR INTERNAL USE ONLY Open Issues Date Issue Reason (e. 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. Technical.g. Design Decision.1 Page 7 of 92 . WIP Text in orange: Topics that are still under discussion and may or may not change 7 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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. 1.1 Page 8 of 92 . For more information on the specific product functionality mentioned in this document and how to use the functionality. please refer to the User’s Guide for the particular product. 1. SAP BusinessObjects Web Intelligence and SAP Portal. Definition of M1 and M2 Builds for more explanation of what M1 and M2 build are. 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.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.3 General Guiding Principals 1. 1.1. SAP BusinessObjects (SBO) Dashboard Builder. These guidelines mainly cater to IVA built in Xcelsius. It also assumes that the reader is familiar with the IVA solution architecture and development methodology.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.FOR INTERNAL USE ONLY 1 Overview This document defines the User Interface (UI) guidelines for designing and deploying Industry Value Accelerator (IVA) front-end components (“dashboard”).1 Design Standards This UI Standards document is a part of overall SAP and IVA standards and methodology: 8 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. specifically: SAP BusinessObjects Dashboard Builder Xcelsius SAP BusinessObjects Web Intelligence SAP Portal Hence.3. 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. The M1 and M2 build are key phases within this methodology. filing rules.3. In addition. and other development best practices 9 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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. for the IVA development. Color Scheme – The basic set of colors (e. Hence this document only includes those types of visualization that are included in the best practice.FOR INTERNAL USE ONLY General UI Standard and Guidelines – This UI Standard document follows the general guidelines described in the SAP User Interface Standards. the IVA Front-End build activities are defined in the following: IVA Solution Development Methodology – This methodology defines the end-to-end process. Important Note: Specific Xcelsius visualization best practice (e.g. such as naming convention.2 IVA Development Methodology and Best Practices From the project management and solution build point of view. tasks. use of blue. stakeholders. gold.g. deliverables.1 Page 9 of 92 . 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. etc. packaging standards. what type of chart is suitable to what type of analysis) is to be documented within the methodology. 1.FOR INTERNAL USE ONLY Specific locations on where to find the above contents are included in the Appendix section of this document.1 Page 10 of 92 .3. Please see Appendix A for the list of resources.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. 10 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Through the development process following the methodology. as a physical technical solution progresses its form and capability from Milestone 1 (M1) build to Milestone 2 (2) build. 2. specific UI standard for each of the elements are included. Multiple SWF files are bundled together as a single tabformat dashboard rendered through HTML page. In addition. and workflow.1 Definition of M1 and M2 Builds An IVA solution is developed using aforementioned IVA Solution Development Methodology. and refine requirements for the KPIs. a M1 build consists of one or multiple SWF files generated from Xcelsius. M1 Build – It is a disconnected model. the M1 and M2 build IVA can be deployed using the SAP Portal (see below example): 11 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. visualization. an IVA. Primary use of M1 is to socialize the specific IVA to IVA’s specific industry stakeholder and further refine the use case for the IVA.2 Definition of IVA UI Framework In general. The data for M1 build is static and may be mocked up. In most cases. 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. a M2 front.end build consists of one or multiple SWF files generated from Xcelsius. The data for M2 build is dynamic sourced from SAP BW or other data sources. 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.1 Page 11 of 92 . M2 Build – It is a connected model and is a solution available to qualified SAP customers and partners for deployment. In most cases.FOR INTERNAL USE ONLY 2 IVA Framework Overview 2. PDF mock-ups of Web Intelligence reports may be linked from the SWF. 3 Window Types This section describes the window types used within IVA and how the Framework above is applied within the window.3. There is only one primary window.1 M1 Primary Window – Tabbed Structure 12 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. important.FOR INTERNAL USE ONLY Figure 2: Trade Promotion Effectiveness (TPE) IVA integrated within SAP CRM portal 2.1 Page 12 of 92 . In the context of IVA. Within IVA. or occurs first in a sequence in the user's interaction with an application. the window standards are defined based on the build type (M1 or M2). Secondary Window: A secondary window is a child window and is opened from the primary window or other secondary windows. a secondary window can be a window that is used for providing detailed level analysis via pop-up or a detail report. 2. 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. 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. A primary window is a window which contains information that is essential. Xcelsius (Flash) Below is an example of a M1 primary window with tabs using IVA A&E Wrapper and Flash SWF files. The branding is included in this area.1 Page 13 of 92 . IVA A&E Wrapper (HTML) B Content Region Content Region displays the content for the selected view. run on Internet Explorer: 13 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. in a tab structure is displayed here.FOR INTERNAL USE ONLY Figure 3: M1 Primary Window Elements Callout Name Description Tool (Format) A Navigation Region The primary navigation for the IVA. In such a situation. run on Internet Explorer: 14 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY Figure 4: Example of M1 Primary Window with Tabs 2. the Navigation Region above (using the IVA A&E Wrapper) is not used.2 M1 Primary Window – Non-Tabbed Structure Some IVAs do not have contents across multiple tabs.3. Below is an example of a M1 primary window with without tabs.1 Page 14 of 92 . FOR INTERNAL USE ONLY Figure 5: Example of M1 Primary Window without tabs 2.1 Page 15 of 92 .3. 15 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. The specific standards for those elements are explained within Xcelsius Standards (for pop-up) and Web Intelligence Standards (for Web Intelligence reports). However. Content Region within the M1 build may contain a pop-up window or a link to a static Web Intelligence report.3 M1 Secondary Window There is no secondary window within M1 build. FOR INTERNAL USE ONLY Figure 6: Example of M1 Primary Window with a “pop-up” 2.3.1 Tool (Format) Page 16 of 92 .4 M2 Primary Window – Tabbed Structure Figure 7: M2 Primary Window Elements Callout 16 Name Description Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. This should be the “at a glance” or summary KPI area where the analysis starts. 2. 17 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. SAP BusinessObjects Dashboard Builder (Dashboard) B Content Head The Content Head contains the name of the Content area. SAP BusinessObjects Dashboard Builder (Dashboard) C Content Region Content Region displays the content for the selected view. M1 Primary Window – Non-Tabbed for an example of how this window looks. Each IVA’s navigations and workflow is defined within the IVA’s Visualization Mock-up document and Visualization Specification document. See section 2.3.2. In such a situation. The following describes a general navigation used within the M1 and M2 builds. The branding is included in this area.4 Navigation The navigation for IVAs varies based on the specific IVA’s use cases.FOR INTERNAL USE ONLY A Navigation Region The primary navigation for the IVA. Xcelsius (Flash) 2.1 Navigation – Tabbed The following explains typical navigation for IVAs that includes multiple tabs. the Navigation Region and Content Header above (using SBO Dashboard Builder) are not used. The first tab in the primary window is enterprise/executive (or highest aggregated dimension) area.4. Summary KPI table is placed upper left of the Content Region.1 Page 17 of 92 .3. in a tab structure and menu structure for sub-pages is displayed here.5 M2 Primary Window – Non-Tabbed Structure Some IVAs do not have contents across multiple tabs. 2. 18 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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. Some of the detail level analysis may include a radio button or check box that allows additional measure(s) to be displayed.1 Page 18 of 92 .FOR INTERNAL USE ONLY 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.FOR INTERNAL USE ONLY 2.1 Page 19 of 92 .4. Summary KPI table is placed upper left of the Content Region.2 Navigation – Non-Tabbed The first view of the primary window is enterprise/executive (or highest aggregated dimension) area. 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. 19 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. FOR INTERNAL USE ONLY Fisheye or drop down list on the header area allows dimension-specific analysis. 20 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 20 of 92 . Xcelsius (Flash) 3. SAP BusinessObjects Dashboard Builder (Dashboard) B Content Head The Content Head contains the name of the Content area. SAP BusinessObjects Dashboard Builder (Dashboard) C Content Region Content Region displays the content for the selected view. Xcelsius Standard.1 Page 21 of 92 . The branding is included in this area.FOR INTERNAL USE ONLY 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).1 Dashboard Builder Setup The default style for the Dashboard Builder should be set up as “Windows. the CMC preference function can allow setting different page style or creating a new style.” The following standards for the Navigation Region and Content Header are based on the default property of the “Windows” style. The standards for the Content Region are explained in section 5. in a tab structure and menu structure for sub-pages is displayed here. 21 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Figure 8: M2 Primary Window Elements Callout Name Description Tool (Format) A Navigation Region The primary navigation for the IVA. Should a specific IVA require different look & feel for its deployment purpose. font. UI Standard Use standard product functionality to create tabs and set visualization specifications in terms of size. 22 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. No customizations necessary. Some IVAs may require the first tab to have sub tabs.FOR INTERNAL USE ONLY Figure 9: Dashboard and Analytics Preference screen in CMC 3. Default structure of Dashboard Builder’s 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.2 Navigation Region Standards The Navigation Region contains two layers of navigation for IVA: Figure 10: Navigation Region using SBO Dashboard Manager Callout Name A Tabs Dashboard Manager Technical Functionality Used Dashboard Builder Tab function. and color.1 Page 22 of 92 . Use “Add a new tab” button to add additional tabs. Figure 11: Content Head using SBO Dashboard Manager Callout Name A Content Title Dashboard Manager Technical Functionality Used Dashboard Builder’s Analytic Viewer function. and color. 3. add additional sub tabs. 23 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 23 of 92 . UI Standard Use standard product functionality to create viewer and set visualization specifications in terms of size. and color.3. Use standard product functionality to create sub tabs and set visualization Use “Add a new sub tab” button to specifications in terms of size. 3. font. font. 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. No customizations necessary.1 Configuration Standards for Viewer Under the “Content” configuration area for the Viewer.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. No customizations necessary.FOR INTERNAL USE ONLY Callout Name B Sub Tab Dashboard Manager Technical Functionality Used UI Standard Dashboard Builder Sub Tab function. Use Analytic Toolkit for adding new Viewer. set the “Display as” option to: “A window inside a tab” option “Default Style” as the window style Figure 13: “Layout” properties 24 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 24 of 92 .FOR INTERNAL USE ONLY Figure 12: M2 Document Retrieval Properties Under the “Layout” area for the Viewer. No further customization other than the tab names (specific to IVA) is necessary. The standards for the Content Region are explained in section 5. 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. please refer to the instructions included in the Wrapper HTML package. For more specific instructions on how to modify the tab names. 25 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. The branding is included in this area. using HTML as a language to create simple tabbed structure to house a Flash SWF file in each tab. Xcelsius Standard.FOR INTERNAL USE ONLY 4 IVA HTML Wrapper Standards This section explains the Navigation Region using IVA HTM Wrapper (callout A below). IVA A&E Wrapper (HTML) B Content Region Content Region displays the content for the selected view. Xcelsius (Flash) 4. in a tab structure is displayed here.1 Navigation Region Standards The Navigation Region contains single layer of navigation for IVA.1 Page 25 of 92 . Figure 14: M1 Primary Window Elements Callout Name Description Tool (Format) A Navigation Region The primary navigation for the IVA. 1 Page 26 of 92 . IVA A&E Wrapper (HTML) B Content Region Content Region displays the content for the selected view. in a tab structure is displayed here.3 Window Types. The branding is included in this area.FOR INTERNAL USE ONLY 5 Xcelsius Standards This section explains the UI standards for the Content Region using Xcelsius. As described in section 2. the Content Region is defined as follows for M1 and M2: M1 Primary Window Figure 16: M1 Primary Window Elements Callout Name Description A Navigation Region The primary navigation for the IVA. Xcelsius (Flash) 26 Tool (Format) Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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. SAP BusinessObjects Dashboard Builder (Dashboard) C Content Region Content Region displays the content for the selected view. Xcelsius (Flash) 5.FOR INTERNAL USE ONLY M2 Primary Window Figure 17: M2 Primary Window Elements Callout Name Description Tool (Format) A Navigation Region The primary navigation for the IVA. The branding is included in this area. 27 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. SAP BusinessObjects Dashboard Builder (Dashboard) B Content Head The Content Head contains the name of the Content area. in a tab structure and menu structure for sub-pages is displayed here.1 Page 27 of 92 . Standard size for IVA is as follows: 5. it includes basic set of colors that we can use to follow the SAP color palette (gold. and gray) Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.2 Xcelsius Canvas Standards Xcelsius canvas defines the size and color of the outer frame of the Content Region.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.FOR INTERNAL USE ONLY 5.1 Page 28 of 92 . blue. 1 Xcelsius Framework The Content Region using Xcelsius contains the following sub areas: 29 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY Figure 18: Xcelsius Standard Layout 5.3.2 Canvas Properties Property Standards Type Solid Color RGB 242/242/242 5.1 Page 29 of 92 .3 Content Region Standards 5.2. The branding is included in this area. SAP BusinessObjects Dashboard Builder (Dashboard) B Side Bar The Content Head contains the name of the Content area.FOR INTERNAL USE ONLY Figure 19: Xcelsius Framework Callout Name Description Tool (Format) A Header Includes page header and primary content navigation for the IVA. Xcelsius (Flash) An example of Content Region based on the above framework using Xcelsius looks like below: 30 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 30 of 92 . SAP BusinessObjects Dashboard Builder (Dashboard) C Body Content Region displays the content for the selected view. 4 Header 5. Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Also may include other components that are global to the IVA.4.1 Page 31 of 92 .FOR INTERNAL USE ONLY Figure 20: Example of Content Region using Xcelsius The following sections explain each component included in the framework and standards for Xcelsius objects. 5.1 Header Layout Figure 21: Example of Header Area Callout Name A Title B 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. 4.4.1 Page 32 of 92 .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.FOR INTERNAL USE ONLY 5.3 Header Detail Properties Figure 23: Examples of Header Detail within Header Area Xcelsius Component Type 32 Property Group Property Standard Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Labels Color .Labels Default Color RGB 255/255/255 (white) Over Color RGB 255/255/255 (white) Selected Color 6658507. 3 Size of Combo Box is defined by height of the background that fits the component.FOR INTERNAL USE ONLY Xcelsius Component Type Fisheye2 Property Group Images Thumbnails Standard Sizing Method Scale Width 125 Height 60 Horizontal Margin 5 Vertical Margin 0 Background Color RGB 255/255/255 (white) Label Header Color RGB 255/255/255 (white) Thumbnails Combo Box3 Property Layout Text .Title Text .RGB 101/153/203 Number of Labels Displayed 5 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) 2 Size of the fisheye component is defined by the number of buttons included in the fisheye.1 Page 33 of 92 . The number of buttons is driven by each IVA’s requirements. 33 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 1 Page 34 of 92 .FOR INTERNAL USE ONLY 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) Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. The logo could be the particular customer’s logo.2 Side Bar Layout Callout Description A SAP IVA Branding The SAP logo and IVA branding area B IVA Logo (optional) The IVA logo.FOR INTERNAL USE ONLY 5.5.5.5 Side Bar 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.1 Page 35 of 92 . Side Bar Details External links and other industry specific contents for the IVA C 35 Name Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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.1 Page 36 of 92 .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) Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY Figure 25: Side Bar Layout 5.5. “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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.g.FOR INTERNAL USE ONLY 5.5.5 Side Bar Detail Properties The Side Bar Detail may contain variety of links and texts.5.1 Page 37 of 92 .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. The following are the list of typical labels included in the Side Bar Detail area: “Data As Of” text Hyperlink group header text (e. Underlined Font Size 10 Font Color RGB 255/255/255 (white) Alignment Left Layout Text Hyperlink Text URL Button 38 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Standards Wrap Text Text Label Hyperlink group Header Text Property Page 38 of 92 .FOR INTERNAL USE ONLY 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. 1 Standards Default Color Text Input Text Area Property Page 39 of 92 .FOR INTERNAL USE ONLY 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) Show Button Background 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 Show Button Background Yes Text Font Verdana Font Type Bold Layout Button Color Labels View Function Button 39 Input Text URL Button Text Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 1 Standards Font Size Button Color Search Results Display Property Page 40 of 92 .FOR INTERNAL USE ONLY 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. as shown in the below figure. Figure 29: Recommended Visualization Pane Layout within Body Area 5. chart.6 Body 5. when you are viewing a dashboard. graph.1 Page 41 of 92 .FOR INTERNAL USE ONLY 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. The layout of the components depends on the specific use case and workflow required for the IVA solution. your eyes should be drawn to the information that is most important.1 Body Layout The Body area consists of one or more visualization panes which display IVA KPIs via table. General recommendation is not to exceed four (4) components within the Body area.2 General Body Layout Guidelines As a rule. Follow the layout guidelines below for effective visualization design: Most important information should be on the top left and highlight important information 41 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6. or indicators. Warm Red. use the following three as the standard colors: Blue – actual measure Green – target measure Gold – secondary measure o For pie chart. and line charts in which number of data series are between 1 and 3. If necessary. since the number of slices to be included in the chart is usually dynamic. use default colors based on the Elan color theme. if you’re trying to convey attention. etc. etc. For example. consider use of WebI report instead o Avoid use of tabs as much as possible. thresholds. Other o Avoid scroll bars. 42 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Petrol. bar.g. use cooler colors. bar. Dove. and line charts within a group container o Use outer border for pie chart Chart Colors o For combo. 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.FOR INTERNAL USE ONLY 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. o Choose colors thoroughly depending on what you are trying to convey. use colors that are hot like red and if you’re trying to make it less visible. use SAP secondary colors (e. If the contents to be displayed is too large.1 Page 42 of 92 .). dates. 3 List of Components Included in Body Although each IVA may include different set of visualizations.FOR INTERNAL USE ONLY o o o o Choose the right graph in order to display appropriate data i.1 Page 43 of 92 . bar chart vs. For example.6. refer to the reference list in Appendix A. 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 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. pie chart Do not clutter the visualization with useless decoration Deliver information in summaries and exceptions to highlight pertinent data Choose the right text. 5.e. 1 Page 44 of 92 .FOR INTERNAL USE ONLY Visualization Component Example Combo Chart Column Chart 44 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. FOR INTERNAL USE ONLY Visualization Component Example Bar Chart Stacked Column/Bar Chart 45 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 45 of 92 . FOR INTERNAL USE ONLY Visualization Component Example Line Chart Pie Chart 46 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 46 of 92 FOR INTERNAL USE ONLY Visualization Component Example What If Alerts Trends Drop Down List Tabs Click Box Radio Button 47 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 47 of 92 FOR INTERNAL USE ONLY 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% Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 48 of 92 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6.FOR INTERNAL USE ONLY 5.1 Page 49 of 92 . 7.FOR INTERNAL USE ONLY 5.1 Combo Chart Layout Figure 35: Combo Chart Layout Settings 50 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 50 of 92 .6.7 Combo Chart Properties Figure 34: Example of a Combo Chart 5.6. 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 51 of 92 .FOR INTERNAL USE ONLY 5.7.2 Combo Chart Series Figure 36: Combo Chart Series Settings and Color Panel The series type.6. 1 Page 52 of 92 .FOR INTERNAL USE ONLY 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 1 Page 53 of 92 .7.6.FOR INTERNAL USE ONLY 5.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 1 Horizontal RGB 0/0/0 1 Horizontal Gridlines – Major RGB 236/236/236 1 Horizontal Gridlines – Major RGB 236/236/236 1 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. FOR INTERNAL USE ONLY 5.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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 54 of 92 .6. 8.4 Column Chart Texts Please see section 5.3 Column Chart Axes Please see section 5.1 Combo Chart Layout for the standard.6.3.3.6.3 Combo Chart Axes for the standard. 5.6.1 Page 55 of 92 .FOR INTERNAL USE ONLY Vertical (Category) Axis Title Font Size 10 Vertical (Category) Axis Labels Legend Mouse-Over Values 5.6.6.8.8. 55 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.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.8 Column Chart Properties Figure 40: Example of a Column Chart 5.6.4 Combo Chart Texts for the standard.1 Column Chart Layout Please see section 5.6.3. 5.8.6. axes. 5.1 Stack Column/Bar Chart Layout Please see section 5.6.6.10.1 Page 56 of 92 .1 Combo Chart Layout for the standard.6.9 Bar Chart Properties Figure 41: Example of a Bar Chart Please refer to section 5.FOR INTERNAL USE ONLY 5.6.7 Column Chart Properties for the layout series. and text standard.3. 5.6.10 Stacked Column/Bar Chart Properties Figure 42: Example of a Stacked Column Chart 5.3.2 Stack Column/Bar Chart Series The series fill colors are set as follows: Series 56 Fill Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.10. 6.6.1 Page 57 of 92 .2 Line Chart Series The series colors and marker size are set as follows: Series 57 Shape Line Fill Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6.6.FOR INTERNAL USE ONLY 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.11.4 Stack Bar Chart Texts Please see section 5.6.11 Line Chart Properties Figure 43: Example of a Line Chart 5.10.3 Combo Chart Axes for the standard. 5.3.4 Combo Chart Texts for the standard.6.6.10.11.3. 5. 5.3.1 Line Chart Layout Please see section 5.3 Stack Bar Chart Axes Please see section 5.1 Combo Chart Layout for the standard. 6.1 Page 58 of 92 .4 Column Chart Texts Please see section 5.FOR INTERNAL USE ONLY 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.11.6. 5.5 Line Chart Series 5.4 Combo Chart Texts for the standard. 5.11.11.12 Pie Chart Properties Figure 44: Example of a Pie Chart 58 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6.3 Combo Chart Axes for the standard.3.3 Column Chart Axes Please see section 5.3.6.6.6. 6.6 for the Chart Text standard. unless you know that the pie chart always include x number of colors.FOR INTERNAL USE ONLY 5.1 Page 59 of 92 . 5.6.12.6.3.12.2 Pie Chart Series Use default color Xcelsius selects based on the color theme.3 Pie Chart Texts Refer to Section 5.1 Pie Chart Layout Figure 45: Pie Chart Layout Settings 5. Use standard set of colors used in other charts in conjunction with SAP color scheme in selecting colors for each data point. 59 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.12. FOR INTERNAL USE ONLY 5.1 Page 60 of 92 .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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6. FOR INTERNAL USE ONLY 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.1 Page 61 of 92 .14 61 Standards Selected Color Scroll Bar Horizontal Slider Property Alerts Properties Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.Value Color 5.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 . Auto Scale Text .6. Header Detail Properties of this document.15 Property Group Alerts Property Standards Red Alert Color RGB 255/0/0 (Xcelsius default) Yellow Alert Color RGB 255/255/0 (Xcelsius default) Green Alert Color RGB 0/255/0 (Xcelsius default) 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) RGB 255/255/0 (Xcelsius default) (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.2.1 Page 62 of 92 .2. 62 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.3.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.6.FOR INTERNAL USE ONLY Figure 47: Example of Alerts Xcelsius Component Type Icon 5.6. Please refer to section 5. 17 Tab Properties Figure 50: Example of Tabs Xcelsius Component Type Label Based Menu Property Group Layout 0 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 63 of 92 .FOR INTERNAL USE ONLY 5.6. FOR INTERNAL USE ONLY 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.18 RGB 0/0/0 This option in Xcelsius does not seem to work. Labels – Selected Color 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6.1 Page 64 of 92 . Click Box Properties Figure 51: Example of a Click Box Xcelsius Component Type Check Box 5. FOR INTERNAL USE ONLY Xcelsius Component Type Radio Button Property Group Layout Text – Labels Color .1 Page 65 of 92 .20 Property Standards Marker size 18 Horizontal Margin 0 Vertical Margin 0 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6.Marker 5. FOR INTERNAL USE ONLY 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) Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 66 of 92 . 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.1.1 WebI Report Layout 6.1 Page 67 of 92 . WebI reports are used for detail-level analysis within IVA. 67 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY 6 Web Intelligence Standards This section explains the UI standards for Web Intelligence (WebI) reports. WebI reports uses own layout and other standards as described in this section.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. A WebI report is called by Xcelsius (via URL buttons and OpenDoc function) and opens up as a separate window. 6. Section Header appears on the top of every report section. here’s the example: 68 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. From the WebI structure point of view. D Report Body The Report Body includes charts and tables for the given section header. Alternatively. 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 Body is sliced by.FOR INTERNAL USE ONLY Figure 55: WebI Report First Page Layout Callout Name A Page Header Description The page header for the page. B Report Title The report title for the report that includes the name of the report and other report-level information. Page Header is repeated in every page.1 Page 68 of 92 . Page Footer is repeated in every page. E Page Footer The page footer for the page. This section run date and page number. This section includes SAP and IVA branding. Section Header is used as the title section for the Report Body. 2 Subsequent Page Layout The layout used for the subsequent pages of the report is as follows.FOR INTERNAL USE ONLY Figure 56: Example of WebI Structure View for a First Page 6.1.1 Page 69 of 92 . 69 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Please refer to the above section for the definitions. 1 Page 70 of 92 .FOR INTERNAL USE ONLY 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. FOR INTERNAL USE ONLY 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 Free-Standing Display Cell (Blank) Text Format Relative Position 71 Property Standards Width Depends on the IVA name’s 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 71 of 92 FOR INTERNAL USE ONLY 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 Free-Standing Display 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 Free-Standing Display 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 72 of 92 FOR INTERNAL USE ONLY 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 Free-Standing Display 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 73 of 92 1 Page 74 of 92 . and tables).1 List of Visualization Included in Report Body Although each WebI report may include different set of visualizations (charts. the following is the list of visualizations generally included and standardized in WebI reports: Visualization Example Column Chart 74 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY WebI Template Type Property Group Relative Position Property Standards Left Edge 12 px Top edge 12 px 6.5.5 Report Body Figure 61: Example of a Report Body 6. graphs. FOR INTERNAL USE ONLY 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 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 75 of 92 . and Stacked Column Chart Properties Column. Bar Chart. bar. and stacked column charts all share the same standard.5. Stacked column chart uses WebI template named Vertical Stacked bar chart. 76 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.3 Column 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). used most common in the charts and graphs.1 Page 76 of 92 . Column chart uses WebI named called Vertical Grouped Bar Chart. are defined as follows: Color Fill Blue RGB 58/101/152 Orange Green 239/162/82 RGB 0/148/112 6. Orange. and Green). Include chart legend when the chart includes multiple data points.FOR INTERNAL USE ONLY Figure 62: WebI Color Palette Used The first three colors (Blue. while the bar char uses WebI template named Vertical Groped Bar Chart. depending on the report requirements. Appearance Show Floor Yes Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.FOR INTERNAL USE ONLY Stacked bar chart will always include multiple dimensions for the x axis. so legend must be included.1 Page 77 of 92 . including the size. The size will mainly depend on what other charts and tables are included in the Report Body. 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. Inclusion of chart title and X and Y axis titles are optional. 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. Bold Text Color RGB 0/0/0 Text Format Arial.FOR INTERNAL USE ONLY 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.1. then Yes Stacked column chart: Yes Legend Title Legend Values Title Data Position Right Text Format Arial. Bold Text Color RGB 0/0/0 Palette See Section 6.1 Page 78 of 92 . 12.5. Bold Text Color RGB 0/0/0 Enable Depends Text Format Arial. 8. 12. 12. Regular Text Color RGB 0/0/0 Grid Yes Show Markers Yes Grid Color RGB 179/179/201 Values Yes Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Bold Color RGB 0/0/0 Text Format Arial. 12. including the size. 8. Appearance Show Floor No Legend Show Yes Position Right Text Format Arial.1 Page 79 of 92 . Bold Color RGB 0/0/0 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Bold Text Color RGB 0/0/0 Relative Position Varies depending on other visualizations placed on the Report Body. 12.5. 6.FOR INTERNAL USE ONLY WebI Template Type Property Group X and Y Axis Label Page Layout Property Standards Text Format Arial. Regular Text Color RGB 0/0/0 Enable Depends Text Format Arial. The size will mainly depend on what other charts and tables are included in the Report Body. 10.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. 1. 6. regular Text Color RGB 0/0/0 Enable Depends Text Format Arial. 10.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. 8.FOR INTERNAL USE ONLY 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. Bold Text Color RGB 0/0/0 Relative Position Varies depending on other visualizations placed on the Report Body.5.5. 12. Bold Text Color RGB 255/255/255 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Bold Text Color RGB 0/0/0 Palette See Section 6.1 Page 80 of 92 . 9.1 above Border Color RGB 102/102/153 Enable Depends Text Format Arial. FOR INTERNAL USE ONLY 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. Regular Text Color RGB 0/0/0 Vertical Text Alignment Bottom Horizontal Text Alignment Left Background color RGB 255/255/255 Text Format Arial. Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 9. 9.1 Page 81 of 92 . Regular Text Color RGB 0/0/0 Vertical Text Alignment Canter Horizontal Text Alignment Left Background color RGB 255/255/255 Frequency 2 Color RGB 240/240/240 Text Color RGB 0/0/0 Relative Position Varies depending on other visualizations placed on the Report Body. Please refer to section 6.6.2 Run Date Properties WebI Template Type 82 Property Group Property Standards Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.6. 6.FOR INTERNAL USE ONLY 6.1 Page 82 of 92 .1 Report Footer Properties Report Footer properties are set along with Report Header.1.2. Report Header.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. 1 Page 83 of 92 .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.FOR INTERNAL USE ONLY WebI Template Type Last Refresh Date Property Group Display Text Format Relative Position Property Standards Width 108 px Height 21 px Font Arial. Regular Text Color RGB 0/0/0 Vertical Text Alignment Bottom Horizontal Text Alignment Left Left Edge 6 px Top edge 6 px 6. Regular Text Color RGB 0/0/0 Vertical Text Alignment Bottom Horizontal Text Alignment Right Left Edge 878 px Top edge 8 px Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 8. 8.6. 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.sap. It also includes step-by-step training on Governance and Launch activities.sap. Visioning Phase Training (https://portal.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.sap.wdf.sap.2 IVA Design and Development Templates Vision Phase Synopsis Document Template (https://portal. A.wdf. KPIs.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.wdf.wdf.sap.1 Page 84 of 92 . Architecture and Engineering Detailed Development Plan Template (https://portal.corp/irj/go/km/docs/guid/e0f438b9-98ec-2b10-84b5-9c66dd75171f) 84 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.sap.wdf.wdf. and key dimensions to be included in IVA Visualization Mock-Up Document Template (https://portal.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. techniques.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.wdf. and templates used within the Visioning phase of the IVA development IVA Development – “At a Glance” (https://portal.FOR NTERNAL USE ONLY Appendix A: References and Resources A.corp/irj/go/km/navigation/guid/c0e49223-282d-2c10-239de935761ab537) o Set of training materials (Webinars and PowerPoint slides) that explain the process.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. Xcelsius Template (https://portal.corp/irj/go/km/navigation/guid/100174fa-956d2c10-6aac-c88a2aecd18f) o Template XLF document that includes standard themes and canvas size.FOR NTERNAL USE ONLY o 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.sap.wdf.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." Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.com/specialreports/2009_151/business_intelligence_bi_data_visualization10015710-1. It describes data visualization influences how users consume information.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.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.wdf.informationmanagement.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.wdf.wdf.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. IVA A&E Wrapper Sample/Template (https://portal.sap.html?ET=informationmgmt:e1039:2129501a:&st=email) o By Robert Kearse. It is an external link: Data Visualization Patters (https://portal.sap.sap.sap.1 Page 85 of 92 .sap.sap. "Information Dashboard Design.wdf.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c105a8b-81ae9d050d26) o Adobe Photoshop file for the IVA logo (https://portal.corp/irj/go/km/docs/guid/8017c6c7516b-2c10-5a99-81b43b776c16) o 85 Summary of dashboard design principles from Stephen Few's book. published by Information Management.wdf. Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. Adobe Kuler (http://kuler.1 Page 86 of 92 .com/colorpic/) o 86 A free color picker tool. Iconico ColorPic (http://www.FOR NTERNAL USE ONLY Xcelsius Dashboard Design Best Practice (https://portal. compiled by Rich Lewis (SAP).wdf.com/#null) o A free web-hosted application for generating and searching color themes.corp/irj/go/km/docs/guid/809aa5f6-516b-2c10-d1bd93759647335e) o Presentation on visualization best practice using Xcelsius.sap.adobe.iconico. 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.1 Page 87 of 92 . 87 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. INTERNAL Figure 69: SAP American Recovery and Reinvestment Act (ARRA) IVA – M2 88 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 88 of 92 . 1 Page 89 of 92 .INTERNAL Figure 70: SAP Maximizing Customer Revenue and Retention (MCRR) IVA – M1 89 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. 1 Page 90 of 92 .INTERNAL Figure 71: SAP QatarGas IVA POC 90 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. INTERNAL Figure 72: Trade Promotion Effectiveness (TPE) integrated within SAP CRM Portal – M2 91 Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1.1 Page 91 of 92 . S/390. All other product and service names mentioned are the trademarks of their respective companies. Inc. These materials are subject to change without notice. Acrobat. Inc. R/3. eServer. the Adobe logo. Business Objects is an SAP company.1 Page 92 of 92 . and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S. 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. XHTML and W3C are trademarks or registered trademarks of W3C®. Adobe. World Wide Web Consortium. POWER. System i. Crystal Decisions. DB2. and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. and Motif are registered trademarks of the Open Group. Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. S/390 Parallel Enterprise Server. pSeries. DB2 Connect. Massachusetts Institute of Technology. Business Objects and the Business Objects logo. System z. Java is a registered trademark of Sun Microsystems. OpenPower. and other countries. Parallel Sysplex. OS/2. System z9. z/VM. MetaFrame. RACF. in the United States and in other countries.FOR NTERNAL USE ONLY © Copyright 2009 SAP AG. System z10. PartnerEdge. VideoFrame. JavaScript is a registered trademark of Sun Microsystems. Nothing herein should be construed as constituting an additional warrant. 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. WinFrame. BusinessObjects. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. POWER6. XML. IBM. RETAIN. Power Architecture. zSeries. and SAP Group shall not be liable for errors or omissions with respect to the materials.. POWER5+. and PowerPoint are registered trademarks of Microsoft Corporation. MVS/ESA. z/OS. POWER6+. System i5. GPFS. Title: UI Standards for Industry Value Accelerators Front-End Components Version: 1. PostScript. xSeries. System p. Intelligent Miner. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. Excel. Redbooks.S. Data contained in this document serves informational purposes only. Xcelsius. SAP NetWeaver. and MultiWin are trademarks or registered trademarks of Citrix Systems. i5/OS. ICA. PowerPC. Duet. Windows. without representation or warranty of any kind. HTML. Citrix. ByDesign. Microsoft. z10. UNIX. Netfinity. POWER5. iSeries. BladeCenter. BatchPipes. 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. SAP. HACMP. if any. System x. System Storage. OS/390. OSF/1. Web Intelligence. z9. Program Neighborhood. used under license for technology invented and implemented by Netscape. X/Open. Oracle is a registered trademark of Oracle Corporation. AIX. OS/400. Inc. Outlook. DB2 Universal Database. AS/400.A. The information contained herein may be changed without prior notice. SAP Business ByDesign. National product specifications may vary. System p5. PowerVM. Linux is the registered trademark of Linus Torvalds in the U. WebSphere. Crystal Reports.