You are on page 1of 208

SAP NetWeaver Visual Composer: User Guide

SAP NetWeaver Visual Composer r e l e a s e 6 . 0

Document version 1.1

SAP Online Help

07.09.2004

Copyright
Copyright 2004 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, 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 in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Icons in Body Text


Icon Meaning Caution Example Note Recommendation Syntax

Additional icons are used in SAP Library documentation to help you identify different types of information at a glance. For more information, see Help on Help General Information Classes and Information Classes for Business Information Warehouse on the first page of any version of SAP Library.

Typographic Conventions
Type Style Sample text Description Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Cross-references to other documentation. Sample text SAMPLE TEXT Emphasized words or phrases in body text, graphic titles, and table titles. Technical names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language when they are surrounded by body text, for example, SELECT and INCLUDE. Output on the screen. This includes file and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. Exact user entry. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER.

Sample text

Sample text <Sample text>

SAMPLE TEXT

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Contents
SAP NetWeaver Visual Composer: User Guide........................................................................ 8 Abbreviations Used in this Manual ...................................................................................... 10 System Requirements.......................................................................................................... 11 Logging On to Visual Composer .......................................................................................... 12 Understanding the Visual Composer Desktop..................................................................... 13 Workspace........................................................................................................................ 14 Task Panel........................................................................................................................ 15 Main Menu and Toolbar ................................................................................................... 16 Customizing the Visual Composer Desktop ........................................................................ 16 Customizing the Main Toolbar and Toolbox Buttons ....................................................... 17 Modifying the Location of the Task Panel Toolbar ........................................................... 17 Customizing Visual Composer Storyboard ...................................................................... 18 Getting Help ......................................................................................................................... 20 Quick Start - A Sample Work Session ................................................................................. 21 Create a New Model......................................................................................................... 22 Create a Page and an iView............................................................................................. 22 Design the iView Logic ..................................................................................................... 23 Import the Function....................................................................................................... 23 Test the iView Function ................................................................................................ 25 Add the User Input Form .............................................................................................. 26 Define the Output.......................................................................................................... 28 Customize the iView Layout ............................................................................................. 29 Deploy the iView to a Portal ............................................................................................. 30 Model Management - The Basics ........................................................................................ 32 Creating a New Model...................................................................................................... 33 Opening an Existing Model .............................................................................................. 33 Navigating the Model........................................................................................................ 34 Navigation Icons ........................................................................................................... 37 Searching through the Model........................................................................................ 38 Rearranging the Model Hierarchy .................................................................................... 39 Saving a Model................................................................................................................. 39 Exporting and Importing a Model ..................................................................................... 40 Printing a Model ............................................................................................................... 41 Creating or Changing a Model Password ........................................................................ 41 Managing Models ............................................................................................................. 42 Closing a Model................................................................................................................ 42 Closing Storyboard........................................................................................................... 42

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Creating Portal Content ....................................................................................................... 43 Model Hierarchy ............................................................................................................... 44 Adding Main Components to a Model .............................................................................. 45 Building an iView .............................................................................................................. 46 Defining Data Services ................................................................................................. 47 Adding Data Services to Your Model ........................................................................ 49 Testing the Data Service (Optional).......................................................................... 50 Defining the Properties of the Data Service.............................................................. 51 Using the BI Query Wizard .................................................................................... 53 Selecting a System ............................................................................................ 56 Selecting a Query Template .............................................................................. 57 Count (OLAP)................................................................................................. 60 Configuring Count Parameters ................................................................... 61 Cumulative Total (OLAP) ............................................................................... 64 Configuring Cumulative Total Parameters ................................................. 65 Grand Totals (OLAP) ..................................................................................... 68 Moving Average (OLAP) ................................................................................ 69 Configuring Moving Average Parameters .................................................. 70 Percentage Growth (OLAP) ........................................................................... 73 Configuring Percentage Growth Parameters ............................................. 74 Percentage Share (OLAP) ............................................................................. 76 Configuring Percentage Share Parameters ............................................... 77 Planned vs. Actual (OLAP) ............................................................................ 79 Configuring Planned vs. Actual Parameters............................................... 80 Rank Change (OLAP) .................................................................................... 84 Configuring Rank Change Parameters....................................................... 85 Top N (OLAP)................................................................................................. 87 Configuring Top N Parameters................................................................... 88 Trend Over Time (OLAP) ............................................................................... 90 Configuring Trend Over Time Parameters ................................................. 91 Zero Activity (OLAP)....................................................................................... 93 Configuring Zero Activity Parameters......................................................... 94 All Data (Relational) ....................................................................................... 96 Count (Relational) .......................................................................................... 97 Freeform (Relational) ..................................................................................... 98 Heatmap (Relational) ..................................................................................... 99 Configuring Heatmap Parameters ............................................................ 101 Minimum/Maximum (Relational)................................................................... 103 Configuring Minimum/Maximum Parameters ........................................... 104 Selecting a Cube.............................................................................................. 106

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Defining Filters ................................................................................................. 107 Selecting a Table ............................................................................................. 109 Selecting Fields................................................................................................ 110 Selecting Fields - Count................................................................................... 111 Selecting Fields - Heatmap.............................................................................. 113 Configuring Joins ............................................................................................. 114 Configuring Filters............................................................................................ 116 Specifying the Sort Order ................................................................................ 118 Previewing the Result ...................................................................................... 119 Working With BW Query Views ....................................................................... 120 Selecting a Query......................................................................................... 121 Selecting a Query View................................................................................ 122 Configuring Queries Directly in Data Services .................................................... 123 Using the MDX Editor .......................................................................................... 125 Using the SQL Editor........................................................................................... 128 Working With Queries.......................................................................................... 130 Modifying Existing Queries .............................................................................. 131 Query Properties.............................................................................................. 132 Further Configuring Your Query ...................................................................... 133 Creating BI Queries................................................................................................. 136 Adding Siebel Data Services .................................................................................. 136 Defining the UI Logic .................................................................................................. 138 Adding UI Components ........................................................................................... 138 Defining Input to the Data Service....................................................................... 139 Defining Output from the Data Service................................................................ 141 Adding Fields to a View ....................................................................................... 144 Adding Operators ................................................................................................ 145 Performing Data Binding Between UI Components ............................................ 147 Defining UI Component General Properties ........................................................... 148 Defining UI Component Field Properties ................................................................ 149 Dynamic Expressions Editor ................................................................................... 151 Overview of Dynamic Expressions...................................................................... 152 Using the Expressions Editor .............................................................................. 152 Frequently-Used Dynamic Expressions .............................................................. 153 Defining a Chart ...................................................................................................... 161 Defining an HTML View .............................................................................................. 162 Defining Eventing Between iViews ............................................................................. 164 Tracing Dependencies................................................................................................ 166 Validating the iView Logic........................................................................................... 167 Customizing the iView UI............................................................................................ 167

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Selecting Objects in the Layout Workspace ........................................................... 168 Defining iView Display Properties ........................................................................... 169 Customizing the View Layout and Behavior ........................................................... 170 Customizing the Controls Displayed in a View ....................................................... 172 Customizing the Position and Size of iView Components ...................................... 174 Previewing the iView ...................................................................................................... 176 Generating Model Documentation ..................................................................................... 177 Automatically Generating Model Documentation ........................................................... 177 Defining Documentation Properties for Model Components.......................................... 178 Deploying the Model .......................................................................................................... 180 Debugging the Model......................................................................................................... 182 Accessing the Debugger ................................................................................................ 182 Viewing a Log of Portal Server Actions.......................................................................... 183 Using the Events Monitor ............................................................................................... 184 Using the Data Inspector................................................................................................ 185 Importing Visual Composer Content into the Portal .......................................................... 186 Performing Backup and Restore........................................................................................ 186 Customizing the Design Workspace.................................................................................. 187 Design Toolbox .............................................................................................................. 188 Graphic Symbol Properties List...................................................................................... 189 Troubleshooting ................................................................................................................. 190 Using Log Files for Troubleshooting .............................................................................. 191 Appendix: Examples .......................................................................................................... 193 Example 1: Customer Address iView............................................................................. 194 Example 2: Expanded Banks iView ............................................................................... 197 Example 3: Salesorder iView ......................................................................................... 200 Example 4: BI iView ....................................................................................................... 205

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

SAP NetWeaver Visual Composer: User Guide


Purpose
SAP NetWeaver Visual Composer is a powerful design tool that facilitates the creation of portal content for SAP Enterprise Portal 6.0 and NetWeaver 04, using a visual user interface rather than manually writing code. It provides sophisticated, yet simple-to-use tools for creating portal iViews that process data from back-end systems. Visual Composer operates on top of the portal, utilizing the portals connector-framework interfaces to allow users to access a range of data sources, including SAP and third-party enterprise systems. Special connectors are also supported, such as that used for accessing data services from Siebel systems. Because Visual Composer is a fully Web-based application, business consultants can interact with business users (content experts) to build or customize pages and iViews as needed, accessing the software from any machine.

SAP NetWeaver Visual Composer can produce iViews that run on both SAP Enterprise Portal 6.0 SP2 (Patch 4 and above) as well as SAP NetWeaver 04 SP Stack 05 and above. Siebel connectivity (through iWay connectors) is available only with SAP Enterprise Portal 6.0 SP2, while SAP BI connectivity is available only with SAP NetWeaver 04.

Features
From the Visual Composer client the Storyboard you can design models that include your hierarchy of pages and their required iViews. All aspects of the iViews can be constructed, including: The Data Service Layer Visual Composer provides tools that let you connect via the portal to back-end applications defined in the portal system landscape. This connection enables you to import into your Visual Composer model the relevant Remote Function Calls (RFCs), Business APIs (BAPIs) and other data sources on which you want to base your iViews. The User Interface (UI) Logic The UI logic defines which UI components are presented to the user at runtime, how the user may interact with the components, and what the underlying data queries are. You construct the UI logic by dragging and dropping icons that represent the elements of your iView, such as the forms it displays at runtime. As you construct the UI logic, Visual Composer writes the underlying code. The UI Layout The layout defines all the visual aspects of the iView. The Storyboard provides wysiwyg tools for customizing the iView layout. The model you build with Visual Composer is automatically coded in the proprietary Generic Modeling Language (GML). When your Visual Composer model is complete, you use the Visual Composer compiler to convert the GML code into a format supported by the portal. You can also export your model to another Visual Composer, and import other models as well.

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

The following figure depicts the general architecture of the Visual Composer system.
Web Browsers / Clients

SAP NetWeaver Visual Composer

Pages / iViews

Pages / iViews SAP Enterprise Portal

Data
Design Time Connectivity

Runtime Connectivity

Metadata

SAP Apps

JDBC

Non SAP

Web Services

SAP NetWeaver Visual Composer Architecture The Visual Composer compiler lets you generate business packages that can be deployed to any portal using the standard deploy procedure. Once deployed, the pages and iViews created by Visual Composer can retrieve data from the SAP Enterprise Portal runtime connectivity framework and display this information just like any other hand-coded portal pages and iViews.

Before You Begin


You are advised to prepare for portal connectivity by ensuring that: You have the appropriate user permissions to access the portal. You are mapped in the portal as a user to the back-end system from which you intend to import data services. Your portal is properly connected to the required back-end system(s) and you know what the system alias is for each system.

For more information, see the following sections in the portal Administration Guide, accessed from SAP Help Portal at help.sap.com\nw04 SAP Library SAP NetWeaver People Integration Portal Administration Guide System Administration. User permissions: Permissions, Role/User Distribution and Object Locking Portal Permissions User mapping: User Management Configuration Defining systems and assigning system aliases: System Configuration System Landscape Creating Systems

Be sure to read SAP Note 716752 for the latest information about limitations, known issues, and workarounds for SAP NetWeaver Visual Composer. You can find the SAP Note at SAP Service Marketplace at service.sap.com/notes.

SAP NetWeaver Visual Composer: User Guide

SAP Online Help

07.09.2004

Abbreviations Used in this Manual


The following is a list of the abbreviations used in this manual. Where needed, a short explanation is also provided. API BAPI BI BW EPCM Application Programming Interface Business API Business Intelligence Business Information Warehouse Enterprise Portal Client Manager An object defined by the portal Client Framework to handle functions such as client eventing Generic Modeling Language SAP Internet Demo and Evaluation System Internet Graphics Service Used to display results of BI queries in Heatmap format Java 2 Enterprise Edition The portal operates on top of the J2EE engine Java database connectivity Multidimensional Expression language Used for manipulating multidimensional data Online Analytical Processing A means of processing and presenting multidimensional data for analysis and management Portal Archive file Contains all resources of a portal application Portal Content Directory Remote Function Call Structured Query Language A standardized language for retrieving data from and updating a database Scalable Vector Graphics A language used to describe two-dimensional vector and mixed vector/raster graphics in XML User Interface Uniform Resource Locator The address of a site on the Internet Uniform Resource Name A persistent identifier for information resources
XML for Analysis A set of XML message interfaces used to define data access interaction

GML IDES IGS J2EE JDBC MDX OLAP

PAR PCD RFC SQL SVG

UI URL URN
XMLA

between a client and an analytical data provider working over the Internet

SAP NetWeaver Visual Composer: User Guide

10

SAP Online Help

07.09.2004

System Requirements
In order to log on to and work with Visual Composer Storyboard, be sure that your Visual Composer client machine meets the following software requirements: Microsoft Internet Explorer 6.0 SP1 or higher Microsoft XML Parser 4.0 Adobe SVG Viewer 3.0

SAP NetWeaver Visual Composer: User Guide

11

SAP Online Help

07.09.2004

Logging On to Visual Composer


Procedure
1. Open your Internet Web browser with network access to the Visual Composer server. 2. In the address bar, enter the URL to the Visual Composer server as follows: http://<machine name>.<domain>:<IIS port>/vcserver/

http://vcserver1.sap.com:1000/vcserver/ (where vcserver1 is the name of the Visual Composer Server host, sap.com is the domain, and 1000 is the IIS port in use by the Visual Composer Server installation.

The last segment of the URL, vcserver, is the default name of the virtual home directory. If you defined a different directory name during the Visual Composer Storyboard installation, replace the segment vcserver in the URL with your Home directory name.

Result
When you log on to Visual Composer Storyboard for the first time, the following screen appears, displaying an empty workspace and a Get Started task panel to the right.

At your next logon(s), Visual Composer Storyboard can display your last work sessions, depending on your system preferences. SAP NetWeaver Visual Composer: User Guide 12

SAP Online Help

07.09.2004

Understanding the Visual Composer Desktop


Purpose
Visual Composer Storyboard contains all the tools you need to create your model. The Storyboard desktop has two main areas: the workspace and the accompanying task panel. The workspace displays your model as you build and modify it, while the task panel displays the tools you use to build your model.

Main Menu Main Toolbar

Connection Block Task Panel Toolbar

Tabbed Workspace

Task Panel

Workspace Toolbox

Main Parts of the Visual Composer Desktop

SAP NetWeaver Visual Composer: User Guide

13

SAP Online Help

07.09.2004

Workspace
Definition
The grid on which you build your model.

Structure
The workspace can contain up to four tabs, or model views: Tab Design Layout Preview Source Use Constructing your model Customizing the layout of iViews Previewing and validating the logic of iViews Reviewing the code that is automatically generated by Storyboard as you build your model

The various tabbed workspaces are available according to the model component you are working with. Each tab has its own workspace toolbox, which provides a set of tab-specific tools to assist you with the tasks you perform in that workspace. By default, the toolbox appears at the bottom of the displayed workspace. You can change its location or hide it by choosing Tools Options, or by right-clicking the toolbox and choosing the docking option from the context menu. See Customizing the Visual Composer Desktop [Page 16].

To facilitate construction of your model, you can open a model component in an additional window, showing the different levels of the model at the same time. For example, you may want to view all the iViews of a page in one window, while viewing one of the open iViews at the same time. To open multiple windows: In the Design workspace, right-click the component that you wish to open in a different window and from the context menu, choose Open in New Window.

SAP NetWeaver Visual Composer: User Guide

14

SAP Online Help

07.09.2004

Task Panel
Definition
The task panel to the right of the workspace displays one set of tools at a time. Each tool set can be displayed using the task panel toolbar to the right of the panel. The following task panels are available:

Tool Set Get Started

Toolbar Button

Menu Option

Description Appears when no model is open in the workspace. Lets you open an existing model or create a blank model.

Browse the Model Add Elements

Search

Displays a hierarchical tree that represents your model. You can use the tree to modify the model hierarchy and to navigate the model. Used to configure the fields of a UI component.

Model

Design the Views

Model

Used, in conjunction with the Layout workspace, to customize the layout of your iViews. Used, in conjunction with the Design workspace, when defining the flow of information in an iView. Used to define properties of the various model components. Some of the properties relate only to the design environment, while others relate to the behavior and display of content at runtime. Used, in conjunction with the Design workspace, to import data services into your model. Used to compile and deploy the portal business packages. Used, in conjunction with the Preview workspace, to validate the logic of your model.

Define Fields

Model

Define Properties

Model

Select Data Services Deploy

Model

Build

Debug the Model

Build

Structure
The tools on the task panels are dynamic and context driven. In other words, the displayed task panel provides options relevant only to the model component currently selected in the workspace. For example, if a page is displayed in the Design workspace, only elements that can be added to a page are displayed in the Elements task panel. You can hide the task panel by clicking the X that appears at the top right of the task panel toolbar. If the task panel is hidden, you can display it by dragging it open using the side bar to the right of the task panel toolbar.

SAP NetWeaver Visual Composer: User Guide

15

SAP Online Help

07.09.2004

Main Menu and Toolbar


Definition
The main menu contains the options required to create and modify models, create and lay out pages and iViews within your models, link the various model components, and save your models. The main toolbar provides these options in graphic form, as the small icons next to each menu option indicate. The first four groups of buttons in the toolbar generally correspond to the options available in the File, Edit and Search menus, while the remaining buttons can be found in a number of different menus. The instructions in this guide explain how to launch the Visual Composer functions using the menu options only. Remember, though, that each function can be launched with a toolbar button, easily identified by its associated tool tip, and also by using the right-click menus. To customize the main toolbar, see Customizing the Main Toolbar and Toolbox Buttons [Page 16].

Customizing the Visual Composer Desktop


Purpose
You can modify the layout and the look of the Visual Composer desktop by rearranging its components and by selecting specific options for defining the functionality of the workspace tools. See: Customizing the Main Toolbar and Toolbox Buttons [Page 16] Modifying the Location of the Task Panel Toolbar [Page 17] Customizing the Desktop Layout [Page 18]

SAP NetWeaver Visual Composer: User Guide

16

SAP Online Help

07.09.2004

Customizing the Main Toolbar and Toolbox Buttons


Use
You can customize the display of the buttons in the main toolbar and each workspace toolbox.
...

Procedure
1. Right-click the toolbar/toolbox. 2. Choose Customize from the context menu. (To customize the main toolbar, you can also choose Tools Customize.)

Result
The Customize dialog box is displayed. The up and down arrows move the selected button in the Current toolbar buttons list (on the right) up and down. The left arrow adds a selected button from the Available toolbar buttons list (on the left) to the toolbar. The right arrow removes the selected button from the Current toolbar buttons list.

Modifying the Location of the Task Panel Toolbar


Use
You can choose to display the task panel toolbar to the right or the left of the workspace.

Procedure
...

1. Choose Tools Options. 2. From the Taskbar list of the Options View dialog box, select either Dock Right or Dock Left. Alternatively, you can right-click the task panel toolbar and choose the appropriate option from the context menu.

SAP NetWeaver Visual Composer: User Guide

17

SAP Online Help

07.09.2004

Customizing Visual Composer Storyboard


Use
The Tools Options menu option displays a set of dialog boxes that enable you to customize the layout and general behavior of the Visual Composer Storyboard.

Activities
To access the dialog boxes, choose Tools Options. The dialog box that appears has the following tabs: View, for positioning the task panel and the workspace toolboxes, and adjusting the layout of multiple workspace windows Edit, for fine-tuning general Visual Composer operations Draw, for defining workspace visualization parameters Portal, for defining processes for deployment

Features
The following table describes the customizing options available in the Options dialog boxes. Tab Name View Taskbar Toolbox Option Description Options for manipulating the main components of the Visual Composer desktop. Lets you position the task panel toolbar on either the right or the left of the desktop. Lets you position the current workspace toolbox above, below, to the right or the left of the workspace. You can also hide it entirely. Enables you to define how multiple windows are displayed. Used to automatically display the last model worked on when you next access Visual Composer. If this is not selected, you need to open a model each time you access the application. Options for defining parameters for Visual Composer editing operations. Maximum undo levels Maximum history size Number of times you can perform undo sequentially. Number of times you can use a left or right arrow to navigate backwards/forwards (respectively) in your tree structure. Number of multiple windows that can be open at the same time. Options for defining display parameters when manipulating model components in the workspace.

Windows Reload last workspace at startup

Edit

Maximum open editors Draw

SAP NetWeaver Visual Composer: User Guide

18

SAP Online Help

07.09.2004

Tab Name

Option Automatically fit diagram on open Clip shapes to diagram boundaries Show diagram caption Drag shapes smoothly Show drag and drop sprite Select partially within area Optimize screen refreshing

Description Adjusts the size of the last-opened model in the workspace when you first access Visual Composer. Restrains a model component icon when it is moved to the edge of the workspace. Displays (or hides) the title of the model component in the workspace. Enhances the resolution of model icons as they are dragged in the workspace. Displays the animated shape of the object you are dragging. Lets you select a group of objects by dragging the bounding rectangle partly over them. Enhances the speed and quality of the model display. Options used for the deployment process.

Portal PAR name prefix Deployment folder

Lets you define the prefix of all PAR files created by Visual Composer. Lets you indicate the path to the Portal Catalog folder that will include the compiled file (for faster location of the file later and to prevent overwriting an existing file). This should be the URL of a portal content directory (PCD). If different than the default PCD URL, be sure that the folder already exists in the portal, with administrator Full Control permissions. For more information about portal permission levels and setting permissions, see the portal Administrator Guide at help.sap.com\nw04 SAP Library SAP NetWeaver People Integration Portal Administration Guide System Administration Permissions, Role/User Distribution and Object Locking Portal Permissions. Enables you to enter the setting used to display results of BI queries using the Heatmap display. Contact your Business Information Warehouse (BW) System Administrator if you need help determining this URL. The suffix to the URL for your BW query view Web service. The default listed is a common configuration. This setting is used to display results of BI queries based on native BW data services. Contact your BW System Administrator for assistance.

Internet Graphics Service (IGS) URL

BW Query View WS suffix

SAP NetWeaver Visual Composer: User Guide

19

SAP Online Help

07.09.2004

Getting Help
You can get online help at a number of locations in Visual Composer Storyboard: To display the first topic in the online SAP NetWeaver Visual Composer User Guide (with access to the entire guide), choose Help Help or click the toolbar. To get information about a section of the screen, click the button in the

button in the toolbar and

click the question-mark-cursor ( ) on the area for which you need help. If no help is available at that point, the question-mark-cursor is not shown. To get information about a screen or dialog box, click the displayed Help button.

If you attempt to get help and receive a Help is not currently available message, the Visual Composer online help package has probably not been installed. It needs to be downloaded from the NetWeaver 04 Help portal (at help.sap.com\nw04) to the Storyboard server. This must be done by the Storyboard server administrator. Instructions for running the Help installer are found in the Readme.txt file in the Help installer .zip package.

SAP NetWeaver Visual Composer: User Guide

20

SAP Online Help

07.09.2004

Quick Start - A Sample Work Session


Purpose
This section demonstrates a Visual Composer work session, giving you a quick introduction to the basic Visual Composer workflow. The proposed workflow includes the following steps:
...

1. Create a New Model [Page 22] 2. Create a Page and an iView [Page 22] 3. Design the iView Logic [Page 23] 4. Customize the iView Layout [Page 29] 5. Deploy the iView to a Portal [Page 30] For additional examples of creating iViews, see Appendix: Examples [Page 193].

Features
In this sample work session, a page with an iView is created to enable a portal user to view a list of banks in a specified country. It will look something like this:

SAP NetWeaver Visual Composer: User Guide

21

SAP Online Help

07.09.2004

Create a New Model


Use
The first step in creating portal content is to create or open a Visual Composer model. A model is the package of content (pages and iViews) to be deployed to the portal.

Procedure
...

1. Choose File New Model. 2. In the Create New Model dialog box, enter a Model Name; for example, QuickStart1. (No spaces are allowed in the name.) 3. Make sure that SAP Portal User Interface Model, EP kit is selected. 4. Click OK to display the Design workspace and begin building your model.

Create a Page and an iView


A Visual Composer model may include multiple pages and iViews. This sample model will contain a single page with an iView.

Procedure
To create the page:
...

1. In the workspace, click the Design tab, if it is not already displayed. 2. From the Elements task panel at the right, drag the Module icon onto the workspace. The module is named automatically. 3. Double-click on the module icon to open it. 4. From the Elements task panel, drag the Page icon onto the workspace. 5. Enter a name for the page, such as Banks Page, by overwriting the existing one. (You can also right-click the Page icon, and from the context menu, choose Rename.)

To create the iView:


...

1. Double-click the Banks Page icon to display the page. An empty workspace with the page name is displayed. 2. From the Elements task panel, drag the iView icon into the workspace. 3. Rename the iView Banks iView. 4. Double-click the Banks iView icon to display the iView. Note that different elements are displayed in the Elements task panel, according to the component opened in the workspace.

SAP NetWeaver Visual Composer: User Guide

22

SAP Online Help

07.09.2004

Design the iView Logic


Purpose
For the sample iView, you need to create the following components: A user input form that lets the user enter a search string for a specific country, and launch the search. A table that displays the list of banks returned by the search.

Process Flow
To define the logic of this iView, you do the following: Import the application function on which the iView functionality is based: BAPI_BANK_GETLIST (see Import the Function [Page 23]). Add a user input form to the iView (see Add the User Input Form [Page 26]). Define the relationship between the input form and the imported BAPI. Add a table view to the iView in order to display the list of banks returned by the BAPI (see Define the Output [Page 28]).

Import the Function


Use
The functionality of the sample iView, Banks iView, is based on the SAP function BAPI_BANK_GETLIST. Therefore, this function needs to be imported into the Visual Composer Storyboard. The import process brings in meta-data about the function, such as the fields required for input and the data that is output.

Procedure
...

1. Choose Model Select Data Services. (Alternatively, click the Data button in the task panel toolbar.) 2. In the Portal field at the right end of the main toolbar, enter the URL of the portal from which you can access the back-end system used by the iView. For example, you could enter: http://myportal.sap.com:50000, where:

myportal is the name of the portal server host sap.com is the domain 50000 is the J2EE port number in use by the portal.

3. Click the traffic light icon to the right of the Portal field. The portal Welcome screen appears. 4. Log on to the portal as a user that exists in the connected back-end system, or which is mapped to a user of that system. Click OK. Once a connection to the portal is established, a list of system aliases defined in the portal system landscape appears in the System drop-down list.

SAP NetWeaver Visual Composer: User Guide

23

SAP Online Help

07.09.2004

5. From the System drop-down list, choose the SAP system that contains the function BAPI_BANK_GETLIST. 6. Under Search SAP System, click the Search tab and in the Name field, enter the search string: BAPI_BANK_GETLIST. Then click Search (at the bottom). A list of function modules matching the search string is displayed. 7. Drag the function module BAPI_BANK_GETLIST from the Data task panel into the workspace:

The data service is added to your model. 8. Periodically save your work. To do so, choose File Save Model.

SAP NetWeaver Visual Composer: User Guide

24

SAP Online Help

07.09.2004

Test the iView Function


Use
You may optionally test the functionality of the data service by providing input values and checking the results that are returned.

Be sure that you are still connected to the portal from which you imported the data service.

Procedure
...

1. Right-click the BAPI_BANK_GETLIST icon and from the context menu, select Test Function. The Test SAP Function dialog box appears. 2. In the Bank Ctry* field, type US and in the Max Rows* field, type 25. 3. Click Execute. A list of 10 banks and their details is displayed.

4. Click Close.

SAP NetWeaver Visual Composer: User Guide

25

SAP Online Help

07.09.2004

Add the User Input Form


Use
After testing the iView functionality, you add the input form that enables the user to launch a search for banks in a specific country. The data in the input (search) form will be mapped to the input port of the data service for processing.

Procedure
...

1. In the workspace, drag your mouse from the Input port of the data service, Bank Getlist, as follows:

2. Release the mouse, and from the context menu, choose Add Input Form. The input form is added to your model, and a line links the form to the data service. 3. Double-click the input form and check the Fields task panel to view the fields BANK_CTRY and MAX_ROWS that are displayed in the input form of the iView. The SUBMIT field indicates the button. The check marks in the first column (under the eyeglasses icon) indicate the fields that are displayed in the input form, to be filled in by the user.

SAP NetWeaver Visual Composer: User Guide

26

SAP Online Help

07.09.2004

4. Click the Input port of the Bank Getlist data service. The check marks in the first column, under the exclamation point (!) indicate that they are fields required as input by the data service, as shown in the Required field of the Data list. In this example, both BANK_CTRY and MAX_ROWS are mandatory fields. In other words, this function requires a bank country, and a value for the number of rows as input in order to return data. 5. In the workspace, click the line (submit) connecting the input form and the data service. Using the Fields task panel, you can verify that the BANK_CTRY and MAX_ROWS fields selected for display in the input form have been mapped to the corresponding field in the data service.

SAP NetWeaver Visual Composer: User Guide

27

SAP Online Help

07.09.2004

Define the Output


Use
To define how the returned results will be displayed in the iView, we will add an operator to sort the data from the data service, and then channel the data to a table, which displays the list of banks returned by the data service.

Procedures
To add the operator:
...

1. In the workspace, drag your mouse out from the Bank List output port of the Bank Getlist data service. 2. Release the mouse and from the context menu, choose Sort Data. The Sort operator is added to your model. 3. In the Fields task panel list, click in the first column of the BANK_NAME field to indicate that the list should be sorted alphabetically according to bank name. To add the table view:
...

1. In the workspace, drag your mouse from the output port of the Sort operator. 2. Release the mouse and from the context menu, choose Add Table View. 3. Rename the newly-added table view icon: Bank List Table. 4. All of the output fields of the Bank List output port of the Bank Getlist data service will be channeled through the Sort operator to the input port (in) of the Bank List Table. However, by default, none of the fields is selected for display. If Bank List Table is not selected, select it now. The list of fields available for display appears in the Fields task panel.

5. In the Fields task panel, select the fields you want to display in the Bank List table by clicking in the column headed by the eye-glasses icon: BANK_CTRY, BANK_KEY, BANK_NAME, and CITY. Alternatively, you can select all of the fields by clicking the (Select All) icon below the list.

SAP NetWeaver Visual Composer: User Guide

28

SAP Online Help

07.09.2004

Customize the iView Layout


Visual Composer provides many options for customizing the visual aspects of your iView. In this example, we will modify a text string that appears in the input form, and remove one column from the table view. For detailed information about layout customization options, see Defining iView Display Properties [Page 169].

Procedure
...

1. Choose Model Design the Views (or click the Designer button in the task panel toolbar). The Design the Views tools appear in the task panel. 2. In the workspace, click the Layout tab. 3. Click the Bank Ctry field that appears in the Input Form. 4. On the Controls tab in the Designer task panel, find the Label field below the bottom of the Available Styles list, enter the text Bank Country, and on your keyboard, press Enter. In the Layout workspace, the field label is updated. 5. Having lengthened the label text, you need to adjust the layout to accommodate the longer label. From the Available Styles list, select Long Label. Do the same for the Max_Rows field. 6. In the form itself, select and move the fields, and adjust the Submit button accordingly.

To move the three elements at once, click the Bank Country field and then press Ctrl when selecting the Max Rows field and the Submit button. Once all items are selected, you can move them together. 7. Click in the title bar of Bank List Table to select it. 8. On the Controls tab in the Designer task panel, deselect the Bank_Key checkbox to remove the Bank Key column from the Bank List table, as shown in the following figure.

SAP NetWeaver Visual Composer: User Guide

29

SAP Online Help

07.09.2004

You can zoom in and out of the components displayed in the Layout workspace by clicking the Zoom In and Zoom Out buttons in the Layout toolbox beneath the workspace. You can also change the layout of the iView using the other buttons of the Layout toolbox. See Customizing the View Layout and Behavior [Page 170].

Deploy the iView to a Portal


Use
Once you have finishing constructing your Visual Composer model, you compile the model into a language supported by your portal, and deploy the resulting business package to the portal.

Procedure
...

1. From the Preview workspace, choose Build Deployer. The Deployer task panel appears, as follows:

2. If you are not already connected to a portal, connect to it now:


In the Portal field at the top right (at the right end of the main toolbar), enter the URL of the portal from which you can access the back-end application containing the data needed by the iView. For example, you could enter: http://myportal.sap.com:50000, where:


myportal is the name of the portal server host sap.com is the domain 50000 is the J2EE port number in use by the portal.

Click the traffic light icon to the right of the Portal field. The portal Welcome screen appears.

SAP NetWeaver Visual Composer: User Guide

30

SAP Online Help


07.09.2004

Enter a User ID and Password that exists in the connected back-end system, or which is mapped to a user of that system. Click OK.

3. Click Banks Page in the navigation path above the workspace to navigate up to page level in your model. This will enable you to deploy the entire model rather than only lower-level components. 4. Click Deploy. Your model is compiled in HTMLB, and deployed to the portal to which you are connected. The log displays the progress of the deployment process. The components created during deployment are listed in the Created Components list.

Result
Following deployment, the iView is found in the portal Visual Composer iViews channel. For additional examples of creating iViews, see Appendix: Examples [Page 193].

SAP NetWeaver Visual Composer: User Guide

31

SAP Online Help

07.09.2004

Model Management - The Basics


Purpose
The objects you create in Visual Composer Storyboard are called models. A model commonly defines portal content, such as pages and iViews. In the process of using Visual Composer to develop portal content, each model ultimately becomes a portal business package. Visual Composer Storyboard provides standard file management features for managing your models. You can open a new or existing model, navigate through a model, print a model, view a list of existing models and their properties, and modify the model properties.

You can use the main menu options to perform basic Visual Composer procedures. Alternatively, you can use the corresponding buttons in the main toolbar. All the models you create with the Visual Composer Storyboard are saved on the Visual Composer Storyboard server, in the folder \inetpub\wwwroot\Visual Composer\data. Each model is saved in a subfolder with the same name as the model. See: Creating a New Model [Page 33] Opening an Existing Model [Page 33] Navigating the Model [Page 34] Rearranging the Model Hierarchy [Page 39] Saving a Model [Page 39] Exporting and Importing a Model [Page 40] Printing a Model [Page 41] Managing Models [Page 42] Closing a Model [Page 42] Closing Storyboard [Page 42]

SAP NetWeaver Visual Composer: User Guide

32

SAP Online Help

07.09.2004

Creating a New Model


Procedure
...

1. Choose File New Model. 2. In the Create New Model dialog box, do the following: a. In the Model Name field, enter a project name using alphanumeric characters, with no spaces or punctuation marks. (You may include the underscore character in the project name.) b. In the Save in field, choose the Visual Composer installation for which you want to create your model. c. From the list of kits, select SAP Portal User Interface Model, EP kit. d. To assign a password to the model, select the Set Password checkbox and enter the password in the field to the right. e. Click OK. To add a password to the model at a later time, or to change an existing model password, see Creating or Changing a Model Password [Page 41].

Result
The new model is opened in the Design workspace. For details about constructing your model, see Creating Portal Content [Page 43].

Opening an Existing Model


Procedure
...

1. Choose File Open Model. The Open Model dialog box appears. 2. From the Look in list, choose the Visual Composer installation that contains your model, and then choose the model from the list. 3. If the model is password-protected, enter the password in the Model Password dialog box. 4. Click OK.

Result
The selected model is displayed in the Design workspace. For details about modifying the model, see Creating Portal Content [Page 43].

SAP NetWeaver Visual Composer: User Guide

33

SAP Online Help

07.09.2004

Navigating the Model


Purpose
Your model defines a hierarchy of components, which may be modules (used to organize model elements), pages, iViews, and iView views and data functions. You can view the entire model hierarchy in the Explore task panel.

Process Flow
To open this task panel, choose Search Model Explorer. A tree representing the hierarchy of elements already defined in the model is displayed in the task panel.

Model Explorer Browse Tree When you first create a new model, only one node appears in the tree, representing the entire model. As you add elements to your model, nodes are added to the tree accordingly.

SAP NetWeaver Visual Composer: User Guide

34

SAP Online Help

07.09.2004

Result
While the Model Browser provides an overview of the entire model, the workspace displays only one part of the model at a time. You can navigate the model by expanding portions of the tree, and selecting nodes for display. The Options menu at the top right of the Explore task panel gives you the following options for organizing your model hierarchy: Sort by Type or Sort by Name Show detailed tree: Displays all model components, including all the UI components in the iView (as in the previous figure). When this option is not selected, only main model components modules, pages and iViews are shown in the tree. Display Hierarchy Lines: Adds vertical lines to the tree structure for clarifying the hierarchy of components. Single-click to Open (rather than using a double-click to open each component)

Note that not all model elements can be displayed in the Layout and Preview workspaces. Therefore, Model Browser navigation is best performed in the Design workspace, which displays the model components pages and iViews or the iView components. For more information about navigational tools, see: Creating Portal Content [Page 43] Searching through the Model [Page 38]

Example
If the model contains two pages, and each page contains three iViews, when you select (double-click) the model node in the Model Explorer, the workspace displays two page icons, as in the following example.

If you navigate to the next level down and select one of the pages, the Design tab displays three iView icons, as in the following example:

SAP NetWeaver Visual Composer: User Guide

35

SAP Online Help

07.09.2004

If you navigate to the next level down and select an iView or one of the elements contained in the iView, the Design tab displays the iView diagram, as in the following example:

You may also navigate by double-clicking icons displayed in the Design workspace. For example, you can double-click a page icon to open the page, and you can double-click an iView icon to open the iView. The navigation path that appears above the workspace indicates the location in the hierarchy of the component displayed in the workspace. You can click the different segments of the path to navigate to the component each segment represents. You can also click the doublearrows that separate the segments. Note that as you navigate through the model, your location is shown in the model browse tree. Additional navigation tools are found in the Search menu (in the main menu), including the Back, Forward, and Parent commands.

SAP NetWeaver Visual Composer: User Guide

36

SAP Online Help

07.09.2004

Navigation Icons
Use
The icon at the top left of the workspace, to the left of the navigation path, indicates the type of model component that is presently being viewed. The different icons, listed in the following table, are also useful when viewing component properties and for reminding you of where you are in the model hierarchy.

Features
Icon Description New model (no element has been selected yet) Module Page iView

SAP NetWeaver Visual Composer: User Guide

37

SAP Online Help

07.09.2004

Searching through the Model


...

1. At the bottom of the Explore task panel, choose Search Model in the Related tasks list to display the Search Model task panel.

Search Model Task Panel 2. In the Text field at the top, enter a text string to search for the name of the model component. 3. To limit your search, you can use the Type drop-down list to select the type of element to search for, such as Page or Form View. 4. To further limit your search, you can use any or all of the following options towards the bottom of the panel:

Search sub-diagrams: Search all nodes in model. Case sensitive: Search only for text listed exactly as in the Text field. Full text search: Searches through all text in the model.

5. Click Search. Items with the text string in their names will be listed in the Search results list. 6. (To return to the Explore task panel, choose Explore Model in the Related tasks list.)

SAP NetWeaver Visual Composer: User Guide

38

SAP Online Help

07.09.2004

Rearranging the Model Hierarchy


... ...

1. Choose Search Browse the Model. 2. In the model explorer browse tree, press CTRL and drag the icon or label of the node representing the component you want to move, and drop it onto the label of the node representing the target location. You can move a component in the hierarchy by pressing CTRL and dragging the icon from its place in the tree to the target location, if it is displayed in the workspace. For example, you could CTRL + drag an iView from the tree into a page displayed in the Design workspace. Dragging an element without holding down the CTRL key generates a same-name copy in the new location. You should always rename copied elements, to avoid problems with overwrite when you deploy the package.

Saving a Model
Use
Visual Composer lets you manually save changes to a model. It also lets you define a periodic automatic save.

Procedures
To save the model: Choose File Save Model. To define a periodic automatic save:
...

1. Choose Tools Options. 2. In the Options dialog box, click the Edit tab. 3. Choose the Automatically save work every option, and from the drop-down list, choose a time period for the save. 4. Click OK.

SAP NetWeaver Visual Composer: User Guide

39

SAP Online Help

07.09.2004

Exporting and Importing a Model


Use
You can save a model as a GML (Generic Modeling Language) file so that it can subsequently be imported into a different Visual Composer Storyboard (or saved in case the Storyboard in which it was created is uninstalled). Subsequently, you can import the exported model into the Storyboard in which you are working

Procedures
To export a model:
...

1. Choose Tools Export/Import. The Export/Import dialog box appears. 2. In the Look in field, check that the path indicates the directory of the currently opened Storyboard. 3. To password-protect the model (optional), type a password in the Password field. 4. In the File field, enter a name for the model to be exported. 5. Click Export. 6. In the Confirmation dialog box, click Yes. The file is saved in the Storyboard directory on the Visual Composer server, located at the following location: . . . \inetpub\wwwroot\SAP NetWeaver Visual Composer\data\~export. 7. You can copy this folder to another location on your computer, as needed.

To import an exported model:


...

1. From a new or existing model, choose Tools Export/Import. The Export/Import dialog box appears. 2. In the Look in field, choose the path of the Storyboard from which you want to import the model. 3. From the list, choose the name of the file; its name will be displayed in the File field. 4. If the model is password-protected, type the password in the Password field. 5. Click Import.

SAP NetWeaver Visual Composer: User Guide

40

SAP Online Help

07.09.2004

Printing a Model
Use
Visual Composer lets you print the diagram currently displayed in the Design workspace. Tip: You can use the Documentation Wizard to print all of the diagrams contained in the model, and not only the segment displayed in the Design workspace. For more information, see Generating Model Documentation [Page 177].

Procedure
...

1. Choose File Print. A printer-friendly version of the model diagram is displayed in a new browser window. 2. In the new browser window, choose File Print. The standard Print dialog box appears for you to select your printing options.

Creating or Changing a Model Password


Use
You can apply a password to an already-existing model or change a password already assigned to a model.

Procedure
... ...

1. Display the top level of the model, by:


Choosing Search Browse the Model to display the Explore task pane and double-clicking the top node of the tree Using the navigation path above the Design workspace and click the top level name.

2. Choose Model Define Properties to open the Properties task panel. 3. In the top section (Behavior) of the properties list, click in the Password field and click the ellipses (. . .) that appears at the right of the field. The Model Password dialog box is displayed.

...

To assign a password to an unsecured model: i. ii. iii. Type the new password in the New Password field. Confirm your password in the Retype Password field. Click OK. Type the existing password in the Old Password field. Type the new password in the New Password field. Confirm your password in the Retype Password field. Click OK.


...

To change an existing model password: i. ii. iii. iv.

SAP NetWeaver Visual Composer: User Guide

41

SAP Online Help

07.09.2004

Managing Models
Choose File Manage Models. A list of models is displayed. To modify the name of a model, select its name in the list. Its properties are displayed in the Properties task panel to the right. In the Name field, enter a new name for the model and click Update. To open the selected model, click Open. To delete the selected model, click Delete. To create a new model, click Create. The Create New Model dialog box appears. See Creating a New Model [Page 33].

Closing a Model
Choose File Close Model. If you have modified the model without saving the changes, a Confirmation dialog box appears asking if you want to save the changes you made. Answer Yes or No as needed, and the model is closed.

Closing Storyboard
To exit Visual Composer Storyboard, choose File Exit.

SAP NetWeaver Visual Composer: User Guide

42

SAP Online Help

07.09.2004

Creating Portal Content


Purpose
Your Visual Composer model defines the pages and iViews that will comprise the portal business package following compilation. This section explains how to build your model, by adding the main components pages and iViews and defining their UI logic and layout. The following is one suggested Visual Composer workflow, intended to provide a fairly comprehensive overview of the different steps you perform when building your model. However, the steps do not have to be performed in any specific order. Visual Composer Storyboard allows you to build the model in any sequence, and to extend or modify any part of the model at any time. For example, rather than add the main components together as an early step, and then define the inputs and outputs for them, you can add each component, with its input and output, one at a time.

Example
Open an existing model or create a new one. Choose the main model components: modules, pages and iViews. Define properties for each of the main components. Build an iView on a page. Add data services to the iView and test their functionality. Define the UI logic for the iView. This includes adding input and output components to the data service(s) and defining the flow of information between the components. Customize the iView layout. This includes determining the look-and-feel of each view and defining its placement within the iView. Define the iView properties. Define additional iViews. Generate model documentation. Compile and deploy the model to the portal.

The topics in this section describe how to use Visual Composer Storyboard to implement the steps in the workflow. For information about customizing the Design workspace to facilitate building your model, see Customizing the Design Workspace [Page 187].

SAP NetWeaver Visual Composer: User Guide

43

SAP Online Help

07.09.2004

Model Hierarchy
Definition
Your Visual Composer model defines a hierarchy of components, which may be pages, iViews and modules. The pages and iViews in your Visual Composer model are eventually compiled into portal pages and iViews. Modules are used to organize pages and iViews in the model, in much the same way that folders are used to organize files in a file management system. The model hierarchy also contains objects defined by the iView, such as UI components and data services. Your model may be simple, defining a single iView. It may define a group of iViews, one page with one or more iViews, or multiple pages with multiple iViews.

Use
When you create a new model, you begin by adding at least one main component. For example, to begin, you might first add a page, then add iViews to the page, and then define each of the iViews. Over time, as your model grows, you may decide to group the pages and iViews into modules, to help organize and manage the overall model hierarchy. Alternatively, if you are implementing a large business package, you may begin by adding modules, and then add pages and iViews to those modules. For more information about managing the model hierarchy, see Model Management - The Basics [Page 32].

SAP NetWeaver Visual Composer: User Guide

44

SAP Online Help

07.09.2004

Adding Main Components to a Model


This section describes the general procedure for building a model in SAP NetWeaver Visual Composer. Depending on the source of your back-end data, the procedure may be a bit different. For example, you can build a complete iView with input form, data service and output table using the BI Wizard. Note, however, that even this specific example follows the general procedure given here.
...

1. Using the navigation path above the workspace, navigate to the level (specific module, page or iView) to which you want to add a component. For more information, see Navigating the Model [Page 34]. 2. Choose Model Add Elements and from the Elements task panel, drag the element you require into the workspace. Note that the Elements task panel is context sensitive: It displays only those objects relevant to the component currently opened in the workspace. For example, when a page is opened in the workspace, only elements relevant to a page are available in the Elements task panel. 3. At this point, you may repeat this procedure for each main component of your model, and then proceed to define the data service connections, UI logic and layout of each component. Alternatively, you may define a single component, such as a page, open it, and define its own components one by one, following the instructions in the following sections.

At any stage of building your model, you may add personal notes to the workspace to remind yourself of pertinent information. These notes are for design time only and will not be compiled for deployment. To add a note to a module or page, choose Model Add Elements and drag the Note icon onto the workspace. Then write the text of your note. At all levels of the model, in the Design workspace, you can create a note by clicking the Note button in the Design toolbox, clicking in the workspace and then creating the note.

SAP NetWeaver Visual Composer: User Guide

45

SAP Online Help

07.09.2004

Building an iView
Purpose
This process entails creating and defining all the elements of the iView.

Process Flow
Once you have added an iView to your model, you create its data service layer, construct the UI logic, and customize the iView layout. The data service layer defines the underlying metadata of the application, such as the Business APIs (BAPIs), stored procedures, and different queries used by an iView to display, for example, a list of customers. For details, see Defining Data Services [Page 47]. The user interface (UI) logic defines the functionality of your application by creating the UI components (for example, form view or table view), and the connections between them and to the data services. The UI logic also defines data operators such as filters, sort functions, and aggregation functions. For details, see Defining the UI Logic [Page 138]. The layout defines all the visual aspects of the iView. For details, see Customizing the iView UI [Page 167].

You may also wish to build an iView used to call up a URL. In this case, you drag the HTML icon into the workspace and define the URL in the Define Properties list. For more information, see Defining an HTML View [Page 162].

iViews created in SAP NetWeaver Visual Composer and deployed to a portal can be translated using the standard portal translation tools accessed though Content Administration. For information about using the translation worklists, see SAP Library for NetWeaver 04 on Help portal at: help.sap.com\nw04 People Integration Portal Administration Guide Content Administration Portal Content Administration.

SAP NetWeaver Visual Composer: User Guide

46

SAP Online Help

07.09.2004

Defining Data Services


Purpose
Visual Composer provides tools that let you connect via the portal to back-end applications defined in the portal system landscape. This connection enables you to import into your model the relevant function modules on which you want to base your iViews. The imported function modules are referred to as data services. Normally, you can connect to any installation of a back-end application to import a data service, and then deploy the content to any portal that enables access to an instance of the same back-end application. However, if the customer installation of the back-end application includes customized function modules, you will need to import the data services in the customer environment, in order to retrieve the customized functions. Most connections to back-end systems are accomplished using the SAP and JDBC connectors deployed automatically as part of the connector framework installed with the portal. The SAP connector provides access to R/3 and BW systems, while the JDBC connector provides access to a range of databases run on the J2EE platform, including Microsoft SQL, Oracle, DB2 and others. BI connectors, installed separately in the portal, can be used to access a range of different data, including multidimensional cubes, relational tables and queries. Connectivity is based on defining a system in the portal landscape. You may define systems for the following connections: BI XMLA BI ODBO BI JDBC BI SAP Query

In addition, you can configure the BW system, installed automatically with the SAP connector, for accessing predefined queries.

BI connectivity in SAP NetWeaver Visual Composer is available only with SAP NetWeaver 2004 SP Stack 05 and above. For complete information about defining BI data services, see Creating BI Queries [Page 52]. To define data services based on Siebel business components, you must install the iWay connector with the portal and define the appropriate system in the portal landscape. Instructions for installation are available on SAP Service Marketplace.

Siebel connectivity in SAP NetWeaver Visual Composer is available only with SAP Enterprise Portal 6.0 SP2. For information about importing Siebel business components, see Adding Siebel Data Services [Page 136].

SAP NetWeaver Visual Composer: User Guide

47

SAP Online Help

07.09.2004

Process Flow
The standard procedure for adding a data service to an iView includes the following steps:
Add...

1. Adding Data Services to Your Model [Page 49] 2. Testing the Data Service (optional) [Page 50] 3. Defining the Properties of the Data Service [Page 51]
Add the data source ...

Depending on the type of data service and if you are using the BI Wizard the procedure may vary a bit.

You can create an iView using data services from a number of different backend systems. For example, you might use a stored procedure from an Oracle system (imported through the JDBC connector) to call up data that is subsequently used as input to an SAP R/3 BAPI, and output to a table. Or you may have a Siebel business component mapped so that it provides input to a BI query.

iView that contains SQL stored procedure and R/3 BAPI

SAP NetWeaver Visual Composer: User Guide

48

SAP Online Help

07.09.2004

Adding Data Services to Your Model


Use
This procedure enables you to import into your model the function modules that will serve as the base of the iView.

To import a data service using the BI Wizard, see Using the BI Wizard [Page 53]. To import a Siebel business component, see Adding Siebel Data Services [Page 136].

Procedure
1. Open the iView in the Design workspace. You must be at iView level to import a data service. 2. Choose Model Select Data Services. The Data task panel appears. 3. In the Portal field at the top right (end of the main menu), enter the URL of a portal whose system landscape includes the application on which you will base the iView. Example: http://myportal.sap.com:50000, where myportal is the name of the portal server host, sap.com is the domain, and 5000 is the J2EE port number in use by the portal.

Be sure to use front slashes (//) in the portal address. 4. Click the traffic light icon to the right of the Portal field. 5. In the portal Welcome screen, enter a User ID and Password to log in to the portal. This user must have the necessary permissions to view the systems defined in the portal, and should also have either direct access to the back-end application or be mapped to a user with that access. Click OK. Once a connection to the portal is established, a list of systems defined in the portal system landscape appears in the System drop-down list. 6. From the System list, choose the alias of the system from which you want to retrieve functions. If you are unsure of the alias of your system, you can display a list of aliases in the portal. For more information about displaying system aliases, SAP Help Portal at help.sap.com\nw04 SAP NetWeaver 04 SAP Library SAP NetWeaver People Integration Portal Administration Guide System Administration System Configuration System Landscape System Alias 7. Under SAP System, do one of the following:

Click the Search tab to search for function modules by name or group: In the Name field, enter a search string (the * wildcard is supported, and a right-hand wildcard is assumed) and from the For drop-down list, select the type of item (such as Name or Group) to search for. Then click Search. A list of functions that match the search parameter is displayed. Click the Browse tab to display a hierarchy of folders containing the objects and functions found in the business objects repository (BOR) of the selected system. From the For drop-down list, select the category of the item to browse for. While browsing the list, you can click any object or function, and then click More Info to get a description of the selected object or function.

8. Once the search is complete, import the functions to be used by the iView: Drag the functions one at a time from the list in the task panel to the iView.

SAP NetWeaver Visual Composer: User Guide

49

SAP Online Help

07.09.2004

Testing the Data Service (Optional)


Use
Visual Composer lets you test the functionality of a data service that has been added to an iView. You can run a query to test that the function is working, and that it returns the expected results. Note that when using the Visual Composer Test Function tool, connectivity to the back-end application via a portal is required.

Procedure
...

1. In the Design workspace, open the iView that contains the data service you want to test. 2. Verify that you are connected to the back-end system in which the function exists; if not, connect to it (see Adding Data Services to Your Model [Page 49]). 3. In the Design workspace, right-click the data service that represents the function you want to test. 4. From the context menu, choose Test Function. 5. In the Input block of the Test Function dialog box, enter values for the mandatory parameters, and optionally, for any other parameters. 6. Click Execute. A limited number of returned records is displayed.

A connection to the portal is required to generate the list of functions and to add the functions to the model. However, once the functions have been added to the model (by dragging them into the workspace) and optionally tested, the portal connection is no longer necessary until you deploy the model.

SAP NetWeaver Visual Composer: User Guide

50

SAP Online Help

07.09.2004

Defining the Properties of the Data Service


Use
You may wish to check the properties defined for your data service. This may be important, for example, if the output of the data service changes or updates the database (requiring the Requires commit property).

Procedure
...

1. Navigate to the data service for which you want to define properties, and select it in the Design workspace. See Navigating the Model [Page 34]. 2. Choose Model Define Properties. The Properties task panel appears. 3. Define the following properties for the data service Behavior Name SAP System Name of the data service. To change the name, enter any text in the field. The alias of the back-end system from which the data service was imported. If you deploy an iView to a portal environment in which the back-end system is named differently, you will need to edit the system value of each data service in the iView to enable the iView to function properly. Sys. type Function Requires commit? The type of system such as R/3, BI or Siebel from which the data service has been imported. The function on which this data service is based. There is no need to edit this field. For function modules that modify the database, this indicates that a second commit call is required to confirm the database update. When checked, this option indicates that a conversion BAPI is required, for values in one unit of measurement to another. Options that let you customize certain aspects of the design time environment, and have no bearing on the compiled code. See Customizing the Design Workspace [Page 187]. Options that let you create text for inclusion in the automatically-generated project documentation. See Defining Documentation Properties for Model Components [Page 178].

Convert outputs? Graphic Symbol

Documentation

SAP NetWeaver Visual Composer: User Guide

51

SAP Online Help

07.09.2004

Creating BI Queries
Purpose
Visual Composer provides functionality that helps you build business intelligence (BI) queries into your Visual Composer models. With the BI Query Wizard and supporting tools, you can build and configure queries on data services and visualize their results, which you can then display in an iView. This allows you to build applications that display analytical data and perform business analytics. The BI Query Wizard can create queries upon any data service in your Enterprise Portal system configured to connect via the BI Java Connectors, including OLAP and relational data sources.

Integration
The BI Query Wizard and related functionality are installed by default with Visual Composer. However, if you try to access the BI Query Wizard and receive a BI Query Wizard not available message, you need to check that the required BI components have been properly installed. To do so, see section 2.0 of the SAP NetWeaver Installation Manual, accessed from SAP Help Portal at help.sap.com\nw04. You need to configure one or more portal connector templates as a BI system to access the necessary BI functionality.

Example
You can create and work with BI queries in several ways:
...

1. By using the BI Query Wizard [Page 53] 2. By configuring queries directly in data services [Page 123] 3. By using the MDX Editor [Page 125] 4. By using the SQL Editor [Page 128] When you create a BI query for the first time, we recommend you use the BI Query Wizard, then you can later move on to the other procedures for more advanced or shortcut options. To find out more about working with queries you have already created, see Working With Queries [Page 130]. For a complete end-to-end example of using the BI Query Wizard to create a BI iView, see Example 4: BI iView [Page 205].

SAP NetWeaver Visual Composer: User Guide

52

SAP Online Help

07.09.2004

Using the BI Query Wizard


Purpose
The BI Query Wizard walks you through the process of creating a query using one of a set of query templates [Page 57]. The wizard creates a data service in the Visual Composer workspace configured with the query you choose. After you select a template, you step through a set of screens and select appropriate values from your data service to complete the wizard and generate the result. This result is supported by an underlying MDX (for OLAP data sources) or SQL (for relational data sources) statement.

You may also configure a query directly in a data service, by dragging the data service directly onto the Visual Composer workspace. For more information, see Configuring Queries Directly in Data Services [Page 123].

Prerequisites
You have defined at least one BI system in the portal. A BI system is a system based on the BI XMLA, BI ODBO, BI JDBC, or BI SAP Query Connector, or on the SAP Connector against a BW system. You have created an iView in which to place your query before you launch the BI Query Wizard. You are connected to a portal.

The BI Query Wizard and related functionality are installed by default with Visual Composer. However, if you try to access the BI Query Wizard and receive a BI Query Wizard not available message, you need to check that the required BI components have been properly installed. To do so, see section 2.0 of the SAP NetWeaver Installation Manual, accessed from SAP Help Portal at help.sap.com\nw04.

Process Flow
The wizards workflow differs depending on which type of system and which template you choose. The basic process flow is as follows:
...

1. From the BI menu, choose BI Query Wizard 2. Select a system [Page 56]Select the data service upon which you want to base the query. 3. Select a query template [Page 57] The list of available templates varies depending on the type of system (OLAP or Relational) you have selected. If you have selected a BW Web API system, you select a query [Page 121] in this step. See Working With BW Query Views [Page 120] for more information. 4. Configure the query parameters

SAP NetWeaver Visual Composer: User Guide

53

SAP Online Help

07.09.2004

These parameters vary depending on the query you have chosen. In the Selecting a Query Template [Page 57] topic, click on the individual query template to see its specific path. 5. Preview the result [Page 119] 6. Click Finish

Wizard Interface and Navigation


The BI Query Wizard interface consists of three main sections: Navigation section The navigation section consists of navigation trails. Future steps in the trail may change based on a selection you choose on a current screen. Your past steps remain constant. Main section The main section is where you configure the parameters for your query. Buttons section The buttons section consists of the following buttons: BI Query Wizard Buttons Button Help Back Function Provides screen-level context-sensitive help for any screen in the wizard. Steps to the previous screen (when enabled). When you click the Back button, the values you have selected on previous or subsequent screens are retained. Advances to the next screen in the wizard. Values you have selected on previous screens are saved. Exits the wizard and saves your query. You may click Finish at any point while using the wizard. If you have completed all required screens, a data service (configured with a start port and a view on the output port) is saved to the workspace. If you have not completed every screen, values you have configured already are saved. Returns you to the workspace without saving a data service or query. You may at any time click Cancel while using the wizard. This returns you to the workspace without saving a data service or query.

Next Finish

Cancel

Wizard Terminology
The BI query functionality allows you to build queries on diverse OLAP (as well as relational) data sources defined in your portal. These may include Business Information Warehouse (BW) or non-BW data sources. In cases where BW terminology differs from general OLAP terminology, the BI Query Wizard and supporting tools use the general OLAP terminology. Refer to the glossary for definitions of specific terms if you are unclear. Below is a short summary of some of the major differences between standard OLAP and BW terms:

SAP NetWeaver Visual Composer: User Guide

54

SAP Online Help

07.09.2004

OLAP and BW Terminology OLAP Term dimension [External] measure [External] member [External] level [External] BW Term characteristic key figure characteristic level hierarchy level

For OLAP systems, we use the caption value from your data service to display in the wizard fields. For relational systems, we display the field name from your data service.

Result
Once you have completed all required wizard screens and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. The data service is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal.

If you have configured your query directly in a data service instead of using the BI Query Wizard, you must configure the input and output ports of your data service manually. See Configuring Queries Directly in Data Services [Page 123] for more information. For Heatmap [Page 99] templates, an HTML view that generates a heatmap is created on the URL port. For data services based on BW-native [Page 120] systems, an HTML view that displays the default Web template is generated on the URL port.

To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125] Using the SQL Editor [Page 128]

Example
For a complete end-to-end example of using the BI Query Wizard, see Example 4: BI iView [Page 205].

SAP NetWeaver Visual Composer: User Guide

55

SAP Online Help

07.09.2004

Selecting a System
Use
Before you can choose a query template, you must first select a system. The list of available templates varies depending on the system you have selected.

Prerequisites
You must be connected to a portal to see the list of available systems. You must have at least one BI system defined in the portal. A BI system is a system based on:

A BI Java Connector:


BI XMLA Connector BI ODBO Connector BI JDBC Connector BI SAP Query Connector

The SAP Connector against a BW system

Procedure
...

1. In the Available Systems section, expand the category of connections you want to use. Select the category to display additional information, if available, in the Description and Properties sections of the screen. 2. Select the data service upon which you wish to build a query.

Only valid BI systems with which you can use the BI Query Wizard are displayed. Additional information, if available, is displayed in the Description and Properties sections of the screen. 3. Click Next.

Result
You proceed to Select a Query Template [Page 57]. Future steps in the navigation trail update based on the data service you have chosen.

If you have selected a BW-native data service in the BW Web API Connections category, you may only work with available query views, and you therefore bypass the Select a Query Template screen and go directly to Select a Query screen. See Working With BW Query Views [Page 120] for more information.

SAP NetWeaver Visual Composer: User Guide

56

SAP Online Help

07.09.2004

Selecting a Query Template


Use
After you have selected a system in the BI Query Wizard, or if you are entering the BI Query Wizard from configuring your data service directly in the workspace, you select a query template. A query template is a set of screens that you complete to answer a typical business question - a question formulated to organize and analyze the data in your data source. The set of templates available depends on whether the data service you have selected is an OLAP or a relational data service.

Queries based on Business Information Warehouse (BW) Web API Connections bypass this screen and go to the Select a Query [Page 121] screen. See Working With BW Query Views [Page 120] for more information.

Procedure
...

1. OLAP data services only: In the Query Templates list, expand the category of templates you wish to work with. OLAP templates in the BI Query Wizard are organized into categories, each addressing different types of business questions. 2. In the Query Templates list, select the query template upon which you wish to base your query. The set of templates displayed varies depending on whether you have selected an OLAP or a relational data service. For each template, read a description in the Description section, and a sample business question in the Sample Business Question section. The following templates, in categories and listed together with their descriptions and sample business questions, are provided for OLAP data services: OLAP Query Templates Category / Name Grand Totals [Page 68] (default) Description Aggregates all measures to the highest level. Returns one row of data with the total for each measure. Sample Business Question What is the total revenue of all sales transactions?

Aggregation Count [Page 60] For a selected level, counts members contributing to a specific measure. Sales returns for MyCompany equal $25,000. How many product lines does this represent? What percentages do Canada and Mexico represent of my total sales?

Percentage Share [Page 76]

Calculates the share that selected members represent within the sum of the level members, and expresses this as a percentage.

SAP NetWeaver Visual Composer: User Guide

57

SAP Online Help

07.09.2004

Category / Name Dynamic Calculation Cumulative Total [Page 64] Moving Average [Page 69]

Description

Sample Business Question

Cumulates the value of a measure over a specific date range. Calculates the average values of selected measures based on specified time periods.

What is my monthly yearto-date expense total? What are the average manufacturing costs of products A and B for Q2 and Q3, based on the previous four months?

Rank Rank Change [Page 84] Based on a specific measure, calculates the change in rank of members of a particular level compared with their rank from a previous period. Calculates the rank of a level based on a specific measure. What is the change in rank for my top ten customers between last year and this year? Who are my top ten or bottom ten customers?

Top N [Page 87] Trend Trend Over Time [Page 90] Variance Percentage Growth [Page 73]

Displays the trend of a specific measure for a selected member over time.

What is the trend in my gross margin over the past few years?

Calculates the percentage by which a specific measure has increased or decreased for a selected member in comparison to the same period of time previously or subsequently. Calculates the values of a measure defined as actual and a measure defined as planned, illustrating the difference between actual and expected results. Identifies members of a selected level that have had sales in the past, but which have had no sales in a specified time period.

By what percentage did my sales increase this year compared to last year?

Planned vs. Actual [Page 79]

How do my actual costs compare to the planned costs?

Zero Activity [Page 93]

Which products didn't sell last year?

SAP NetWeaver Visual Composer: User Guide

58

SAP Online Help

07.09.2004

The following templates, listed together with their descriptions and sample business questions, are provided for relational data services: Relational Query Templates Name All Data [Page 96] (default) Count [Page 97] Description Selects all records and all fields as the final result, without any filters or joins. Counts all occurrences of a certain type of data in a group or groups within a table. Walks you through defining a query without the constraint of a particular business question. Aggregates values of a selected primary group and compares them with values of a secondary group by displaying the results in boxes of differing sizes and colors. Finds the minimum or maximum value of a field, and provides details from the row that holds that value. Sample Business Question What are all the available grade levels and their details? How many employees is each different manager responsible for? Not applicable.

Freeform [Page 98]

Heatmap [Page 99]

What is the relative distribution of sales among certain divisions and companies? Which store has the smallest revenue; where is that store and who is the manager?

Minimum/Maximum [Page 103]

The templates designated as default above are the default templates when you configure a query directly in a data service. See Configuring Queries Directly in Data Services [Page 123] for more information.

The relational Count template is not available for SAP Query data services. 3. Click Next.

Although we provide a sample business question for each query template, note that a given template can address many different questions. For example, you can configure the Top N query template to address any of the questions below: What are my top five customers based on sales? What are my bottom ten products based on margin? What products make up the top 10% of sales?

Result
You proceed to the first screen specific to configuring your query. Future steps in the navigation trail update based on the template you have chosen. Select a template from the table above to view the specific steps involved with configuring that query.

SAP NetWeaver Visual Composer: User Guide

59

SAP Online Help

07.09.2004

Count (OLAP)
Purpose
The Count template is an OLAP aggregation template with which you can build queries that count members of a selected level that contribute to a specific measure. You should use this template if you would like to address business questions such as the following: Sales returns for MyCompany equal $25,000. How many product lines does this represent?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Count template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Count parameters [Page 61] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Count template, see Configuring Count Parameters [Page 61].

SAP NetWeaver Visual Composer: User Guide

60

SAP Online Help

07.09.2004

Configuring Count Parameters


Use
Use this screen to configure the parameters specific to the Count template. See Count (OLAP) [Page 60] for the description, business question, and workflow for using this template.

Procedure
...

1. Configure the parameters in the Count Members Of section of the screen according to the actions in the table below: Count Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). As each of the screens three sections must be based on different dimensions, dimensions selected in the other two sections are omitted from this list. Hierarchy Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Lists all measures in the cube on which the query is based. Select the hierarchy that contains the level to display in the Level field. Select the level that contains all the members you wish to count. Select the measure to which all members in the selected level contribute. Any member in the selected level with a non-zero value in this measure will be counted. Action Select the dimension that contains the hierarchy to display in the Hierarchy field.

Level

With measure

2. Configure the parameters in the Displayed by Members Of section of the screen according to the actions in the table below: Displayed By Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based. As each of the screens three sections must be based on different dimensions, dimensions selected in the other two sections are omitted from this list. Action Select the dimension that contains the hierarchy to display in the Hierarchy field.

SAP NetWeaver Visual Composer: User Guide

61

SAP Online Help

07.09.2004

Parameter Hierarchy

Values Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy.

Action Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members that should be listed on the rows in the result.

Level

3. Configure the parameters in the For Date Range section of the screen according to the actions in the table below: For Date Range Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. As each of the screens three sections must be based on different dimensions, dimensions selected in the other two sections are omitted from this list. Hierarchy Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Lists all members in the currently selected level. Lists all members in the currently selected level. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity upon which to base the date range. Select the start period of the date range in which to count members. Select the end period of the date range in which to count members. Action Select the dimension that contains the hierarchy to display in the Hierarchy field.

Period level

From

To

4. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to know how the quantity of products sold is distributed over states, and how that quantity changes from month to month. To create this query, configure the values on this screen in the following manner:

SAP NetWeaver Visual Composer: User Guide

62

SAP Online Help

07.09.2004

This example assumes you have similar types of metadata available in your data service.

Count Members Of section: Dimension = Product Hierarchy = Product Level = Product Name With measure = Store Sales

Displayed by Members Of section: Dimension = Customers Hierarchy = Customers Level = State

For Date Range section: Time dimension = Time Hierarchy = Time Period level = Month From = January To = March

The result of this query might be a table such as the following: Count Query Result Customers CA OR WA January 1056 1185 1343 February 1131 970 1382 March 1074 1239 1391

This table shows that, for example, 1056 different products were sold in California in January, 1131 different products were sold in February, and so on.

SAP NetWeaver Visual Composer: User Guide

63

SAP Online Help

07.09.2004

Cumulative Total (OLAP)


Purpose
The Cumulative Total template is an OLAP dynamic calculation template with which you can build queries that cumulate the value of a measure over a specific date range. In the result, the measure is first cumulated over the date range specified, and the starting cell displays that initial period's sum. Thereafter, each cell in the grid displays the accumulation of the previous sum plus the sum in the next time period, and so on. This kind of query is particularly useful if you have a specific target to hit by the end of the year, for example, and you want to track your progress toward it throughout the year. You should use this template if you would like to address business questions such as the following: What is my monthly year-to-date expense total?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Cumulative Total template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Cumulative Total parameters [Page 65] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Cumulative Total template, see Configuring Cumulative Total Parameters [Page 65].

SAP NetWeaver Visual Composer: User Guide

64

SAP Online Help

07.09.2004

Configuring Cumulative Total Parameters


Use
Use this screen to configure the parameters specific to the Cumulative Total template. See Cumulative Total (OLAP) [Page 64] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Calculate section of the screen, select the measure for which you want to display a running total in the Running total of measure drop-down list. This list shows all the measures in the cube on which the query is based. 2. In the For Members Of section of the screen, select the level that contains the members you want to see in the querys result using the parameters in the table below: For Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result.

Hierarchy

Level

3. Configure the parameters in the For Date Range section of the screen according to the actions in the table below: For Date Range Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity upon which to base the date range. Select the start period of the date range in which to cumulate the total. Select the end period of the date range in which to cumulate the total.

Hierarchy

Period level

From

Lists all members in the currently selected level. Lists all members in the currently selected level.

To

SAP NetWeaver Visual Composer: User Guide

65

SAP Online Help

07.09.2004

4. If you want to restrict your display, check Display the last, and enter a numeric value to indicate number of periods. 5. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to show the cumulative total of store sales for certain machine parts. To create this query, configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

Calculate section: Running total of measure = Store Sales

For Members of section: Dimension = Product Hierarchy = Product Level = Product Name

For Date Range section: Time dimension = Time Hierarchy = Time Period level = Month From = July To = December

Display the last = checked; set to 3 periods The data used to cumulate the total, together with the result of this query (the yellow cells), are shown in the tables below: Cumulative Total Query: Data Reference Part Part A Part B Part C Jul 25 20 5 Aug 15 10 5 Sep 10 5 5 Oct 10 5 5 Nov 10 10 10 Dec 5 15 5

SAP NetWeaver Visual Composer: User Guide

66

SAP Online Help

07.09.2004

Cumulative Total Query: Result Part Part A Part B Part C Jul 25 20 5 Aug 40 30 10 Sep 50 35 15 Oct 60 40 20 Nov 70 50 30 Dec 75 65 35

The result table above also illustrates the difference between restricting your display to the last few time periods and not restricting your display. If you uncheck the Display the last field, the result will show values in the grey area as well.

SAP NetWeaver Visual Composer: User Guide

67

SAP Online Help

07.09.2004

Grand Totals (OLAP)


Purpose
The Grand Totals template is a simple default template activated when you drag an OLAP data service to the workspace (see Configuring Queries Directly in Data Services [Page 123]). With this template, you can build queries that aggregate all measures to the highest level. The result returns one row of data with the total for each measure. You should use this template if you would like to address business questions such as the following: What is the total revenue of all sales transactions?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Grand Totals template, the wizard asks you only to Select a Cube [Page 106] to complete the procedure for this template.

If you have entered the BI Query Wizard from configuring your data service directly in the workspace, your system and cube are already configured and this step is bypassed.

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal.

If you have entered the BI Query Wizard from configuring your data service directly in the workspace, you must configure your input and output ports manually. See Configuring Queries Directly in Data Services [Page 123] for more information. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

SAP NetWeaver Visual Composer: User Guide

68

SAP Online Help

07.09.2004

Moving Average (OLAP)


Purpose
The Moving Average template is an OLAP dynamic calculation template with which you can build queries that calculate the average values of selected measures based on specified time periods. You determine the time periods to be averaged, and you can use the result to analyze past or forecast future results. Typically, your forecasts are more accurate if you perform the average over larger time periods. You should use this template if you would like to address business questions such as the following: What are the average manufacturing costs of products A and B for Q2 and Q3, based on the previous four months?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Moving Average template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Moving Average parameters [Page 70] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Moving Average template, see Configuring Moving Average Parameters [Page 70].

SAP NetWeaver Visual Composer: User Guide

69

SAP Online Help

07.09.2004

Configuring Moving Average Parameters


Use
Use this screen to configure the parameters specific to the Moving Average template. See Moving Average (OLAP) [Page 69] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Calculate section of the screen, select the measure for which you want to display a moving average in the Moving average of measure drop-down list. This list shows all the measures in the cube on which the query is based. 2. In the Based on number of periods field, enter the number of time periods on which to base the average. 3. In the For Members Of section of the screen, select the level that contains the members you want to see in the query's result using the parameters in the table below: For Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the query's result.

Hierarchy

Level

4. Configure the parameters in the Display Date Range section of the screen according to the actions in the table below: Display Date Range Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity upon which to base the date range display. Select the start period of the date range to display. Select the end period of the date range to display.

Hierarchy

Period level

From To

Lists all members in the currently selected level. Lists all members in the currently selected level.

SAP NetWeaver Visual Composer: User Guide

70

SAP Online Help

07.09.2004

5. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to know the average manufacturing costs for March and April based on the previous four months. To create this query, configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

Calculate section: Moving average of measure = Manufacturing Cost Based on number of periods = 4

For Members of section: Dimension = Product Hierarchy = Product Level = Product Name

Display Date Range section: Time dimension = Time Hierarchy = Time Period level = Month From = December To = April

The data used to calculate the moving average, together with the result of this query (the yellow cells), are shown in the tables below:

Moving Average Query: Data Reference Part Part A Part B Part C Dec $25 $20 $5 Jan $15 $10 $5 Feb $10 $5 $5 Mar $10 $5 $5 Apr $5 $15 $5

SAP NetWeaver Visual Composer: User Guide

71

SAP Online Help Moving Average Query: Result Part Part A Part B Part C Dec Jan Feb Mar $15 $10 $5 Apr $10 $9 $5

07.09.2004

Each cell in the result shows the average of its own figure and the previous three months, since the Based on number of periods value is set to 4 months.

SAP NetWeaver Visual Composer: User Guide

72

SAP Online Help

07.09.2004

Percentage Growth (OLAP)


Purpose
The Percentage Growth template is an OLAP variance template with which you can build queries that calculate the percentage by which a specific measure has increased or decreased for a selected member in comparison to the same period of time previously or subsequently. This template is similar to the Rank Change template, but it doesn't perform a Top N calculation to select the members of the base period (and the results are expressed as a percentage). You should use this template if you would like to address business questions such as the following: By what percentage did my sales increase this year compared to last year?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Percentage Growth template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Percentage Growth parameters [Page 74] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Percentage Growth template, see Configuring Percentage Growth Parameters [Page 74].

SAP NetWeaver Visual Composer: User Guide

73

SAP Online Help

07.09.2004

Configuring Percentage Growth Parameters


Use
Use this screen to configure the parameters specific to the Percentage Growth template. See Percentage Growth (OLAP) [Page 73] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Calculate section of the screen, select the measure for which you want to calculate growth from the Absolute percentage growth of measure drop-down list. This list shows all the measures in the cube on which the query is based. 2. In the For Members of section of the screen, select the level that contains the members you want to see in the querys result using the parameters in the table below: For Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result.

Hierarchy

Level

3. In the Between Base and Comparison Periods section of the screen, configure the base and comparison periods for the percentage growth according to the parameters in the table below: Between Base and Comparison Periods Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity for the base and comparison periods. Select the base period for the growth calculation. Select the comparison period for the growth calculation.

Hierarchy

Period level

Base period Comparison period

Lists all members in the currently selected level. Lists all members in the currently selected level.

SAP NetWeaver Visual Composer: User Guide

74

SAP Online Help

07.09.2004

4. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
The result of a Percentage Growth query is displayed in a table with five columns such as the below: Percentage Growth Query Result Product Wine Beer Juice Base Period 20 80 100 Comparison Period 60 60 10 Difference 40 -20 -90 Percentage Change 200% -25% -90%

A percentage growth result may not always show a growth trend, as you can see from the sample results above. You may see a decrease or decline (negative value) in your growth result. This template is similar to the Rank Change template, but it doesn't perform a Top N calculation to select the members of the base period. The results are expressed as a percentage change from the base period.

SAP NetWeaver Visual Composer: User Guide

75

SAP Online Help

07.09.2004

Percentage Share (OLAP)


Purpose
The Percentage Share template is an OLAP aggregation template with which you can build queries that calculate the share that selected members represent within the sum of the level members. The result is expressed as a percentage. You should use this template if you would like to address business questions such as the following: What percentages do Canada and Mexico represent of my total sales?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Percentage Share template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Percentage Share parameters [Page 77] 3. Define filters [Page 107]

While defining filters is typically an optional step, for the business logic in this template, it can be particularly important to specify filters. 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Percentage Share template, see Configuring Percentage Share Parameters [Page 77].

SAP NetWeaver Visual Composer: User Guide

76

SAP Online Help

07.09.2004

Configuring Percentage Share Parameters


Use
Use this screen to configure the parameters specific to the Percentage Share template. See Percentage Share (OLAP) [Page 76] for the description, business question, and workflow for using this template.

Procedure
...

1. Select the level that contains the members you want to see in the querys result using the parameters in the table below: Calculate Share Of Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result. The level name in the radio buttons below updates according to the value you select. 2. Select the group of members upon which to base the percentage share:

Hierarchy

Level

Select As a percentage of the sum of all members of level <level name> to calculate individual members shares in proportion to the total for all level members. Select As a percentage of the sum of all filtered members of level <level name> to calculate individual members shares in proportion to only those members you select in the subsequent step of defining a filter.

You must define a filter for the second option to work properly. Defining filters can also be important to narrow the display for the first option. 3. From the Based on measure field, select the measure upon which to base the calculation. This field lists all measures in the cube on which the query is based. 4. Click Next.

SAP NetWeaver Visual Composer: User Guide

77

SAP Online Help

07.09.2004

Result
You proceed to the Define Filters [Page 107] screen.

Example
The table below illustrates the difference between basing the result on all level members and basing the result on filtered level members: Percentage Share All vs. Filtered Product Family Wine Beer Juice Whiskey Soft drinks Unit Sales 200 200 200 200 200 % Based on All 20% 20% 20% 20% 20% % Based on Filtered 33% 33% 33%

In this case, the Product Family level has five members. You have selected three members (Wine, Beer, and Juice) on the Define Filters screen (which follows this screen in the wizard). To illustrate the effect of this templates different options: As a percentage of the sum of all members of level Product Family: The percentage share is based on the total for the whole level. In the table above, each member has 20% of the share of the total. If you wanted to define a query that tells you what percentage Canada and Mexico make up of your total sales, you would also use this option. In this case, you would filter your results to just select Canada and Mexico, and their percentages added together would not add up to 100% if there are other members contributing to the total that are simply not displayed. As a percentage of the sum of all filtered members of level Product Family: The percentage share is based on only the total of the filtered members. In the table above, each member takes 33% of this share. You might also use such a query to compare sales results among three sales representatives, excluding the rest of the group essentially comparing themselves to each other within a subset of a level.

The table above is for illustration purposes. The actual result of this query will show three columns: one for the level, one for the measure, and one for the percentage share.

SAP NetWeaver Visual Composer: User Guide

78

SAP Online Help

07.09.2004

Planned vs. Actual (OLAP)


Purpose
The Planned vs. Actual template is an OLAP variance template with which you can build queries that calculate the values of a measure defined as actual and a measure defined as planned, illustrating the difference between actual and expected results. Results to business queries such as these can be key in optimizing sales. For example, if your result is far greater than your plan for a specific product, this could indicate a lost opportunity or insufficient supply for the demand. You should use this template if you would like to address business questions such as the following: How do my actual costs compare to the planned costs?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Planned vs. Actual template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Planned vs. Actual parameters [Page 80] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Planned vs. Actual template, see Configuring Planned vs. Actual Parameters [Page 80].

SAP NetWeaver Visual Composer: User Guide

79

SAP Online Help

07.09.2004

Configuring Planned vs. Actual Parameters


Use
Use this screen to configure the parameters specific to the Planned vs. Actual template. See Planned vs. Actual (OLAP) [Page 79] for the description, business question, and workflow for using this template.

Procedure
...

1. Indicate how planned and actual values are defined in your data service. You can compare planned vs. actual values whether or not you have measures designated as Planned and Actual in your data service. To indicate how these values are defined, use the Calculate Planned versus Actual defined by drop-down list to select one of the following values: Calculate Planned Versus Actual Defined By Values Value Measures Usage Use this value if you actually have measures defined as Planned and Actual in your data service. The measures might have names such as the below: Planned vs. Actual Indicators Planned; Actual Plan Profit; Actual Profit Plan Sales; Actual Sales Quantity Ordered; Quantity Shipped

Use this value if you have members (not measures) that indicate planned and actual values. This type of configuration is typically found in data services based on the Business Information Warehouse (BW).

2. Assign the planned and actual measures:


Based on measures: Assign the planned and actual measures and the level that contains the members you want to see in the querys result by using the parameters described in the table below: Measures Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field.

Hierarchy

SAP NetWeaver Visual Composer: User Guide

80

SAP Online Help

07.09.2004

Parameter Level

Values Lists all levels in the currently selected hierarchy.

Action Select the level that contains the members for which to evaluate planned vs. actual results. These are the members that will appear on the rows in the result.

Plan measure

Lists all measures in the cube on which the query is based. Lists all measures in the cube on which the query is based.

Select the planned measure.

Actual measure

Select the actual measure.

Based on planned vs. actual indicators: Assign the members that indicate planned and actual values and the level that contains the members you want to see in the querys result by using the parameters described in the table below: Indicators Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members for which to evaluate planned vs. actual results. These are the members that will appear on the rows in the result. Measure for comparison Lists all measures in the cube on which the query is based. Lists all dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected planned / actual dimension. Lists all levels in the currently selected planned / actual hierarchy. Select the measure for which you want to compare planned vs. actual values. For example, Profit. Select the dimension that contains the hierarchy to display in the Planned / Actual hierarchy field. Select the hierarchy that contains the level to display in the Planned / Actual level field. Select the level that contains the members to display in the Planned indicator and Actual indicator fields.

Hierarchy

Level

Planned / Actual dimension

Planned / Actual hierarchy

Planned / Actual level

SAP NetWeaver Visual Composer: User Guide

81

SAP Online Help

07.09.2004

Parameter Planned indicator Actual indicator

Values Lists all members in the currently selected planned / actual level. Lists all members in the currently selected planned / actual level.

Action Select the member that indicates the planned value. Select the member that indicates the actual value.

3. Optionally, indicate the plan version.

Plan version is typically only valid for BW data services. To configure the plan version, place a checkmark in the box next to the Plan version section, and configure the values in that section according to the parameters described in the table below: Plan Version Parameters Parameter Version dimension Values Lists all dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected version dimension. Lists all levels in the currently selected version hierarchy. Lists all members in the currently selected version level. Action Select the dimension that contains the hierarchy to display in the Version hierarchy field. Select the hierarchy that contains the level to display in the Version level field. Select the level that contains the members to display in the Version field. Select the member that indicates plan version. For example, this might be a numeric value such as 001 or 003.

Version hierarchy

Version level

Version

4. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to use planned and actual indicators to compare values in your accounts. To create this query, you might configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

SAP NetWeaver Visual Composer: User Guide

82

SAP Online Help

07.09.2004

Calculate Planned versus Actual defined by = Measures Dimension = Product Hierarchy = Product Level = Product Name Plan measure = Units Ordered Actual measure = Units Shipped Plan version = unchecked (leave section blank) The result of this query might be a table such as the following: Planned vs. Actual Query Result Product Good Imported Beer Portsmouth Light Beer Walrus Light Beer Good Chardonnay Wine Plan 275 121 211 422 Actual 275 78 188 242

SAP NetWeaver Visual Composer: User Guide

83

SAP Online Help

07.09.2004

Rank Change (OLAP)


Purpose
The Rank Change template is an OLAP ranking template with which you can build queries that, based on a specific measure, calculate the change in rank of members of a particular level compared with their rank from a previous period. This template borrows from the functionality of the Top N template in order to select the members of the base period. You should use this template if you would like to address business questions such as the following: What is the change in rank for my top ten customers between last year and this year?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Rank Change template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Rank Change parameters [Page 85] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Rank Change template, see Configuring Rank Change Parameters [Page 85].

SAP NetWeaver Visual Composer: User Guide

84

SAP Online Help

07.09.2004

Configuring Rank Change Parameters


Use
Use this screen to configure the parameters specific to the Rank Change template. See Rank Change (OLAP) [Page 84] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Calculate Change in section of the screen, select the type of rank and its value in the Rank Type and Value fields. You may select from the following rank types:

Top Count Bottom Count Top Percent Bottom Percent

If you select a count rank type, the values in the Value field are numeric. If you select a percent rank type, the values in the Value field correspond to percentages.

For example, if you select Top Count and a value of 5, you want to calculate the change in rank of your top three members between one period and another. If you select Top Percent and a value of 10, you want to calculate the change in rank of your top 10% of members between one period and another. 2. In the For Members of section of the screen, select the level that contains the members you want to see in the querys result using the parameters in the table below: For Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result.

Hierarchy

Level

3. In the Between Base and Comparison Periods section of the screen, configure the base and comparison periods for the rank change according to the parameters in the table below:

SAP NetWeaver Visual Composer: User Guide

85

SAP Online Help

07.09.2004

Between Base and Comparison Periods Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity for the base and comparison periods. Select the base period from which to calculate the rank change. Select the comparison period with which to calculate the rank difference.

Hierarchy

Period level

Base period

Lists all members in the currently selected level. Lists all members in the currently selected level.

Comparison period

4. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
The result of a Rank Change query is displayed in a table with five columns such as the below: Rank Change Query Result Product Base Period Rank Comparison Period 6 8 1 Rank Base Period 1 2 3 Rank Difference 5 6 -2

Wine Beer Juice

1500 1300 800

There are three steps to the calculation in this query: 5. The query first computes the results of a Top N query in the base period you specify (values in Base Period and Rank Base Period columns). This also selects the members that will appear on the rows in the table. 6. Next, it calculates the Top N results for those same members in the comparison period (Rank Comparison Period column). 7. Finally, the query computes the difference between the base and comparison period ranks, and delivers that value in the Rank Difference column.

SAP NetWeaver Visual Composer: User Guide

86

SAP Online Help

07.09.2004

Top N (OLAP)
Purpose
The Top N template is an OLAP ranking template with which you can build queries that calculate the rank of a level based on a specific measure. This template is not limited to top values, but also lets you select bottom values, independently or together with top values. This sort of query makes it easy to identify your leaders and laggards. You should use this template if you would like to address business questions such as the following: Who are my top ten or bottom ten customers?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Top N template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Top N parameters [Page 88] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For a complete example of using the Top N template to create a BI iView, see Example 4: BI iView [Page 205].

SAP NetWeaver Visual Composer: User Guide

87

SAP Online Help

07.09.2004

Configuring Top N Parameters


Use
Use this screen to configure the parameters specific to the Top N template. See Top N (OLAP) [Page 87] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Define Query Ranks and Values section of the screen, choose and define rank types according to the values in the table below: Define Query Ranks and Values Parameters Rank Option Top rank Checked If checked, calculate in query. If unchecked, ignore. Bottom rank If checked, calculate in query. If unchecked, ignore. Type Count Percent Count Percent Value Numeric value indicates count (for example, 5 specifies Top 5). Numeric value indicates percentage (for example, 10 specifies Top 10%). Numeric value indicates count (for example, 5 specifies Bottom 5). Numeric value indicates percentage (for example, 10 specifies Bottom 10%).

You can configure a query to calculate both top and bottom ranks, and the rank type (count or percent) can differ between the two. 2. In the Define Members section of the screen, select the level that contains the members you want to see in the querys result, and the measure to use for the Top N calculation, using the parameters in the table below: Define Members Parameters Parameter Dimension Value Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Lists all measures in the cube on which the query is based. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result. Select the measure to use for the Top N calculation.

Hierarchy

Level

According to measure

SAP NetWeaver Visual Composer: User Guide

88

SAP Online Help 3. Click Next.

07.09.2004

Result
You proceed to the Define Filters [Page 107] screen.

Example
For a complete example of using the Top N template to create a BI iView, see Example 4: BI iView [Page 205].

SAP NetWeaver Visual Composer: User Guide

89

SAP Online Help

07.09.2004

Trend Over Time (OLAP)


Purpose
The Trend Over Time template is an OLAP trend template with which you can build queries that display the trend of a specific measure for a selected member over time. This is a common type of business query with which you track performance over a specific time period, helping you to easily identify and react to trends from one year (or other time period) to the next. You should use this template if you would like to address business questions such as the following: What is the trend in my gross margin over the past few years? Is it increasing or decreasing?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Trend Over Time template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Trend Over Time parameters [Page 91] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Trend Over Time template, see Configuring Trend Over Time Parameters [Page 91].

SAP NetWeaver Visual Composer: User Guide

90

SAP Online Help

07.09.2004

Configuring Trend Over Time Parameters


Use
Use this screen to configure the parameters specific to the Trend Over Time template. See Trend Over Time (OLAP) [Page 90] for the description, business question, and workflow for using this template.

Procedure
...

1. In the Display section of the screen, select the measure for which you want to display a trend from the Trend in measure drop-down list. This list shows all the measures in the cube on which the query is based. 2. In the For Members of section of the screen, select the level that contains the members you want to see in the querys result using the parameters in the table below: For Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result.

Hierarchy

Level

3. In the During Date Range section of the screen, select the start and end periods for the trend according to the values in the table below: During Date Range Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity upon which to base the trend calculations. Select the start period of the trend. Select the end period of the trend.

Hierarchy

Period level

From To

Lists all members in the currently selected level. Lists all members in the currently selected level.

SAP NetWeaver Visual Composer: User Guide

91

SAP Online Help 4. Click Next.

07.09.2004

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to identify the trend in unit sales for product families over the last half of the year. To create this query, configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

Display section: Trend in measure = Unit Sales

For Members of section: Dimension = Product Hierarchy = Product Level = Product Family

During Date Range section: Time dimension = Time Hierarchy = Time Period level = Month From = July To = December The result of this query is displayed in a table similar to the below: Trend Over Time Query Result Product Family Drink Food Non-Consumable Jul 2,205 17,036 4,522 Aug 1,921 15,741 4,035 Sep 1,939 14,663 3,786 Oct 1,898 14,232 3,828 Nov 2,344 18,278 4,648 Dec 2,419 19,356 5,021

SAP NetWeaver Visual Composer: User Guide

92

SAP Online Help

07.09.2004

Zero Activity (OLAP)


Purpose
The Zero Activity template is an OLAP variance template with which you can build queries that identify members of a selected level that have had sales in the past, but which have had no sales in a specified time period. You should use this template if you would like to address business questions such as the following: Which products didn't sell last year?

Prerequisites
You have an OLAP data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Zero Activity template, the wizard steps you through the following process flow:
...

1. Select a cube [Page 106] 2. Configure Zero Activity parameters [Page 94] 3. Define filters [Page 107] 4. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the MDX Editor [Page 125]

Example
For an example of working with the Zero Activity template, see Configuring Zero Activity Parameters [Page 94].

SAP NetWeaver Visual Composer: User Guide

93

SAP Online Help

07.09.2004

Configuring Zero Activity Parameters


Use
Use this screen to configure the parameters specific to the Zero Activity template. See Zero Activity (OLAP) [Page 93] for the description, business question, and workflow for using this template.

Procedure
1. In the Display Members of section of the screen, select the level that contains the members you want to see in the querys result, and the measure that should equal zero, using the parameters in the table below: Display Members Of Parameters Parameter Dimension Values Lists all dimensions in the cube on which the query is based (see Selecting a Cube [Page 106]). Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Lists all measures in the cube on which the query is based. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the members you want to see in the querys result. Select the measure that should provide a zero value.

Hierarchy

Level

Based on the measure

2. In the With No Activity for section of the screen, configure the time period during which you would like to search for no activity using the parameters in the table below: With No Activity For Parameters Parameter Time dimension Values Lists all the time dimensions in the cube on which the query is based. Lists all hierarchies in the currently selected dimension. Lists all levels in the currently selected hierarchy. Lists all members in the currently selected level. Lists all members in the currently selected level. Action Select the dimension that contains the hierarchy to display in the Hierarchy field. Select the hierarchy that contains the level to display in the Level field. Select the level that contains the time granularity for the from and to periods. Select the beginning of the time period that should have zero activity. Select the end of the time period that should have zero activity.

Hierarchy

Period level

From

To

SAP NetWeaver Visual Composer: User Guide

94

SAP Online Help

07.09.2004

3. Click Next.

Result
You proceed to the Define Filters [Page 107] screen.

Example
You want to know which products did not sell at all in January. To create this query, configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

Display Members Of section: Dimension = Product Hierarchy = Product Level = Product Name Based on the measure = Store Sales

With No Activity For section: Time dimension = Time Hierarchy = Time Period level = Month From = January To = January

The result of this query is a simple table such as the following:

Zero Activity Query Result Product Portsmouth Imported Beer Top Measure Imported Beer Fabulous Apple Drink Great Cranberry Muffins Great Muffins ...

SAP NetWeaver Visual Composer: User Guide

95

SAP Online Help

07.09.2004

All Data (Relational)


Purpose
The All Data template is a simple default template activated when you drag a relational data service to the workspace (see Configuring Queries Directly in Data Services [Page 123]). With this template, you can build queries that select all records and all fields as the final result, without any filters or joins. You should use this template if you would like to address business questions such as the following: What are all the available grade levels and their details?

Prerequisites
You have a relational data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select a relational data service and the All Data template, the wizard asks you only to Select a Table [Page 109] to complete the procedure for this template.

If you have entered the BI Query Wizard from configuring your data service directly in the workspace, your system and table are already configured and this step is bypassed.

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the SQL Editor [Page 128]

SAP NetWeaver Visual Composer: User Guide

96

SAP Online Help

07.09.2004

Count (Relational)
Purpose
The Count template is a relational template with which you can build queries that count all occurrences of a certain type of data in a group or groups within a table. You should use this template if you would like to address business questions such as the following: How many employees is each different manager responsible for?

Prerequisites
You have a relational data service configured as a BI system.

The Count template is not available for SAP Query data services.

Process Flow
After using the BI Query Wizard to select a relational data service and the Count template, the wizard steps you through the following process flow:
...

1. Select fields [Page 111] 2. Configure joins 3. [Page 114]Configure filters [Page 116] 4. Specify the sort order [Page 118] 5. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the SQL Editor [Page 128]

Example
For an example of using the Count template, and specifically of how selecting fields determines the grouping in a count result, see Selecting Fields [Page 111].

SAP NetWeaver Visual Composer: User Guide

97

SAP Online Help

07.09.2004

Freeform (Relational)
Purpose
The Freeform template is a special relational template that walks you through defining a query without the constraint of a particular business question. With it, you can select fields from your data service and specify joins, filter values, and sort criteria (just as with the other relational templates). This template is a simplification of the other templates, removing the constraint of a specific business question, but still hiding the complexity of the underlying query language.

Prerequisites
You have a relational data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select a relational data service and the Freeform template, the wizard steps you through the following process flow:
...

1. Select fields [Page 110] 2. Configure joins [Page 114] 3. Configure filters [Page 116] 4. Specify the sort order [Page 118] 5. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the SQL Editor [Page 128]

SAP NetWeaver Visual Composer: User Guide

98

SAP Online Help

07.09.2004

Heatmap (Relational)
Purpose
The Heatmap template is a relational template that delivers its result in a special heatmap [External] display. With this template, you can build queries that aggregate values of a selected primary group and compare them with values of a secondary group by displaying the results in boxes of differing sizes and colors. Using heatmaps, a large quantity of results can be organized within boxes in a specifically constrained space, making it easy to compare the major factors within a result set at a glance. Both color intensity (shifting within a gradient) and size of the boxes indicate relative performance, helping you to easily spot trends or standouts in a quick overview. You should use this template if you would like to address business questions such as the following: What is the relative distribution of sales among certain divisions and companies?

Prerequisites

...

You have a relational data service configured as a BI system. You have configured the URL to your Internet Graphics Service (IGS), which is required for heatmaps to display properly. To do this: a. From the Visual Composer Tools menu, choose Options. b. Select the Portal tab. c. In the Internet Graphics Service (IGS) URL field, enter the URL to your Internet Graphics Service. If you need help determining this suffix, contact your BW System Administrator.

Internet Graphics Service versions 640 and greater are required.

Process Flow
After using the BI Query Wizard to select a relational data service and the Heatmap template, the wizard steps you through the following process flow:
...

1. Select fields [Page 113] 2. Configure joins [Page 114] 3. Configure filters [Page 116] 4. Specify the sort order [Page 118] 5. Configure Heatmap parameters [Page 101] 6. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured.

SAP NetWeaver Visual Composer: User Guide

99

SAP Online Help

07.09.2004

A data service created with the BI Query Wizards Heatmap template is configured automatically with a start input and a heatmap view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal.

Heatmaps do not display in the Visual Composer Preview; you will see the default chart from the Internet Graphics Service instead. In order to see your heatmap, you must deploy it to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the SQL Editor [Page 128]

Example
For an example of working with the Heatmap template, see Configuring Heatmap Parameters [Page 101].

SAP NetWeaver Visual Composer: User Guide

100

SAP Online Help

07.09.2004

Configuring Heatmap Parameters


Use
Use this screen to configure the parameters specific to the Heatmap template. See Heatmap (Relational) [Page 99] for important prerequisites and information about using this template.

Procedure
...

1. In the Display Heatmap for section, use the drop-down lists to select the fields that should designate Primary grouping (larger boxes) and Secondary grouping (smaller sub-boxes).

You may select any data type. All the fields you selected on the Select Fields [Page 113] screen are listed.

2. In the Where section, use the drop-down lists to select the fields that should designate Size is determined by and Color is determined by.

You must select numeric data types for these values, and only the numeric fields you selected on the Select Fields [Page 113] screen are listed.

3. Click Next.

Result
You proceed to the Preview Result [Page 119] screen.

Example
You want to view the relative distribution of sales (both in quantity and revenue) among certain divisions and companies. To do this, configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.

Display Heatmap for section: Primary grouping = Sales.Division (the Division field from the Sales table) Secondary grouping = Sales.Company (the Company field from the Sales table)

Where section: Size is determined by = Sales.Quantity (the Quantity field from the Sales table) Color is determined by = Sales.Revenue (the Revenue field from the Sales table)

SAP NetWeaver Visual Composer: User Guide

101

SAP Online Help

07.09.2004

For these values to be available in the drop-down lists on this screen, you must first have selected them on the Select Fields [Page 113] screen. The result of this query would generate a heatmap [External] similar to the following:

Heatmaps do not display in the Visual Composer Preview; you will see the default chart from the Internet Graphics Service instead. To see your heatmap, you must deploy it to your portal.

In this heatmap: Instances of Division are represented by the large, primary boxes. Instances of Company are represented by the smaller, colored boxes secondary to 1. Instances of Sales in quantity are represented by the size of 2. The larger the box, the higher the quantity. Instances of Sales in revenue are represented by the color of 2, in a gradient. The darker the color (towards the right side of the gradient legend which might denote millions of dollars), the higher the sales in revenue.

Although the display looks simple at first glance, note that sizes of both the primary and secondary boxes are shown relative to each other, as well as the colors of the boxes (in a relative gradient). You can compare how divisions are doing relative to each other, as well as how companies are doing relative to each other. It is easy in a heatmap to note standouts within a large pool of data. For example, in this result: The company represented by the largest sub-box (in the Financials division in the upper-left corner) has the highest sales in quantity. The company represented by the darkest sub-box (in the Industrials division) has the highest sales in revenue.

SAP NetWeaver Visual Composer: User Guide

102

SAP Online Help

07.09.2004

Minimum/Maximum (Relational)
Purpose
The Minimum/Maximum template is a relational template with which you can build queries that find the minimum or maximum value of a field, and provide details from the row that holds that value. You should use this template if you would like to address business questions such as the following: Which store has the smallest revenue; where is that store and who is the manager?

Prerequisites
You have a relational data service configured as a BI system.

Process Flow
After using the BI Query Wizard to select a relational data service and the Minimum/Maximum template, the wizard steps you through the following process flow:
...

1. Select fields [Page 110] 2. Configure joins [Page 114] 3. Configure filters [Page 116] 4. Specify the sort order [Page 118] 5. Configure Minimum/Maximum parameters [Page 104] 6. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see: Working With Queries [Page 130] Using the SQL Editor [Page 128]

Example
For an example of working with the Minimum/Maximum template, see Configuring Minimum/Maximum Parameters [Page 104].

SAP NetWeaver Visual Composer: User Guide

103

SAP Online Help

07.09.2004

Configuring Minimum/Maximum Parameters


Use
Use this screen to configure the parameters specific to the Minimum/Maximum template. See Minimum/Maximum (Relational) [Page 103] for the description, business question, and workflow for using this template.

Procedure
...

1. Select whether the value should be the Smallest (minimum) or Largest (maximum) value. 2. In the Field drop-down list, select the field in which to search for the smallest or largest value.

All fields in any table selected on the Select Fields [Page 110] screen appear in the drop-down list. Although the fields you selected with Select Fields determine which fields will appear in the result, you can base your minimum or maximum requirement on any field in the table. The field you select does not have to be a numeric data type.

3. Click Next.

Result
You proceed to the Preview Result [Page 119] screen.

Example
You want to know which store has the smallest revenue, where the store is, and who the manager of the store is. To find this out, you configure the values on this screen in the following manner:

This example assumes you have similar types of metadata available in your data service.
...

1. Select the Smallest radio button. 2. From the Field drop-down list, select the Sales.Revenue field (the Revenue field from the Sales table). Since you want to see the store, city, and managers name in the result, you have already used the Select Fields [Page 110] screen to select Store, City, and Manager from a table called Sales.

SAP NetWeaver Visual Composer: User Guide

104

SAP Online Help The result of this query is one row displayed in a table such as the following: Minimum/Maximum Query Result Store SuperStore City Palo Alto Manager Jones

07.09.2004

The result shows that SuperStore had the smallest revenue, and the fields (columns) displayed in the table are those that you configured on the Select Fields screen. Note that you do not actually need to see the Revenue field in the result, since you know the query result will show you the record with the minimum value for Revenue.

SAP NetWeaver Visual Composer: User Guide

105

SAP Online Help

07.09.2004

Selecting a Cube
Use
Use this screen to select the cube [External] upon which you wish to base your query.

Procedure
...

1. In the Available Cubes section, locate and select a cube. This section lists the data service you chose on the Select a System [Page 56] screen as the root node of a tree, followed by any catalogs contained in that service. Expand the catalog that contains the cube you want, and click to select the cube. If there is a description or properties associated with this cube, review them in the Description and Properties sections of the screen. 2. Click Next.

Result
You advance to a screen in which you configure parameters relevant for your template.

Since there are no parameters to configure in the Grand Totals template, after selecting a cube you proceed directly to the Preview Result [Page 119] screen.

SAP NetWeaver Visual Composer: User Guide

106

SAP Online Help

07.09.2004

Defining Filters
Use
Use this screen to define single filter [External] values and filter ranges.

Defining filters is usually optional, but depending on the template you have chosen it may be an important step. For the Percentage Share template, for example, you usually need to define filters in order for the business logic to work correctly.

Procedure
To define single filter values Use the Browse tab to navigate within a the metadata hierarchy to the member [External] on which to base the filter:
...

1. Using the Dimension drop-down list, select the dimension [External] in which to browse for a member. The Hierarchy drop-down list is populated with all hierarchies [External] in the selected dimension, and the metadata hierarchy below displays the metadata in the selected hierarchy. 2. To change the selected hierarchy, select a different value from the Hierarchy dropdown list. 3. In the metadata hierarchy, expand the desired level [External] and locate the member or members upon which to base single filter values. 4. Select a member and Click to transfer it to the Selected Filter Values list. Repeat to define additional filter values. You may create individual filter values with members from different levels, hierarchies, or dimensions.

To define filter ranges Use a start member and an end member that belong to the same level. On the Browse tab, navigate to locate the start and end members in a given level in the metadata hierarchy:
...

1. Use steps 1 and 2 above to navigate to the desired list of levels. 2. Expand the level in which your start and end members are located. 3. Select a start member (to indicate the start of the range) and click to transfer it to the Selected Filter Values list. 4. From the same level in the metadata hierarchy, select the end member of the range and click Range . The end members name is appended to the name of the start member in the Selected Filter Values list, indicating that the range is active.

To work with existing filters Click Clear to remove all filters from Selected Filter Values list. Click the button to remove a selected filter or filter range from the Selected Filter Values list.

SAP NetWeaver Visual Composer: User Guide

107

SAP Online Help

07.09.2004

View any details about a selected filter in the Filter Details section of the screen.

To search metadata If you are having trouble locating a specific member in your data service, or if you have expanded a level with too many members to display in the list, you may search for a specific member within a selected level. On the Search tab:
...

1. The drop-down lists are automatically populated with the currently selected dimension, hierarchy, and list of levels from the Browse tab, if available. Change the values if you would like to search within a different level. You must select a level in which to search. 2. Place your cursor in the Member field, and type the name of the member you wish to find. This field also functions as a drop-down list, which you can use to select from the history of searched terms. 3. Click Search. If the member is found, it will be displayed in the list below.

To continue Once you have configured filters the way you wish (or left the selections blank if you dont wish to define filters), click Next.

Result
You proceed to the Preview Result [Page 119] screen.

SAP NetWeaver Visual Composer: User Guide

108

SAP Online Help

07.09.2004

Selecting a Table
Use
Use this screen to select the table [External] upon which to base your query.

Procedure
...

1. In the Available Tables section, locate and select a table. This section lists the data service you chose on the Select a System [Page 56] screen as the root node of a tree, followed by any catalogs contained in that service. a. Expand a catalog to see a list of schema in that catalog. b. Expand a schema to see a list of tables in that schema. c. Click to select the table. If there is a description or properties associated with this table, review them in the Table Description and Table Properties sections of the screen. 2. Click Next.

Result
You proceed to the Preview Result [Page 119] screen.

SAP NetWeaver Visual Composer: User Guide

109

SAP Online Help

07.09.2004

Selecting Fields
Use
Use this screen to select the fields [External] upon which to base your query. You may select fields from different tables [External] in your data service. There is no limit to the number of fields you may select. Selecting fields typically determines which fields will be displayed in the result.

Procedure
...

1. In the Available Tables and Fields section, locate and select a field. This section lists the data service you chose on the Select a System [Page 56] screen as the root node of a tree, followed by any catalogs contained in that service. a. Expand a catalog to see a list of schema in that catalog. b. Expand a schema to see a list of tables in that schema. c. Expand the table that contains the field you want, and click to select the field. 2. Click to transfer the field to the Selected Fields list. 3. Add additional fields from the same or from different tables as desired. 4. To add all fields in a table to the Selected Fields list, select the table and click . 5. To remove a field from the Selected Fields list, select the field and click . 6. To remove all fields from the Selected Fields list, click Clear. 7. Click Next.

Result
You proceed to the Configure Joins [Page 114] screen.

To configure joins, you must select fields from two or more different tables. If you have selected fields from only one table on this screen, the wizard bypasses the Configure Joins screen and you proceed to the Configure Filters [Page 116] screen.

SAP NetWeaver Visual Composer: User Guide

110

SAP Online Help

07.09.2004

Selecting Fields - Count


Use
Use this screen to select the fields [External] upon which to base your query. You may select fields from different tables [External] in your data service. There is no limit to the number of fields you may select. Selecting fields determines which fields will be displayed in the result. For the Count template, the order in which you select the fields is also important because it determines grouping (see Example, below).

Procedure
...

1. In the Available Tables and Fields section, locate and select a field. This section lists the data service you chose on the Select a System screen as the root node of a tree, followed by any catalogs contained in that service. a. Expand a catalog to see a list of schema in that catalog. b. Expand a schema to see a list of tables in that schema. c. Expand the table that contains the field you want, and click to select the field. 2. Click to transfer the field to the Selected Fields list. 3. Add additional fields from the same or from different tables, or remove fields as desired.

To add all fields in a table to the Selected Fields list, select the table and click . To remove a field from the Selected Fields list, select the field and click . To remove all fields from the Selected Fields list, click Clear.

4. Click Next.

Result
You proceed to the Configure Joins screen.

To configure joins, you must select fields from two or more different tables. If you have selected fields from only one table on this screen, the wizard bypasses the Configure Joins screen and you proceed to the Configure Filters screen.

Example
You want to know how many employees each manager is responsible for, and how many are part-time or full-time employees. To find out, you use the Count template and select the Manager field, and then the Type field from the Employees table. This query counts all occurrences in groups, with one group per selected field. The result of such a Count query is a table such as the below:

SAP NetWeaver Visual Composer: User Guide

111

SAP Online Help

07.09.2004

Count Query Result: With Grouping Manager Miller Miller Jackson Jackson Sullivan Type Full-time Part-time Full-time Part-time Full-time Count 38 3 10 1 16

Note that the order in which the fields appear in the Selected Fields list is important. The results are first grouped by the first field, then by the second field, and so on. If you had first selected Type and then Manager from the Employees table, the order of the columns above would be reversed, grouping the result first by employment type, then by manager, as in the table below:

Count Query Result: With Grouping Type Full-time Full-time Full-time Part-time Part-time Manager Miller Jackson Sullivan Miller Jackson Count 38 10 16 3 1

For the description, sample business questions, and process flow of working with the Count template, see Count (Relational) [Page 97].

SAP NetWeaver Visual Composer: User Guide

112

SAP Online Help

07.09.2004

Selecting Fields - Heatmap


Use
Use this screen to select the fields [External] upon which to base your query. You may select fields from different tables [External] in your data service. There is no limit to the number of fields you may select.

For the Heatmap template, you must select at least four fields, at least two of which must be numeric. See Configuring Heatmap Parameters [Page 101] for additional information.

Procedure
...

1. In the Available Tables and Fields section, locate and select a field. This section lists the data service you chose on the Select a System screen as the root node of a tree, followed by any catalogs contained in that service. a. Expand a catalog to see a list of schema in that catalog. b. Expand a schema to see a list of tables in that schema. c. Expand the table that contains the field you want, and click to select the field. 2. Click to transfer the field to the Selected Fields list. 3. Add additional fields from the same or from different tables as desired. 4. To add all fields in a table to the Selected Fields list, select the table and click . 5. To remove a field from the Selected Fields list, select the field and click . 6. To remove all fields from the Selected Fields list, click Clear. 7. Click Next.

Next is only enabled if you have selected at least four fields, at least two of which are numeric.

Result
You proceed to the Configure Joins [Page 114] screen.

To configure joins, you must select fields from two or more different tables. If you have selected fields from only one table on this screen, the wizard bypasses the Configure Joins screen and you proceed to the Configure Filters [Page 116] screen.

SAP NetWeaver Visual Composer: User Guide

113

SAP Online Help

07.09.2004

Configuring Joins
Use
Use this screen to create or delete joins [External].

This is an optional step. The type of join created with this step is an inner join (intersect). Since multiple tables are required for joins, you must have selected fields from multiple tables on the Select Fields screen in order to configure joins. If you have only selected fields from one table, this step is bypassed.

Procedure
To add a join condition
...

1. From the Left Field drop-down list, select the join field for the left table.

All fields from all the tables you selected on the Select Fields screen are displayed in the drop-down list.

2. From the Operator field, select the operator that indicates how the left and right fields should be compared. Available operators are: Join Operators Operator = > < >= <= <> Description Equal to Greater than Less than Greater than or equal to Less than or equal to Not equal to

3. From the Right Field drop-down list, select the join field for the right table.

All fields from all the tables you selected on the Select Fields screen are displayed in the drop-down list. The Left Field and Right Field selections must be from different tables.

4. Click Add to transfer the join to the joins list. 5. Repeat steps 1-4 to add additional join conditions. You may add as many joins as you wish.

To delete a join condition 6. Select an entry in the joins list. 7. Click Delete.

SAP NetWeaver Visual Composer: User Guide

114

SAP Online Help

07.09.2004

To continue Once you have configured joins the way you want (or left the selections blank if you dont want to define joins), click Next.

Result
You proceed to the Configure Filters [Page 116] screen.

SAP NetWeaver Visual Composer: User Guide

115

SAP Online Help

07.09.2004

Configuring Filters
Use
Use this screen to create or delete filters.

This is an optional step.

Procedure
To add a filter
...

1. From the Field drop-down list, select the field for which to configure the filter.

All fields from all the tables you selected on the Select Fields screen are displayed in the drop-down list.

2. From the Operator field, select the operator that indicates how the Field entry and the corresponding Value entry should be compared. Available operators are: Filter Operators Operator = > < >= <= <> is between is like is null Description Equal to Greater than Less than Greater than or equal to Less than or equal to Not equal to Is between Is like Is null

3. In the Value field, enter the value to which to compare the field.

The value can be either numeric or text.

4. If you have selected is between as your operator, enter the end value for your range in the And field. 5. Click Add to transfer the filter to the filters list.

The And/Or value is not relevant for single filter entries.

SAP NetWeaver Visual Composer: User Guide

116

SAP Online Help

07.09.2004

To add additional filters You may create just one filter, or you may add as many additional filters as you wish. You must specify an And/Or value for any additional filters you add. To add additional filters, follow the procedure below:
...

1. From the And/Or drop-down list, select values according to the table below: And/Or Values Value And Or Description This filters condition must apply. This filters condition is handled after any AND filters.

2. Repeat steps 1-5 in the To Add a Filter section, above. 3. Click Add to transfer the filter to the filters list.

To delete a filter
...

1. Select an entry in the filters list. 2. Click Delete.

To continue Once you have configured filters the way you want (or left the selections blank if you don't want to define filters), click Next.

Result
You proceed to the Specify Sort Order [Page 118] screen.

SAP NetWeaver Visual Composer: User Guide

117

SAP Online Help

07.09.2004

Specifying the Sort Order


Use
Use this screen to specify or delete sort orders for specific fields, and to arrange entries according to priority.

This is an optional step.

Procedure
To specify sort order for a field
...

1. From the Field drop-down list, select the field for which to specify a sort order.

The drop-down list displays the fields you selected on the Select Fields screen.

2. In the Order drop-down list, specify whether the order should be Ascending or Descending. 3. Click Add to transfer the sort entry to the sort order list. 4. Repeat steps 1-3 to add additional sort entries. You may add as many entries as you wish.

To arrange sort entry priority


...

1. Select an entry in the sort list. 2. Click Up to increase the priority of the sort entry. 3. Click Down to decrease the priority of the sort entry.

To delete a sort entry


...

1. Select an entry in the sort list. 2. Click Delete.

To continue Once you have configured sort entries the way you want (or left the selections blank if you don't want to specify sort orders), click Next.

Result
You proceed to the Preview Result [Page 119] screen, or you proceed to a screen in which to configure template-specific parameters (for the Heatmap and Minimum/Maximum templates).

SAP NetWeaver Visual Composer: User Guide

118

SAP Online Help

07.09.2004

Previewing the Result


Use
This screen allows you to review the query you have defined and see a preview of its result in a table.

Procedure
...

1. In the Description section, review the query you have defined. The description confirms the values you have selected from your data service in a descriptive phrase of the result. 2. In the Preview section, review the way the result will appear in a table. The table displays results of the query, listed in the columns you have configured using the wizard. The display is limited to a maximum of 15 rows of the result. 3. Click Finish.

Result
You return to the Visual Composer workspace, where a new data service has been created with the query you have configured. A data service created with the BI Query Wizard is configured automatically with a start input and a table view as output. These three elements together constitute a complete iView, ready for preview and deployment to your portal.

Just as on the Preview Result screen, when you preview your querys result using the Preview tab in the Visual Composer workspace, the maximum number of rows displayed is 15. For Heatmap [Page 99] templates, an HTML view that generates a heatmap is created on the URL port. For data services based on BW-native [Page 120] systems, an HTML view that displays the default Web template is generated on the URL port. If you have configured your query directly in a data service instead of using the BI Query Wizard, you must configure the input and output ports of your data service manually. See Configuring Queries Directly in Data Services [Page 123] for more information.

For more information about displaying the result, and working with your query and its view after it has been created, see Working With Queries [Page 130].

SAP NetWeaver Visual Composer: User Guide

119

SAP Online Help

07.09.2004

Working With BW Query Views


Purpose
If you have selected a BW-native (Business Information Warehouse) data service (from the BW Web API Connections category on the Select a System [Page 56] screen), the BI Query Wizard allows you to select and display available query views in that system. Since you cannot create and store new queries in a BW system using the BI Query Wizard, query templates are unavailable in this case.

Prerequisites
You must configure the suffix to the URL for your BW Web service in order for BW query views to display properly. To do this:
...

1. From the Visual Composer Tools menu, choose Options. 2. Select the Portal tab. 3. In the BW Query View WS suffix field, enter the suffix to your query view URL. If you need help determining this suffix, contact your BW System Administrator.

BW queries saved with mandatory SAP Variables are not supported.

Process Flow
The process flow for working with BW-native data services in the BI Query Wizard is as follows:
...

1. Select a query [Page 121] 2. Select a query view [Page 122] 3. Preview the result [Page 119]

Result
After you have completed the wizard screens according to the process above and clicked Finish, you return to the Visual Composer workspace, where a new data service has been created with the query view you have selected. A BW-native data service created with the BI Query Wizard is configured automatically with a start input and an HTML view on the URL port that generates the Web template for the BW query you selected. These three elements together constitute a complete iView, ready for preview and deployment to your portal. To continue working with your data service and query, see Working With Queries [Page 130].

The MDX Editor is not available for BW-native data services.

SAP NetWeaver Visual Composer: User Guide

120

SAP Online Help

07.09.2004

Selecting a Query
Use
Use this screen to select the BW query in which the query view you want to display is located. See Working With BW Query Views [Page 120] for prerequisites and more information.

Procedure
...

1. From the Browse drop-down list, select the category in which you wish to browse for the query. Available categories include:

All History Favorites Roles

The items listed in these categories are those that are configured in the BW system itself. 2. Locate and select the query in the list. If there is a description or properties associated with this query, review them in the Description and Properties sections of the screen. 3. Click Next

Result
You advance to the Select a Query View [Page 122] screen.

SAP NetWeaver Visual Composer: User Guide

121

SAP Online Help

07.09.2004

Selecting a Query View


Use
Use this screen to select the query view you want to display. See Working With BW Query Views [Page 120] for prerequisites and more information.

Procedure
...

1. From the Available Query Views drop-down list, select the query view you want to display. If there are no query views configured in the selected query, a Default view appears in the list. This view displays the query exactly as it is defined, without a particular view. If a description or properties are available, you may review them in the Description and Properties sections of the screen. 2. The Available Templates drop-down list is disabled, as there is only one default template, and no additional selection is available. 3. Click Next.

Result
You advance to the Preview Result [Page 119] screen.

SAP NetWeaver Visual Composer: User Guide

122

SAP Online Help

07.09.2004

Configuring Queries Directly in Data Services


Use
Instead of using the BI Query Wizard [Page 53], you can manually configure a query in your data service by first adding the data service to the Design workspace. This provides you with a "shortcut" into creating a BI query. However, after creating your query, you must configure the input and output ports of your data service manually.

Prerequisites
You must select a BI system from the Data task panel to be able to access the BI query functionality. A BI system is a system defined based on: A BI Java Connector:

BI XMLA Connector BI ODBO Connector BI JDBC Connector BI SAP Query Connector

The SAP Connector against a BW system

Depending on how your systems have been named, it may not always be clear which data services listed in the Data panel are BI systems. For example, in your system landscape you may have systems based on multiple JDBC connectors. A system based on the JDBC connector provided by the portal does not provide the BI capability necessary to use the BI query functionality, whereas a system based on the BI JDBC Connector does.

Procedure
...

1. Follow the procedure in Adding Data Services to Your Model [Page 49] to add a data service. 2. In the Visual Composer design workspace, select the data service icon. 3. Choose BI BI Query Wizard.

Alternately, you can right-click the data service icon to access the context menu, and select Configure Query.

Result
The BI Query Wizard opens to the Select a Template [Page 57] screen. The wizard process that follows is the same as described in the BI Query Wizard [Page 53] procedures, except that you bypass any system, table, or cube selection screens, since your system has already been configured. In addition, once you have completed the wizard process, you must configure the input and output ports of your data service manually (see Further Configuring Your Query [Page 133] for more information). When you create a query by dragging a data service onto the workspace, the following query templates are assigned by default: SAP NetWeaver Visual Composer: User Guide 123

SAP Online Help Default Query Templates System Type OLAP data service Relational data service BW-native data service Default Template Grand Totals (OLAP) All Data (Relational)

07.09.2004

Default Web template associated with the query selected

SAP NetWeaver Visual Composer: User Guide

124

SAP Online Help

07.09.2004

Using the MDX Editor


Use
You may create new OLAP queries or edit the MDX statements of existing OLAP queries with the MDX Editor.

Prerequisites
You have at least one OLAP data service configured as a BI system. You are connected to a portal. You have created and zoomed to the level of an iView in which to place your query.

The MDX Editor is only available for OLAP data services. The MDX Editor is not available for BW-native data services (services defined based on the BW Web API Connection)

Procedures
To create new OLAP queries with the MDX Editor:
...

1. From the BI menu, choose MDX Editor. 2. In the MDX Editor dialog box, select a system from the System drop-down list. 3. In the Object Browser, select metadata and syntax examples with which to construct your query, using the Browse, Search, and Syntax Examples tabs:

Use the Browse tab to browse for and select specific metadata to use in your statement. You may browse for and select any type of metadata: i. Click Browse. The metadata list is populated with the selected system as the root node, followed by the list of its children in a tree. Optionally, restrict the level of metadata that appears in the metadata list by using the drop-down lists: Browse Lists List Schema Values All schemas in the selected system Action Click Browse to populate the metadata list with the selected schema as root node Click Browse to populate the metadata list with the selected cube as root node Click Browse to populate the metadata list with the selected dimension as root node Click Browse to populate the metadata list with the selected hierarchy as root node

Cube

All cubes in the selected schema All dimensions in the selected cube

Dimension

Hierarchy

All hierarchies in the selected dimension

SAP NetWeaver Visual Composer: User Guide

125

SAP Online Help

07.09.2004

ii. iii.

In the metadata tree, locate and select the object to use in the statement. Maximize or restore the metadata list at any time using the up and down arrows.

Use the Search tab to search for and select a specific member to use in your statement: iv. The drop-down lists are automatically populated with the currently selected values in the drop-down lists on the Browse tab, if available. Change the values to search within a different hierarchy or level. You may search for members across all levels in a hierarchy, or within a specific level. Place your cursor in the Member field, and type the name of the member you want to find. This field also functions as a drop-down list, which you can use to select from the history of searched terms. Click Search. If the member is found, you may select it in the list below.

v.

vi.

Use the Syntax Examples tab to select a template with which to build your statement. The MDX Editor provides several templates organized into different categories. After you transfer the syntax example to the Editor pane, replace the objects in brackets (<< >>) with selected metadata from your data service.

4. Drag-and-drop or double-click to transfer the syntax example or the unique name of the selected object to the Editor pane at the current cursor location. 5. Edit your statement as desired in the Editor pane, using any of the following methods:

Type directly into the pane. Transfer metadata objects into the pane using the procedure in step 4. Use the editor icons: Editor Icons Icon Function Cut Copy Paste Undo Redo Validate Run

6. Validate your statement by clicking the Validate icon. 7. Run your statement to preview its result by clicking the Preview icon. 8. Maximize or restore the Preview pane at any time by clicking the up or down arrows. 9. Press Save to save your statement. 10. Press Close to close without saving.

SAP NetWeaver Visual Composer: User Guide

126

SAP Online Help

07.09.2004

The MDX Editor cannot create a preview of results that consist of a single cell, such as the result of the statement SELECT FROM <<cube>>. You may save such a query, but the resultant data service will not have input and output ports. The MDX Editor allows you to save a statement even if it is invalid. We recommend you check the validity of your statement using the Validate icon before saving it.

To edit MDX statements of existing OLAP queries using the MDX Editor: See Modifying Existing Queries [Page 131], and follow the editor usage instructions above.

If you use the MDX Editor to save changes to a Grand Totals or Zero Activity template, your result will be changed to a horizontal display (results listed across columns) instead of a vertical display (results listed in rows).

Result
Once you have saved a statement, you return to the Visual Composer workspace, where a data service has been configured with the MDX statement you have created. See Working With Queries [Page 130] for ways to continue working with your query.

SAP NetWeaver Visual Composer: User Guide

127

SAP Online Help

07.09.2004

Using the SQL Editor


Use
You may create new relational queries or edit the SQL statements of existing relational queries with the SQL Editor.

Prerequisites
You have at least one relational data service configured as a BI system. You are connected to a portal. You have created and zoomed to the level of an iView in which to place your query.

The SQL Editor is only available for relational data services. The SQL Editor is not available for SAP Query data services (services defined based on the SAP Query Connection)

Procedures
To create new relational queries with the SQL Editor:
...

1. From the BI menu, choose SQL Editor. 2. In the SQL Editor, select a system from the System drop-down list. 3. In the Object Browser, select metadata and syntax examples with which to construct your query with the Browse, Search, and Syntax Examples tabs:

Use the Browse tab to browse for and select specific metadata to use in your statement. You may browse for and select any type of metadata. Use the Search tab to search for a specific table: i. Place your cursor in the Table field, and type the name of the table you want to find. This field also functions as a drop-down list, which you can use to select from the history of searched terms. Click Search. The SQL Editor searches across all catalogs for tables with the specified name. If the table is found, you may select it or browse and select fields within it in the list below.

ii.

Use the Syntax Examples tab to select a template with which to build your statement. The SQL Editor provides several templates organized into different categories. After you transfer the syntax example to the Editor pane, replace the objects in brackets (<< >>) with selected metadata from your data service.

4. Drag-and-drop or double-click to transfer the syntax example or the unique name of the selected object to the Editor pane at the current cursor location. 5. Edit your statement as desired in the Editor pane, using any of the following methods:

Type directly into the pane. Transfer metadata objects into the pane using the procedure in step 4. Use the editor icons:

SAP NetWeaver Visual Composer: User Guide

128

SAP Online Help

07.09.2004

Editor Icons Icon Function Cut Copy Paste Undo Redo Validate Run

6. Validate your statement by clicking the Validate icon. 7. Run your statement to preview its result by clicking the Preview icon. 8. Maximize or restore the Preview pane at any time by clicking the up or down arrows. 9. Press Save to save your statement. 10. Press Close to close without saving.

The SQL Editor allows you to save a statement even if it is invalid. We recommend you check the validity of your statement using the Validate icon before saving it.

To edit SQL statements of existing relational queries using the SQL Editor: See Modifying Existing Queries [Page 131], and follow the previous editor usage instructions.

Result
Once you have saved a statement, you return to the Visual Composer workspace, where a data service has been configured with the SQL statement you have created. See Working With Queries [Page 130] for ways to continue working with your query.

SAP NetWeaver Visual Composer: User Guide

129

SAP Online Help

07.09.2004

Working With Queries


Purpose
After you have created a BI query using the BI Query Wizard [Page 53] or by configuring a query directly in a data service [Page 123], you may continue to work with it using one of the processes below.

Process Flow
Modifying an existing query [Page 131] Editing query properties [Page 132] Further configuring your query [Page 133] Using the MDX Editor [Page 125] Using the SQL Editor [Page 128]

SAP NetWeaver Visual Composer: User Guide

130

SAP Online Help

07.09.2004

Modifying Existing Queries


Use
After you have created a BI query, you may modify it using the BI Query Wizard, or you may edit the query statement directly by using the MDX or SQL Editor.

Procedures
To modify a query using the BI Query Wizard:
...

1. In the Design workspace, select the data service. 2. Select BI BI Query Wizard. You may alternately right-click to access the context menu, and select Configure Query (Configure Query View for BW data services) from the context menu. The BI Query Wizard is evoked on the Select a Query Template [Page 57] screen. You may change any aspect of your query except for the data service, cubes, or tables associated with your query.

To modify a query using the MDX or SQL Editor:


...

1. In the Design workspace, select the data service. 2. Select BI MDX Editor (for OLAP data services) or BI SQL Editor (for relational data services). You may alternately right-click to access the context menu, and select MDX Editor (for OLAP data services) or SQL Editor (for relational data services) from the context menu. The MDX or SQL Editor appears with your currently-configured statement. See Using the MDX Editor [Page 125] or Using the SQL Editor [Page 128] for instructions on using the editors.

If a relational data service is selected and you select MDX Editor from the BI menu, the editor disregards your selection and assumes that you want to create a new OLAP query. Likewise, if an OLAP data service is selected and you select SQL Editor from the BI menu, the editor creates a new relational query. The MDX Editor is not available for BW data services (services defined based on the BW Web API Connection), and the SQL Editor is not available for SAP Query data services (services defined based on the SAP Query Connection).

SAP NetWeaver Visual Composer: User Guide

131

SAP Online Help

07.09.2004

Query Properties
Features
The table below lists properties specifically relevant to BI queries: Query Properties Panel and Property Properties Query Configuration Max. rows Selected Object Data service Notes The display limit of a querys result as deployed to the portal. The default is 500, to avoid unintentionally returning a very large result. Type in a new value or use the scroll arrows to change. Properties Graphic Symbol Description Properties Graphic Symbol Description Data service The result of the query, formulated into a sentence. Double-click to edit. In the case of a selected SQL or MDX query, MDX or SQL statement The MDX or SQL statement. Though you may double-click to edit this string, the statement itself is unchanged. Use the MDX or SQL editor to edit the actual statement. Available fields for mapping on the input port. Note that the names of these fields come directly from your data service, but display of certain characters such as extended characters or leading numeric values is not supported, therefore you may see some mapping in the name displayed.

Fields

Input port on the data service

See Defining UI Component General Properties [Page 148] and Defining UI Component Field Properties [Page 149] to see information about general properties.

SAP NetWeaver Visual Composer: User Guide

132

SAP Online Help

07.09.2004

Further Configuring Your Query


Use
After you have created a BI query, you may further configure it by defining different inputs and outputs for your data service. For example, you may wish to: Create a columns chart view on the output port that graphically displays the result of a Top 5 query in columns. Create an input form on the data service that lets the user enter a string for a specific country and then re-submit the query. Create advanced BI applications by stringing multiple objects together from the input and output of the data service.

Procedures
Creating a Different Output Port
All of the queries created using the BI Query Wizard (except for the Heatmap and query views based on BW-native data services) are automatically configured with a table view on the output port. You may instead configure your data service to display a different view such as a chart. To do this:
...

1. Select and delete the table view connected to the output port of your data service. 2. Follow the procedure in Defining a Chart [Page 161]. Possible alternate views for each query template are suggested in the following table: Output Port Suggestions Query Template All Data Count (OLAP) Count (Relational) Cumulative Total Freeform Grand Totals Minimum/Maximum Moving Average Percentage Growth Percentage Share Planned vs. Actual Rank Change Top N Trend over Time Zero Activity Alternate View Table Bars chart Table Lines chart Table Table Table Lines chart Table Pie chart Columns chart Table Columns chart Lines chart Table

SAP NetWeaver Visual Composer: User Guide

133

SAP Online Help

07.09.2004

The Heatmap template is configured by default to display a heatmap [External] through the URL port. Instead of using the output port, BW-native data services are configured by default to render the default Web template through the URL port. The BW data service is also created with an output port that you may use to retrieve the data in table format.

The display of a query's result deployed in the portal is limited to 500 rows, to avoid unintentionally returning a very large result. See Query Properties [Page 132] for more information.

Creating a Different Input Port


All of the queries created via the BI Query Wizard are automatically configured with a start input. You may instead wish to provide a form on the input port so the user can enter specific information and resubmit the query at runtime. To do this:
...

1. Select and delete the start input of your data service. 2. Follow the procedure in Defining Input to the Data Service [Page 139]. The table below lists the default fields on the input ports for each type of system: Default Fields on Input Ports System Type Relational systems OLAP systems BW-native systems Description Every field of the selected table One field per dimension of the selected cube One field per characteristic contained in the query

You may see some mapping of characters in the field names. See Query Properties [Page 132] for more information. If you replace the start trigger of a BW query view with an input form and view the application in the Preview workspace, information you submit through the input form does not update the BW Web application. When you deploy your application into the portal, the values from the input form properly update the application.

SAP NetWeaver Visual Composer: User Guide

134

SAP Online Help

07.09.2004

Creating Advanced BI Applications


You can string multiple objects together from the inputs and outputs of the data service to create advanced BI applications. For example: Use the result of one query as the input of another query. You could, for example, supply a list of countries from a JDBC table as input to a second query. To do this, attach the output of the first query to the input of the second query and map the fields. Use the Fields panel to specify the fields that appear in the input form. Supply real-time results as input for a query. In business scenarios, you may wish to use detailed real-time data such as results from an R/3 BAPI as the input to a query, and then perform analysis of it in the BI query. For example, get a list of current customers from an R/3 BAPI and then perform analysis for each customer with a BI query. One example of such an advanced scenario might look something like the below:

Query results are dynamic. If you are using fields from the result of one query as the input for another object, your mappings could become invalid when the results of your query change during runtime. In this case, the input port becomes null and could provide unexpected results.

SAP NetWeaver Visual Composer: User Guide

135

SAP Online Help

07.09.2004

Adding Siebel Data Services


Use
You can import Siebel business components as data services into your model, in the same manner that you import standard SAP data services. You can create a model that integrates both Siebel components and SAP data services.

Prerequisites
Your Storyboard server is connected to SAP Enterprise Portal 6.0 SP2. iWay connectors must be installed on the portal for Siebel connectivity. For information about installing the iWay connector, see the SAP NetWeaver Installation Guide.

Procedure
...

1. Open iView in the Design workspace 2. From the main menu, choose Model Select Data Services to display the Data task panel. 3. If you have not connected to the portal from which you will import the Siebel data services (business components), do so now:
...

a. In the Portal field at the top right (end of the main menu), enter the URL of a portal whose system landscape includes the application on which you will base the iView. Be sure that the Visual Composer Addons have been installed on this server. Example: http://myportal.sap.com:50000, where myportal is the name of the portal server host, sap.com is the domain, and 5000 is the J2EE port number in use by the portal.

Be sure to use front slashes (//) in the portal address. b. Click the stoplight to the right of the Portal field. c. In the portal Welcome screen, enter a User ID and Password to log in to the portal. This user must have the necessary permissions to view the Siebel system defined in the portal, and should also have either direct access to the back-end application or be mapped to a user with that access. Click OK. d. Once a connection to the portal is established, a list of systems defined in the portal system landscape appears in the System drop-down list. 4. From the System list, choose the alias of the system from which you want to retrieve Siebel business components or business services. 5. Under SAP System, do one of the following:

Click the Search tab to search for data services by name or group: In the Name field, enter a search string (the * wildcard is supported, and a right-hand wildcard is assumed) and from the For drop-down list, select the type of item (such as Name or Group) to search for. Then click Search. A list of functions that match the search parameter is displayed. Click the Browse tab to display a hierarchy of folders containing the objects and functions found in the business objects repository (BOR) of the selected system. From the For drop-down list, select the category of the item to browse for. While browsing the list, you can click any object or function, and then click More Info to get a description of the selected object or function.

SAP NetWeaver Visual Composer: User Guide

136

SAP Online Help

07.09.2004

6. Once the search is complete, import the functions to be used by the iView: Drag the functions one at a time from the list in the task panel to the iView.

When using a Siebel Update business component to build a query, note that the logic is very similar to building SQL queries. Each field input to the update business component is replicated: one field with an s. (set) prefix and the other field with a w. (where) prefix. For example, to update the phone number and account name in an account details list, you might use the following fields as input to the Update business component: s.Name, s.Phone, w.party_uid A user might enter the following data into those fields: s.Name = Ron s.Phone = 7777490 w.party_uid = 1-wbx Remember that each query must have at least one w. prefix field, used for indicating the unique identifier.

SAP NetWeaver Visual Composer: User Guide

137

SAP Online Help

07.09.2004

Defining the UI Logic


Purpose
When you define the UI logic of an iView, you select UI elements that enable you to answer questions like the following: What UI elements are presented to the user at runtime? Example: Should the iView provide a form for the user to enter search parameters and should the output of the search be displayed in a table view or a chart? These UI elements are the Interactors displayed in the Elements task panel. How should the user interact with the UI components? Example: Should the data displayed in the iView be static, with set components for starting the search, or should the user be able to enter data in order to launch a search for a specific sub-set of data? These components are the Flow Control elements in the Elements task panel. What are the underlying data queries? Example: How exactly should the information be retrieved from the back-end system, and should the data be manipulated in any way prior to display, for example with a filter or a sort operator? These elements are the Data Operators displayed in the Elements task panel. To build the UI logic of an iView, you add UI elements and operators to the iView, and specify the flow of information between the iView components.

Adding UI Components
Purpose
When defining your UI logic, you define how the data is input to the data service and in what form the output from the data service is displayed to the user.

Process Flow
You can add a UI component to the iView by dragging-out from a data service port (input or output), and then choosing the appropriate UI element from the context menu that is displayed. The connection between the two objects is automatically created. Alternatively, you can drag a UI element from the Elements task panel, and then manually define the required connection. This may be necessary if the element you want to add to your iView is not available in the context menu. Note, however, that in this case, you must also manually define the data mapping between the two elements.

See: Defining Input to the Data Service [Page 139] Defining Output from the Data Service [Page 141] Adding Operators [Page 145] Performing Data Binding Between UI Components [Page 147]

SAP NetWeaver Visual Composer: User Guide

138

SAP Online Help

07.09.2004

Defining Input to the Data Service


Use
You can define either initial input values for the fields or else add a form to the iView to enable user input. You may also implement a combination of both options, so that when the iView is retrieved, it displays data related to the initial values you defined but also allows users to enter their own input values to display different data. Available components are: Form View, Table View or Start Point. Tip: To see which input fields are required by the data service, double-click on the Input port itself. A list of fields required by the selected input port is displayed in the Fields task panel. This should help you determine which UI component is appropriate for providing input to the data service.

Procedures
To add a form for user input:
...

1. Drag out from the Input port of the data service and release the mouse button. From the context menu, choose Add Input Form. An input form is created automatically, with user input fields already created and mapped to all of the input fields of the underlying function. 2. To see which fields are mandatory, double-click the Input port of the data service. A list of required fields is displayed in the Fields task panel; the check mark in the first column indicates a mandatory field. 3. Perform data mapping: Double-click the line connecting the input form and the data service. The fields defined for this connection are displayed in the Fields task panel.

Data mapping is performed automatically if you created the form by dragging out from the data service (step 1). Data mapping is required if the form is connected manually to the data service. The table displayed in the Fields task panel contains two text columns: Field and Assign. The fields displayed in the Field column are the data service input fields. The fields in the Assign column are the UI component output fields. Each mandatory input field of the data service must be mapped to an output field from the UI component. You may also define mapping for any other input field of the data service. To map the fields, click in the Assign column next to the input field and from the dropdown menu, choose the corresponding field. Alternatively, enter a specific value in the Assign column; it can be a text string or a number, depending on the data type of the target input field.

This data mapping procedure is identical to data mapping defined between two data services. The Field column contains the fields of the data service supplying the input, and the Assign column contains the fields of the data service supplying the output.

SAP NetWeaver Visual Composer: User Guide

139

SAP Online Help

07.09.2004

To define initial input values:


Drag out from the Input port of the data source object, and...

1. Drag out from the Input port of the data service, and from the context menu, choose Start Point. 2. Double-click the line connecting the Start Point flow control and the data service. Fields transferred from the start point are displayed in list of fields in the Fields task panel. 3. In the Fields task panel list, to assign a value to a field, click in the Assign column of the field and enter a valid value for it. These values will be the default input values of the iView. To flip an output port to input:
Drag out from the Input port of the data source object, and...

Certain data services require table data as input although the input port does not reflect this. In such a case, the table appears as an output port that needs to be converted to an input port. To do so: 1. Right-click the output port to be flipped. 2. From the context menu, select Flip Port. For an example of flipping a port, see step 3 of Example 1: Customer Address iView [Page 194]

SAP NetWeaver Visual Composer: User Guide

140

SAP Online Help

07.09.2004

Defining Output from the Data Service


Use
Once you have defined the form of input to the data service, you need to define how the output from the data service should be channeled for display. You can define data flow from a single data service to a single or multiple UI components, or to another data service. Each output port can connect to one or more UI components. Available UI elements are: Form View, Table View (table) and Chart View. You may also filter the output from the data service using operators. See Adding Operators [Page 145].

Types of Output Ports


Data services may have different types of output ports, as follows: Single-value, indicated by a diamond ( ). For this type of output, the Visual Composer data service aggregates all the single-value outputs into a singleton information set, which is a table consisting of a single row that aggregates all of the outputs (see the Output port in Employee Getlist in the following diagram). Return is an SAP-specific type of single-value output which represents a function that returns a record indicating Success or Failure (see Employee Getdata in the following diagram). Multiple-value, indicated by a square ( ). In this case, a range of data is output from the data service (see Employee Getdata, Archivelink, or the other uncircled output ports, in the following figure).

Types of Data-Service Output Ports Tip: To see which data is channeled through any output port, double-click on the port itself. A list of fields returned by the selected output port is displayed in the Fields task panel. This should help you determine which UI component is appropriate for displaying the output.

Special note for JDBC-based data services Data services imported through the JDBC connector provide dynamic infosets, whose results are available at runtime only. In order to determine which fields the connected output form will contain, you should use the Test Function option (see Testing the Data Service (Optional) [Page 50]) and note the names of the fields. This enables you to map the fields you need to another data service or another output form. As appropriate, right-click the input port of the second data service or the connected output form, choose Define Fields from the context menu and click Add in the Fields task panel to add the fields.

SAP NetWeaver Visual Composer: User Guide

141

SAP Online Help

07.09.2004

Procedure
...

1. From the data service, drag out from the output port that defines the data you want to display in the UI component. 2. From the context menu, choose the UI component in which to display the data. Note that the context menu displays only the most relevant options for the specific type of output port. For example, if the output is a single record, the table view, which enables the display of multiple records, will not be shown in the context menu, although you can drag it from the Elements task panel. The context menu may also display operators. For instructions about adding operators, see Adding Operators [Page 145]. All of the output fields of the data service are automatically channeled to the input port of the connected UI component. However, by default, none of the fields are selected for display in the UI component, as shown in the Fields task panel, when you click the newly-added output view. 3. Define the data flow: Select the fields to be displayed by clicking in the left (eyeglasses) column. A check mark indicates each field selected for display in the iView. To remove the check mark (so as not to display the field), click a second time in the field. To select all fields, you can click the button below the list; to deselect all button. fields, click the Notes Your output from the data service may be defined as multiple forms, connected through data binding. For full details about defining this type of output, see Performing Data Binding Between UI Components [Page 147]. You may create a virtual field in the output of the data service so that a field in the connected output form will display a value computed according to value(s) of other fields in the output. To do so, right-click the relevant output port of the data service and choose Define Fields in the context menu. In the Fields list at the right, click Add and create the field you need, using the Expressions Editor to create the dynamic function (see Using the Expressions Editor [Page 152]).

Example
The following is an example of a basic iView that includes two data services and their connected UI components:

SAP NetWeaver Visual Composer: User Guide

142

SAP Online Help

07.09.2004

This iView enables the user to select a sales organization as input to the Customer Search BAPI. The results of the search all customers managed by that department are output from the data service and displayed as a list in the Multiple Table. The customer selected from this table serves as input to the Salesorder Getlist BAPI, which displays a list of all orders placed by that customer: Sales Orders Table.

SAP NetWeaver Visual Composer: User Guide

143

SAP Online Help

07.09.2004

Adding Fields to a View


Use
Use the Add button under the list in the Fields task panel to create a new field in an input or output view.

Procedure
...

1. In the Design workspace, right-click the UI component (view) to which you want to add a field and choose Define Fields from the context menu. 2. Click the Add button under the list of existing fields. The Add New Field dialog box is displayed. 3. In the Name field, enter an identifying name for the field. This name is permanent and cannot be changed subsequently.

The text string you enter cannot contain spaces or special characters. It must also be unique: no other fields in the same view can have that name. 4. From the Type drop-down list, choose the type of field.

Result
The new field is added to the list of fields. In the list of properties below the list, the information you entered in the Add New Field dialog box is listed, and is read-only. To change the display name of the field, change the text in the Label field in the Display set of properties.

SAP NetWeaver Visual Composer: User Guide

144

SAP Online Help

07.09.2004

Adding Operators
Use
You may add different types of data operators to your UI logic in order to manipulate the data returned from the data service before it is displayed in your iView. The available operators, displayed in the Elements task panel, are: Filter Applies a specific filter to a selected field or fields. For example, you may wish to filter a list of employee names to display only those surnames that begin with a, b, c or d. In this case, your filter could be: [a-d]*. Automatically sorts the data according to the field(s) you select. For example, you may wish to filter an international list of banks according to country, from A to Z. In this case, the list might start with all banks located in Argentina, then all banks listed in Australia, Bolivia and so on.

Sort

Be aware that users can sort table data in ascending or descending order at runtime, using the sort icons in the column headers. These icons are also shown in Preview mode (see Previewing the iView [Page 176]). Sigma (Aggregate Data) Top Bottom Distinct Outputs to a form a single record that is an aggregate value of the records. Returns a specific number of records that fall at the top of the full range of returned records. Returns a specific number of records that fall at the bottom of the full range of returned records. Omits records that contain duplicate data in the selected fields. For example, if Ben Smith, John Smith and Ralph Smith are listed in a New Customers table, and the Surname field is defined as Distinct, Ben Smith will be taken as the only record of the three.

Procedure
...

1. Drag out from the output port of the data service and from the context menu, choose the relevant operator. The context menu provides commonly used options. If the output is a single record, operators will not be displayed in the context menu at all. You will need to drag the operator from the Elements task panel. If you are adding an operator to an existing flow, and a connection between the data service and the UI component has already been defined, first right-click the connecting line, and from the context menu choose Delete. Then add the operator between them. 2. From the output port of the operator, drag out to complete the connection with the input port of the UI component. If none exists, drag out from the output port of the operator, and from the context menu, choose the UI component in which you want to display the data (for example, a table view). 3. Double-click the operator to display a list of fields in the Fields task panel, and in the Define Fields list, define the operator as follows:

SAP NetWeaver Visual Composer: User Guide

145

SAP Online Help


07.09.2004

Filter: Select the field or fields to which you want to apply the filter by clicking in the first column. Then click in the Filter column, erase the entered text and enter your own custom filter. Filter expressions are case-sensitive. Sort: Select the field or fields according to which you want to sort the data, by clicking in the first column. A number indicating the sort precedence is automatically assigned in the Sort By column; you can modify the sequence by manually overwriting the numbers.

To sort fields in a descending order, select the field and put a minus sign (hyphen) before the number.

Sigma (Aggregate Data): Select the field or fields whose values (numerical only) you want to aggregate. Click in the Sigma column of the desired field, and from the drop-down list, select the aggregate method that you require: SUM (total value of records), COUNT (number of records), MIN (lowest value), MAX (highest value), AVERAGE (average value). Top: Select the field to which the operator will be applied. Click in the Top column, and enter the number of records to be returned. Bottom: Select the field to which the operator will be applied. Click in the Bottom column, and enter the number of records to be returned. Distinct: Sselect the field or fields to which the operator will be applied. A Yes will be displayed in the Distinct column.

SAP NetWeaver Visual Composer: User Guide

146

SAP Online Help

07.09.2004

Performing Data Binding Between UI Components


Use
You may have defined UI elements in which the connection channels identical information from the output port of one UI component to the input port of another UI component. Therefore, changes to the data displayed in one UI component affect the data in the other component. For example, you may display the list of employee names in a table view that lists all the employees in a company. This view can be connected to an output form that enables the user to select certain employees from the list and display them with all of their details. The information between the two forms is therefore bound together.

Data Binding Between Two Output Views

Procedure
...

1. Once you have defined the first UI component that receives output from the data service (including the field definitions; see Defining Output from the Data Service [Page 141]), you create the next UI component by dragging out from the out port of the first UI component. 2. From the context menu, choose the second UI component in which you want to display data returned by the data service. Alternatively, from the Elements task panel, drag the UI element into the workspace, and then draw a connecting line from the out port of the first UI component to the in port of the second UI component. 3. Double-click the second UI component. The list of fields available for display appears in the task panel. 4. Select the fields you want to display.

SAP NetWeaver Visual Composer: User Guide

147

SAP Online Help

07.09.2004

Defining UI Component General Properties


Use
Each component displayed in the Design workspace has properties defined for it. They are displayed in the Properties task panel. Some of the properties relate to design time only, while others affect the behavior of the iView at runtime.

Procedure
...

1. Select the UI component whose properties you want to define and choose Model Define Properties to display the Properties task panel. 2. In the Properties task panel, you can define the following properties by modifying the entries as needed. Note that the available properties vary, depending on which element is selected. Behavior Name UI component name. This UI component property is relevant only to input forms that contain a Submit button, or table views that enable the user to select a record. In this case, the Action property value defined for the Submit button (in the Fields task panel) must be the same as the name of the line connecting the input form with the data service. Event Condition Capacity A connector property that names an event that is raised. If the Event is not given, the Name property is used instead. Connector property, currently not supported. For all ports, defines the maximum number of records displayed in the Preview workspace. By default, the capacity is unlimited. Note that the value 0 (zero) also indicates unlimited capacity. This is a design-time only property; it has no affect at run time. Reserved for future use. A read-only field indicating the port ID, used by the run-time engine. Options that let you customize the visual aspects of the forms displayed by the iView at runtime. See Customizing the View Layout and Behavior [Page 170]. Options for customizing certain aspects of the design-time environment. They have no bearing on the compiled code. See Customizing the Design Workspace [Page 187]. Options for creating text that is included in the automatically-generated project documentation. See Defining Documentation Properties for Model Components [Page 178].

Alias Role Display

Graphic Symbol

Documentation

SAP NetWeaver Visual Composer: User Guide

148

SAP Online Help

07.09.2004

Defining UI Component Field Properties


...

1. In the Layout workspace, select the UI component whose fields you want to define and choose Model Define Fields to display the Fields task panel. 2. In the top list of the Fields task panel, select the field to be modified. You can then change the property values as follows. The available Data options vary, depending on field type. Read-only. Read-only. Indicates a mandatory field. Click to toggle the selection on and off. If you designate a field as mandatory, it requires input at runtime. If the function on which your iView is based uses an automatic conversion that adds zero fill, you will need to define the zero fill for the input fields of the iView. Zero fill is automatically applied to output fields by the system that returns the data. To define zero fill: Click in the Zero Fill field to select the option. A check mark indicates that Zero Fill is selected. In the Max. Length field, define the maximum length to be filled in. Tip: To determine the required zero fill value, click the target input port of the data service (in the Design workspace), and in the Define Fields list, note the Max. Length value for that field. Min. Value Max. Value Max. Length Link URL For numeric fields, used in conjunction with Max. Value to specify a range of valid values, such as a date range. For numeric fields, used in conjunction with Min. Value to specify a range of valid values, such as a date range. Maximum field length. Must be defined if Zero Fill is defined for the field. Defined if the selected field is a link type. Click the icon at the right in the field, and in the Link URL dialog box, enter the URL you want this field to launch. This option is available only when the selected field is a button type. It defines the action launched by clicking the button.

Data Name Type Required?

Zero Fill?

Action

If the button appears on an input form, the name of the line connecting the input form with the data service must be the same as the Action value defined here. Description Provides additional information about the field. The descriptive text will appear in the model documentation, if it is produced. See Generating Model Documentation [Page 177].

SAP NetWeaver Visual Composer: User Guide

149

SAP Online Help

07.09.2004

Display Visible? Disabled? Label Tooltip Design Behavior

The Display options are available only for fields. They help define how the fields are displayed in the iView. Determines whether or not the field is hidden in the iView. The field is displayed in the iView, but is read only. The field name, which can be any string. A tool tip for the selected field. Provides various display options for the label, depending on the selected field type. Used to describe text fields that correspond to back-end component fields. These fields relate to conditional expressions. See Dynamic Expressions Editor [External]. An initial value or formula for the field, used in forms that input data to data services, or in virtual fields of other views. Example: *US* An expression showing how to calculate the value of the field, in relation to or independent of other fields. Example: @num1-@num2 Indicates if the value in the field should be checked to ensure that it is a valid input. Example: @@<Num1; 1..20 An expression that indicates the format in which the value in the field is displayed. Example: ddmmyy

Initialization

Computation

Validation Formatting

SAP NetWeaver Visual Composer: User Guide

150

SAP Online Help

07.09.2004

Dynamic Expressions Editor


Definition
The Dynamic Expressions Editor assists you in writing and validating the syntax of dynamic expressions, used in the Behavior properties of UI components (see Defining UI Component Field Properties [Page 149]).

Use
The Expressions Editor, which can be accessed by clicking the function (fx) icon that appears when you click in the field next to the property name, or by choosing Model Dynamic Expressions. A table of the fields will be displayed, with columns for each of the Behavior properties, as follows:

Click Assistant to display the Expressions Editor dialog box, which displays the available expressions for each field, and provides assistance in formulating the expression with the proper syntax. See Using the Expressions Editor [Page 152].

Structure
Expressions can only be written for fields within info sets. To relate to fields of the info set within the dynamic expression, use the following rules: @@ = current field value @FieldName = value of the field with the specified name

For a full explanation about dynamic expressions, see Overview of Dynamic Expressions [Page 152]

Integration
See Using the Expressions Editor [Page 152]

SAP NetWeaver Visual Composer: User Guide

151

SAP Online Help

07.09.2004

Overview of Dynamic Expressions


The Dynamic Expressions Editor can be used to define the following types of expressions: Initialization Initializes values of records added to an infoset. For example, this type of expression can be used in input forms or input tables so that when the user adds a record, it will already contain an initial value.

You cannot use initialization expressions for computed records, because the computed value will override the set initialized value. Computation Computes a new value for the field based on results returned in the function. For an example of defining a computation expression, see Example 3: Salesorder iView [Page 200]. Validation Validates the user input for the field. Formatting Defines the format for the value of the field, such as dd/mm/yyyy for date.

For examples of common dynamic expressions, see Frequently-Used Dynamic Expressions [Page 153].

Using the Expressions Editor


You can access the Expressions Editor by choosing Model Dynamic Expressions (or choosing the corresponding toolbar button) or by clicking the function (fx) icon in the right of a field displayed in the Fields task panel.

Procedure
...

1. In the Expressions Editor dialog box, click Assistant to display Functions panel. 2. Click in the cell of the field to be defined and browse through the Functions list to locate the function you require. Note that as you move the mouse over each function, its format and description is displayed at the bottom of the panel. 3. Click the mouse on the selected function; the function is displayed in the selected cell. 4. Revise the expression in the cell as needed, using the text box at the bottom of the dialog box. 5. Click in a different cell. Visual Composer validates the expression and indicates an invalid format by highlighting the expression in red, along with an explanation in the status area at the bottom.

You can leave the Expressions Editor dialog box open and review each model component in order to view and validate all defined expressions. For an example of using the Expressions Editor, see Example 3: Salesorder iView [Page 200]. For examples of common expressions, see Frequently-Used Dynamic Expressions [Page 153].

SAP NetWeaver Visual Composer: User Guide

152

SAP Online Help

07.09.2004

Frequently-Used Dynamic Expressions


The following tables list some of the most frequently-used functions that you may create in the Expressions Editor. Mathematical and trigonometric functions such as COS and SIN are available in the list of functions (Expression Editor Assistant) as well.

Date and Time Functions


Func- Description tion
DADD/ Increases/ TADD decreases

Syntax DADD(dt,n,uni t) TADD (t,n,unit) where unit is one of the enumerations listed in Table A (following) DSTR (dt,mask) DSTR (t,mask) where mask is one of the devised from the set of special characters listed in Table B (following)

Examples TADD(@CREATE_TIME,13,H) Adds 13 hours to the value returned. For example, 10:17:22 would be converted to 23:17:22 (default HH:NN:SS format).

a date/time value by the specified number of date units.


DSTR/ TSTR

Converts a date or time object format to a defined text string.

DSTR(@DATE_FIELD,MON DD, YYYY) Converts the date value returned to a string date format. for example, 30.05.2002 would be converted to May 30, 2002. DSTR(DADD(@CREATE_DATE,13,D),XML _DATE Using the DADD function, this expression adds 13 days to the returned date, and then converts the date format to the XML standard format. For example, 30.05.2002 would be converted to: 2002-06-12. DGET(@CREATE_DATE,M) Returns only the value of the specified time unit from within the date value. For example, 30.05.2002 would return 5, while 27.02.2004 would return 2. NOW() See example in DSUB following.

DGET TGET

Returns the numeric value of the selected part of a date or time. Returns the current date or time. Returns the difference between two dates, in the specified date unit.

DGET(dt,part) TGET(t,part) where part is one of the enumerations listed in Table C (following) NOW()

NOW/ TNOW

DSUB/ TSUB

DSUB(dt1,dt2, unit)
TSUB (t1,t2,unit)

where unit is one of the enumerations listed in Table A (following)

DSUB(NOW(),@CREATE_DATE,D) Calculates the difference in the two dates, specified here, in days. For example, values of 16.09.2004 (today) and 05.8.2004 for these two fields would return 39.

SAP NetWeaver Visual Composer: User Guide

153

SAP Online Help

07.09.2004

Func- Description tion


DVAL/ TVAL

Syntax DVAL(str,seq) TVAL(str,seq) where seq is: EUR


(DD/MM/YYY Y HH:NN:SS)

Examples DVAL(@TIME_FIELD,USA) Converts the date string returned to a standard format. for example, May 30, 2002 would be converted to the USA standard date format: 05/30/2002. .

Converts a date or time string representat ion to a standard date/time object format.

USA
(MM/DD/YYY Y HH:NN:SS)

XML (YYYYMMDDTHH:NN:S S) FREE (free format)

Conditional Functions
Function
IF

Description Checks whether a specified condition is met. If it is, returns the first specified value; otherwise, returns the second specified value.

Syntax IF(text,expr 1, expr2)

Examples IF(@NET_PRICE>1000,Expensive,Che ap) If the expression in the field is TRUE (the value is greater than 1000), the text Expensive is displayed. If the expression is FALSE (the value is less than 1000), the text Cheap is displayed. IF(@@==DE,Germany,Other) If the string DE is returned, the text displayed in the iView will be Germany. Otherwise, the text will be Other. IF(@BANK_CTRY==US,United States, IF(BANK_CTRY==GB,England,IF(@BA NK_ CTRY==IL,Israel,IF(@BANK_CTRY== DE, Germany,Other)))) A nested IF expression defining display text for country names. If the vale returned is not US, GB, IL or DE, the text displayed will be Other.

ISNUL L

Returns TRUE if a reference is to an empty, undefined or null cell,

ISNULL(value )

IF(ISNULL(@@),NO FAX NUMBER, @@) If the value of the current cell is empty, the value displayed in the iView will be NO FAX NUMBER; otherwise, the returned value will be displayed.

SAP NetWeaver Visual Composer: User Guide

154

SAP Online Help

07.09.2004

Function

Description otherwise, returns FALSE.

Syntax

Examples

Other available Conditional functions:

BOOL, NVL

Numeric Functions
Func- Description tion
NSTR

Syntax NSTR(n,mask) where mask is a formatted sequence defined according to Table B (following)

Examples NSTR(@@,B) Displays or hides zero/blank values. For example, an empty space or a value of 0 would not be displayed. NSTR(@SD_DOC,Z) Displays leading zeroes in the field value. For example, if there are 10 characters in the string, the number 1432 would be displayed as 0000001432. NSTR(@@,10.2) Rounds off a long decimal output to a two-place decimal value. For example, a value of 142.3213762 would be displayed as 142.32. NSTR(@TOTAL_PRICE,C) Adds a comma separator to values in the thousands. For example, a value of 682328 would be displayed as 682,328.

Returns a formatted string representin g the defined number.

AVG

Returns the calculated average value among a specified set of values. Returns the largest value among a specified set of values. Rounds a number upward to the nearest integer or

AVG(n2,n2)

AVG(@EARNINGS_Q1,@EARNINGS_Q2,@EARN INGS_Q3) Displays a value that is the calculated average of the three values returned in these cells.

Related or similar function: SUM MAX(n1,n2) MAX(EARNINGS_Q1,@EARNINGS_Q2) Displays the larger of the values of the two cells.

MAX

Related or similar function: MIN CEIL(n,facto r) where factor is the basis for rounding off the CEIL(@@,0.01) Returns a number rounded off to the next highest multiple of 0.01. For example, 6.2468 would be rounded off to 6.25.

CEIL

SAP NetWeaver Visual Composer: User Guide

155

SAP Online Help

07.09.2004

Func- Description tion multiple of a defined factor

Syntax number

Examples

Related or similar function: FLOOR MAX, FLOAT, HEX, LIMIT and others

Other available Numeric functions:

String Functions
Function
UPPER/ LOWER

Description Converts the returned string to upper case or lower case, respectively. Converts the first word in the string to a capitalized word. the string to capitalized words (separated by underscores or white spaces.

Syntax UPPER(text) LOWER(text)

Examples UPPER(@@) Displays the string in all capital letters; for example: ATLAS. LOWER(@COUNTRY_NAME) Displays the string in all lower-case letters; for example: usa.

CAPITAL

CAPITAL(text)

CAPITAL(@COMP_NAME) Displays the string with the first word capitalized; for example: Atlas city.

CAPITALW Converts

CAPITALW(text)

CAPITALW(@COMP_NAME) Displays each word in the string as a capitalized name; for example: Atlas City.

RIGHT/ LEFT

Returns a substring of a specified number of


characters,

RIGHT(text,len) LEFT(text,len)

starting from the end of the string (RIGHT) or beginning of the string (LEFT)
MID

RIGHT(@SHORT_TEXT,4) Displays the last four characters of the string. For example, a value of FINALCOST would be displayed as COST. LEFT(@@,3) Displays the first three characters of the returned string. For example, DOCUMENTATION would be displayed as DOC.

Returns a string starting from a specified number of characters from the

MID(text,start,len)

MID(@SHORT_TEXT,5,3) Displays a substring consisting of the fifth, sixth and seventh character of the string. For example, DOCUMENTATION would be

SAP NetWeaver Visual Composer: User Guide

156

SAP Online Help

07.09.2004

Function

Description beginning of the string and containing the next specified number of characters. Removes the white space from both ends of the string. LTRIM removes the white space only from the left.

Syntax

Examples displayed as MEN.

Related or similar function: AT

TRIM

TRIM(text)

TRIM(@YEAR_TO_END) Removes the white space in the returned value. For example, the value ANNUAL TURNOVER would be displayed as ANNUAL TURNOVER (without the spaces at the beginning and the end). Related or similar functions: COMPACT, LTRIM, RTRIM

FILL

Fills a string of a given length with the specified (pad) characters.

FILL(len,pad) where pad is the character

or characters for filling

FILL(8,*) Returns a string of eight characters, using * to represent all empty characters in the string. For example, HOME would be displayed as HOME**** Similar or related functions: RPAD, LPAD, ZPAD

+(Concatenate)

Connects two returned values (number or text) in order to produce a single, continuous text value. NOTE that only two arguments can be concatenated.

(string)+(string)

(@CITY_NAME)+(STATE_NAME) Displays the returned values of the two fields as a single value. For example, if the values DAYTON and OHIO are returned for the two fields, the value DAYTON OHIO would be displayed. To concatenate two numbers, use the DSTR function, as in this example: NSTR(@FIRST) + NSTR (@SECOND). In this example, returned values of 2 and 4 would result in a value of 24 being displayed. LEN, LIKE, PREF and others

Other available String functions:

SAP NetWeaver Visual Composer: User Guide

157

SAP Online Help

07.09.2004

Operators
Type Mathematical operators Function + * / AND && OR NOT ! < <= > >= == != <> % Addition Subtraction Multiplication Division Logical AND Logical AND Logical OR Logical OR Logical NOT Logical NOT Less than Less than or equal to Greater than Greater than or equal to Equal to Not equal to Not equal to Modulus arithmetic Negation

Logical operators

Other operators

Table A: DATE_UNITS An enumeration of date/time units used for date/time arithmetic operations Code Z S N H D M Q Y C Date/Time Unit Milliseconds Seconds Minutes Hours Days Months Quarters Years Centuries Milliseconds 1ms 1,000 ms 60,000 ms 3,600,000 ms 86,400,000 ms 2,592,000,000 ms 7,776,000,000 ms 31,536,000,000 ms 3,153,600,.000,000 ms

SAP NetWeaver Visual Composer: User Guide

158

SAP Online Help

07.09.2004

Table B: Date/Time Mask The date/time formatting mask uses the following syntax: [date-part embedded-chars]*

special-format

Mask date-part embedded-chars special-format

Description Listed in Table B following Character codes other than those listed in the Table B Listed in Table D following

To insert codes that are reserved as date-part codes, you can use HTML espace sequences (for example, you might use &#68; for D).

Table C: DATE_PARTS An enumeration of date/time parts used for date/time formatting operations Code D DD DAY M MM MON Y YY YYYY MS SS NN H HH H12 HH12 AM|PM Date/Time Part Days as 1-31 Days as 01-31 Days as Sun-Sat Months as 1-12 Months as 01-12 Months as Jan-Dec Years as 0-99 Years as 00-99 Years as 1900-9999 Milliseconds as 000-999 Seconds as 00-59 Minutes as 00-59 Hours as 0-23 Hours as 00-23 Hours as 0-12 Hours as 00-12 Meridian indicator

Any character codes other than the date-part codes listed in this table are embedded as is. To insert codes reserved as date-part codes, you can use HTML espace sequences (for example, you might use &#68; for D).

SAP NetWeaver Visual Composer: User Guide

159

SAP Online Help Table D: DATE_FORMATS An enumeration of special date/time formatting values Code DATE SHORT_DATE LONG_DATE XML_DATE LOCALE_DATE TIME SHORT_TIME LONG_TIME XML_TIME LOCALE_TIME DATETIME SHORT_DATETIME LONG_DATETIME XML_DATETIME LOCALE_DATETIME Format DD/MM/YYYY D/M/Y Long date format YYYY-MM-DD Locale date format HH:NN:SS H:NN Long time format THH:NN:SS Locale time format DD/MM/YYYY HH:NN:SS D/M/Y H:NN Long date/time format YYYY-MM-DDTHH:NN:SS Locale date/time format Sample Result 31/01/2001 31/1/1 Wed Jan 31 2001 2001-01-31 Jan 31, 2001 02:39:40 2:39 02:39:40 UTC+0200 02:39:40 2:39:40 31/01/2001 02:39:40 31/1/1 2:39

07.09.2004

Wed Jan 31 2001 02:39:40 UTC+0200 2001-01-31T02:39:40 2:39:40, Jan 31, 2001

Any arbitrary date/time formats can be defined using sequences of DATE_PARTS, listed in Table C.

SAP NetWeaver Visual Composer: User Guide

160

SAP Online Help

07.09.2004

Defining a Chart
Use
You may wish to display the output of a data service in chart format. This will enable the user to compare the results of similar views in graphical form. For example, you may wish to display a column chart that illustrates the sales made to a number of customers, per quarter. Or you may wish to display a pie chart of the number of employees per department of a single company.

Procedure
...

1. Drag the Chart icon into the Design workspace and connect to the model at the appropriate location, defining either a data flow from a data service, or data binding between the chart and another connected output UI component (as in the example in Performing Data Binding Between UI Components [Page 147]). 2. Select the chart and choose Model Design the Views. 3. In the Designer task panel, click the Container tab and select the type of chart you want, along with the general design characteristics (see Customizing the View Layout and Behavior [Page 170]). 4. Choose Model Define Fields. For each field to be displayed in the chart, click in the Series field and indicate if the field is to be depicted on the X-axis or as a Series. For example, in a column chart of sales to customers, the X-axis would be Customer Name, Series1 would be Q1 Sales, Series2 would be Q2 Sales and so on. In a pie chart of employees per company, the Series might be Number of Employees, and the X-axis (category label) would be Company Name.

When checking the chart in the Preview workspace, be aware that chart data is not displayed, although the chart will fully operate in the actual runtime iView.

SAP NetWeaver Visual Composer: User Guide

161

SAP Online Help

07.09.2004

Defining an HTML View


Use
You may want to create an iView that calls a URL. The HTML view can be a stand-alone element or part of any iView, requiring no connections to other elements in the same iView. Alternatively, the HTML view can be mapped to receive a URL input from a data service. This can be useful with "search" URLs, such as Google or an international phone book.

Procedures
To define a standalone HTML view:
...

1. In the Design workspace, double-click the iView icon to open it. 2. Choose Model Add Elements. 3. From the Elements task panel, drag the HTML View icon to the workspace. 4. Select the HTML View icon and choose Model Define Properties. 5. In the URL address field in the Display list of properties, select the text and overwrite it with the required URL.

To map the output of a data service to an HTML view, via a table view:
... ...

1. In the Design workspace, double-click the iView icon to open it. 2. Choose Model Add Elements. 3. Create the input side of the iView, with a data service and its input form. 4. Create a table view as output from the data service. 5. From the Elements task panel, drag the HTML View icon to the workspace. 6. Connect the appropriate output port of the table to the in port of the HTML view. 7. Right-click the output port of the table and choose Define Fields from the context menu. 8. Add a field to the table (see Defining UI Component Field Properties [Page 149]) and name it appropriately. 9. In the Fields task panel, select the new field and open the Expressions Editor (see Using the Expressions Editor [Page 152]). In the Computation column of the row of the new field, enter the URL, entering the name of the field whose value will be used as part of the URL.

You have an iView that provides information about a company called FlyingHigh Corporation, which has two main offices: one in the United States and one in Asia Pacific. Each of these offices maintains its own web site. In the iView, you have a data service that outputs the details about the FlyingHigh offices. One of the fields of the output table is Office_Cntry. You have added another field, URL, to the table. You want to display the URL of the office that the user selects in the table. You would therefore enter the following formula into the Computation cell of the URL field: IF(@Office_Cntry=US,www.flyinghigh_us.com, www.flyinghigh_ap.com).

SAP NetWeaver Visual Composer: User Guide

162

SAP Online Help

07.09.2004

The result will be that at runtime, when the user selects one of the main FlyingHigh offices from the table, the appropriate URL will be displayed to provide in-depth information about that office. 10. Map the new field to the HTML view url field: a. Select the connecting line between the two views. b. In the Assign column of the url row, enter the corresponding table field name.

SAP NetWeaver Visual Composer: User Guide

163

SAP Online Help

07.09.2004

Defining Eventing Between iViews


Use
You can create two iViews that communicate with each other on the same page, using clientside eventing, so that the output of the first iView serves as the input to the second. Eventing in the portal is based on the use the Enterprise Portal Client Manager (EPCM), an object defined by the portal client framework to handle functions such as client eventing.

Procedures
To define eventing between two iViews created in Visual Composer.
...

1. When you have completed defining the components of the iView that will serve as the first iView, drag out from the out port of the table or form that receives the output from the data service. From the context menu, choose Output Port and give it an appropriate name. 2. Now navigate back to the second iView, or create a new one (see the initial sections of Building an iView [Page 46]), adding your data service and other required UI components. 3. Drag out from the input port of the data service and from the context menu, choose Input Port and rename the port to the same name used for the output port in step 1. 4. Click the new input port and choose Model Define Fields. 5. In the Fields task panel, select the same fields that you selected for the output port of the first iView. 6. Still in the second iView, click the connecting line between the input port and the data service and assign a consistent name to each field in order to match between input and output.

When both iViews are defined in Visual Composer, a default EPCM value com.sap.visualcomposer:epcm is assigned automatically. This can be seen by right-clicking the port, choosing Define Properties from the context menu, and checking the EPCM event field in the Behavior set of properties.

To define eventing between an iView created and existing in the portal, and an iView created in Visual Composer:
... ...

1. Check the properties of the existing portal iView and find out its event name and Uniform Resource Name (URN). 2. In Storyboard, open the iView that is to be the second part of the eventing scenario and create the required port: as input or as output. 3. Right-click the newly-created port and choose Define Properties from the context menu. 4. In the Behavior set of properties in the Properties list, enter the portal event name in the Name field and in the EPCM event field, enter the URN of the portal iView (which you found in step 1).

SAP NetWeaver Visual Composer: User Guide

164

SAP Online Help

07.09.2004

Result
At run-time, client-side eventing can be achieved through the use of the identically-defined ports.

Example
A page contains two iViews for eventing. The first iView may be used by the Sales department to track customer orders. This information is needed by the Procurement department to order material for production, so that this list of materials is displayed in a different iView whose input comes from the Sales department iView. We can use the iView described in Defining Output from the Data Service [Page 141]:

This iView enables the user to select a sales organization as input to the Customer Search BAPI, which displays a list of all customers managed by that department. The customer selected from the list (Multiple Table) serves as input to the Salesorder Getlist BAPI, which displays a list of all orders placed by that customer. The selected order is held in the output Port, which serves as input to the second iView:

SAP NetWeaver Visual Composer: User Guide

165

SAP Online Help

07.09.2004

In the Material iView, procurement personnel can input the specific customer order output from the Salesorder iView and use that as input to the Material Get Detail BAPI. The results are a list of all materials that must be ordered for completing that customer order. At run-time, the two views will be able to communicate through client-side eventing based on the definition of identical properties for the output/input ports.

Tracing Dependencies
Use
To review the overall UI logic in your iView, Visual Composer provides a tool for tracing dependencies in your diagram. It shows which elements are dependent on other elements. This option is useful with complex models, in which the data flow from various forms and start points to a data service, or from the data service to the output UI components, is not immediately clear.

Procedure
...

1. Choose Model Define Fields. 2. From the Options menu in the Fields task panel, choose Trace Dependencies. 3. In the Design workspace, choose a data service or UI component. Everything on which the selected element depends is marked in pink, while everything depending on the selected component is marked in blue.

SAP NetWeaver Visual Composer: User Guide

166

SAP Online Help

07.09.2004

Validating the iView Logic


Use
You may wish to have Visual Composer analyze your model to ensure that the overall logic of the model is sound and that the information flows through the model without any problems.

Procedure
Choo...

1. Choose Build Validate Logic. 2. Visual Composer will analyze the logic of the model. If an error exists in the model such as a form that is not connected properly to a data service a Warning dialog box appears. Click More Info to display the code behind the model. 3. Make your corrections to the model and rerun Validate Logic as needed, until you receive the message Validation Completed Successfully.
...

Customizing the iView UI


Purpose
When you build the iView logic, a default iView layout is automatically created. Visual Composer provides tools for customizing all the visual aspects of the iView. For example, you can modify the iView title, arrange the layout of UI components displayed in the iView, and customize the buttons, labels, and other controls displayed in the UI components.

Process Flow
Most of the iView customization is carried out in the Layout workspace, in conjunction with the Designer task panel, which you access by choosing Model Design the Views.

Changes that you make in the Layout workspace are implemented throughout the model so that when you view the model components in the Design or Preview workspaces, you will see the results as well. We call the various forms, charts and tables defined in the iView views and the parts of the view fields, buttons and columns controls.

See:

Selecting Objects in the Layout Workspace [Page 168] Defining iView Display Properties [Page 169] Customizing the View Layout and Behavior [Page 170] Customizing the Position and Size of iView Components [Page 174] Customizing the Controls Displayed in a View [Page 172]

SAP NetWeaver Visual Composer: User Guide

167

SAP Online Help

07.09.2004

Selecting Objects in the Layout Workspace


Use
When customizing the iView layout, you define parameters for selected views and their controls. For example, to modify the placement of a button in an input form, you simply drag the button to its location as needed. You can select more than one view in order to manipulate them together. For example, to left-align two views in an iView, you first select them, and then choose the Align Left button in the Layout toolbox below the workspace. Similarly, if you want to left-align fields within a view, you select the fields, and then choose the Align Left button.

Activities
Select a view or a control by clicking it. Select additional views or controls by Ctrl + clicking each addition, one at a time.

To select a view itself and not the controls within the view be sure to click in the title bar of the view; otherwise, you may select a single control rather than the entire view. You can either select multiple views, or multiple controls in a single view, but you cannot select both views and controls at one time. To select all the controls in a view, click one of the controls, and then press Ctrl + A. Alternatively, right-click a control, and from the context menu, choose Select All Fields. To select all the views in the iView, make sure that no view or control is selected, and then press Ctrl + A. Alternatively, right-click anywhere in the workspace background and from the context menu, choose Select All Containers. Note that each selected object (view or control) is bordered with a dashed line, and that when multiple objects are selected, one of them (normally the first or last selected) displays the dashed border plus handles (square boxes). When you apply options such as Align Left, the selection displaying the handles is used as the point of reference. For example, if you select three views, and then choose Align Left, the left edge of the three views will be aligned with the left edge of the view displaying the handles. The Options menu in the Designer task panel contains the Multiple Selection Mode option. When this option is selected, actions such as Send to Back apply to all the selected objects, and not only to the one that displays the handles. To shift the focus to a different view or control when multiple views or controls are selected, click the selected view or control that should display the handles. To deselect objects, click the space outside any view.

SAP NetWeaver Visual Composer: User Guide

168

SAP Online Help

07.09.2004

Defining iView Display Properties


Use
The Properties task panel provides options for customizing the visual aspects of the iView at runtime. You usually define iView properties in the Design workspace.

Procedure
1. In the Design workspace, navigate to the page with the iView whose display properties you want to define and select the iView. 2. Choose Model Define Properties. The Properties tools are displayed in the Properties task panel. 3. You may define or modify the following properties in the Display section the list. iView Caption Determines whether or not the iView displays a title, and if it does, whether the title bar also displays the standard portal iView icons, such as Refresh and Expand. Click in the iView Caption field, and choose an option from the context menu accessed from the down arrow at the right. The selected option is automatically applied in the Layout workspace. iView Width Defines the width of the iView. Click in the iView Width field and choose an option from the context menu. The available options are the same as the standard portal iView width options, enabling you to design an iView that conforms to the portal iView Narrow, Half-Wide, Wide, Super-Wide and Custom options. The iView Width setting is relevant to Visual Composer design time only, and is not contained in the compiled iView.

SAP NetWeaver Visual Composer: User Guide

169

SAP Online Help

07.09.2004

Customizing the View Layout and Behavior


Use
Each view in the iView (for example, form view or table view) has its own container. You can apply a distinct container style to each. You can determine whether or not the view displays a title bar, and add title text to it as well. Additionally, you can specify the view behavior, for example, whether a view displays scroll bars and/or navigation icons, or radio buttons enabling selection of a row in a table view.

All of the properties defined graphically using the Designer task panel can also be defined in the Display set of properties in the Define Properties list. You display this list by choosing Model Define Properties (or clicking the Define Properties button in the task panel toolbar).

Procedure
...

1. In the Layout workspace, choose Model Design the Views. 2. Select the view you want to customize and then click the Container tab in the Designer task panel. The layout options displayed in the task panel are as follows: Container Style Defines the design and layout of the selected view. Click a Container Style option, and the selected style is automatically applied to the selected view. Grid Rows Available when a table view is selected. Defines the look of the rows of the table. Chart Type Available when a Chart view is selected. Defines the type and sub-type of the displayed chart. Titlebar Toolbar Determines whether or not the view displays a title bar. If selected, use the Title field to enter the title text. Determines whether or not the view displays a toolbar. To add toolbar buttons, in the Layout workspace, double-click the toolbar (or right-click and choose Customize Toolbar from the context menu) to display the Customize Toolbar/Menubar dialog box. Then, define the toolbar controls. Scrollbars Editable Determines whether or not the view displays vertical scroll bars, when needed. Determines whether the all the fields of the view are editable or read only. Note, however, that specific field definitions overwrite the view definition. For example, although the view is defined as editable, if a field it contains is defined as disabled, the field remains disabled. Selectable Available when a table view is selected. It determines whether or not radio buttons are displayed beside each row in the table, enabling a user to select a row at runtime. Determines whether or not the view displays standard navigation buttons, for example: Next, Previous, First or Last.

Navigable

SAP NetWeaver Visual Composer: User Guide

170

SAP Online Help

07.09.2004

Title Records URL Legend Position

Defines the text displayed in the title bar of the selected view. Available when a table view is selected. It determines the number of rows displayed in the table at one time. Available when an HTML view is selected. It defines what is retrieved and displayed in the HTML view. Available when a Chart view is selected. Determines the position of the chart legend. Click in the field to select an option from the context menu. North, South, East and West correspond to top, bottom, right and left respectively. Available when a Chart view is selected. Click in the field to select a color scheme from the context menu.

Color Scheme

SAP NetWeaver Visual Composer: User Guide

171

SAP Online Help

07.09.2004

Customizing the Controls Displayed in a View


Use
You can customize the fields displayed in the Design workspace by using the tools in the Layout workspace. Using the Controls tab in the Design toolbar, you can: Select the fields to display in each view Assign labels to fields Add UI controls to the views, such as radio buttons or links to other iViews Add an image and/or a link to another address (including an Internet site, an email address, an FTP site or a range of addresses)

Note that changes you make in the Layout workspace also affect the diagram in the Design workspace.

Procedure
...

1. In the Layout workspace, select the view (form) to be modified. 2. Choose Model Design the Views. 3. In the Designer task panel, click the Controls tab. A list of controls associated with the selected view is displayed in the Visible Controls list. The controls already defined for display in the selected view are checked. The Options menu at the top right of the Designer task panel provides the following options for filtering the list of controls displayed in the Controls tab: List Data Fields Displays controls based on functions in the underlying data service. These controls come directly from the underlying R/3 application. Displays computed or virtual fields; for example: a user input field in an input form that is mapped to a data field. Displays controls such as buttons and labels.

List Computed Fields List Static Controls

4. You can modify the Visible Controls list as follows:


To show/hide a control in the view, select/deselect the check box. To add a control that does not appear in the list, scroll down the list, if necessary, and click Add. From the context menu, select the type of control that you need. In the Label field towards the bottom of the task panel, enter a name for the control. To remove a control from the list, select it in the Layout workspace, and click Remove. Note that you cannot remove controls that exist in the function, but only controls that you created manually using the Add button.

5. Customize the design of any control in the list by selecting it, and then defining the following design parameters in the list at the bottom of the Designer task panel.

Most, but not all, of these parameters can also be defined in the Fields task panel (choose Model Define Fields) (see Defining UI Component Field Properties [Page 149]).

SAP NetWeaver Visual Composer: User Guide

172

SAP Online Help

09.09.2004

Label

Defines the label of a field or column. You can modify the label by entering any string in the Label field. Alternatively, you can right-click the control itself and choose Rename from the context menu. Available when a button is selected. It defines the action launched by clicking the button. Important Note: If the button appears on an input form, be sure that the name of the line connecting the input form with its data service is the same as the Action value defined here. You can check this by clicking the line in the Design workspace and choosing Model Define Properties. The line name appears in the Name field of the Properties task panel.

Action

Image

Available when an image has been selected in a form. Click on the Browse icon () at the right of the field to display the Image Selector dialog box to locate the image you want to display. Available when a form with a link has been selected. Click the icon at the right of the field, and in the Link URL dialog box that appears, enter the type of link and the URL you want this link to launch. Defines a tool tip for the selected control. Indicates that the field is displayed in the iView, but is inactive. Indicates a mandatory field, meaning that it requires input at runtime. Available when button, image, label or link is selected. Select this option if the control text is longer than the width of the control. The text will then wrap around inside the control, and the control height will automatically be adjusted to accommodate the text. If Wrapping is not selected and the text is longer than the width of the control, it will be cut off.

Link URL

Tooltip Disabled Required Wrapping

Zero Fill

Available when a field is selected. See Defining UI Component Field Properties [Page 149] for details on defining zero fill.

Tip: To make a column in a table read only, select it in the table and at the bottom of the Controls panel, select the Read Only checkbox.

SAP NetWeaver Visual Composer: User Guide

173

SAP Online Help

07.09.2004

Customizing the Position and Size of iView Components


Use
Visual Composer lets you define the absolute position and size of views and controls displayed by the iView. It also provides options that let you easily align, space and layer views. Many of these options are applied by clicking buttons in the Layout toolbox located, by default, below the Layout workspace. Its location can be changed by right-clicking the toolbox and selecting a docking position from the context menu. Note the three icons at the bottom of the Designer task panel. They indicate the absolute position and size of the selected object, and the layer within the view to which it is assigned. When multiple objects are selected, these indicators relate to them as a single object.

Procedure
...

1. Select one or more objects in the Layout workspace. 2. Apply any of the following actions to your selection, as relevant: Action Reposition selected objects Resize selected objects Button Description Manually move the selected object or objects by dragging the selection with the mouse. Drag a handle to resize your selection. Note that when multiple objects are selected, although only one object displays handles, dragging the handles affects all the selected objects equally. In the toolbox, click any of the following align options: Align Left, Align Center (horizontal alignment), Align Right, Align Top, Align Middle (vertical alignment), Align Bottom. (Tool tips provide the name of each button.) Selected objects are aligned according to the object displaying the handles. Make same width Make same height In the toolbox, click the Make Same Width or Make Same Height button to adjust the object(s) according to that displaying the handles. The distribute options are meaningful only when three or more objects are selected. In the toolbox, click the Distribute Horizontal Spacing or Distribute Vertical Spacing button to evenly space the selected objects

Align selected objects

Distribute spacing

SAP NetWeaver Visual Composer: User Guide

174

SAP Online Help

09.09.2004

Customizing the Position and Size of iView Components


Use
Visual Composer lets you define the absolute position and size of views and controls displayed by the iView. It also provides options that let you easily align, space and layer views. Many of these options are applied by clicking buttons in the Layout toolbox located, by default, below the Layout workspace. Its location can be changed by right-clicking the toolbox and selecting a docking position from the context menu. Note the three icons at the bottom of the Designer task panel. They indicate the absolute position and size of the selected object, and the layer within the view to which it is assigned. When multiple objects are selected, these indicators relate to them as a single object.

Procedure
...

1. Select one or more objects in the Layout workspace. 2. Apply any of the following actions to your selection, as relevant: Action Reposition selected objects Resize selected objects Button Description Manually move the selected object or objects by dragging the selection with the mouse. Drag a handle to resize your selection. Note that when multiple objects are selected, although only one object displays handles, dragging the handles affects all the selected objects equally. In the toolbox, click any of the following align options: Align Left, Align Center (horizontal alignment), Align Right, Align Top, Align Middle (vertical alignment), Align Bottom. (Tool tips provide the name of each button.) Selected objects are aligned according to the object displaying the handles. Make same width Make same height In the toolbox, click the Make Same Width or Make Same Height button to adjust the object(s) according to that displaying the handles. The distribute options are meaningful only when three or more objects are selected.In the toolbox, click the Distribute Horizontal Spacing or Distribute Vertical Spacing button to evenly space the selected objects horizontally or vertically.

Align selected objects

Distribute spacing

SAP NetWeaver Visual Composer: User Guide

174

SAP Online Help

09.09.2004

Bring to front

In the toolbox, click the Bring to Front button, or right-click the object and choose Bring to Front from the context menu. The selection is moved to the top layer of the layout. Note that the icon at the bottom of the Designer task panel indicates the layer (number) to which the selected object is assigned. In the toolbox, click the Send to Back button, or right-click the object and choose Send to Back from the context menu. The selection is moved to the bottom layer of the layout. Note that the icon at the bottom of the Designer task panel indicates the layer (number) to which the selected object is assigned. Applies to views only. If multiple views are selected, the option applies only to the view displaying the handles. In the toolbox, click the Resize to Fit Contents button, or right-click the object and choose Resize to Fit Contents from the context menu. The view is resized so that its contents fit properly within the view, without unneeded space.

Send to back

Resize to fit contents

Resize to fit window

Applies to views only. If multiple views are selected, the option applies only to the view displaying the handles. In the toolbox, click the Resize to Fit Window button or right-click the object and choose Resize to Fit Window from the context menu. The width of the view is adjusted to match the width of the iView.

Arrange layout

This option is not yet implemented.

Show table

Click this toolbox button to display a background grid in the Layout workspace. Click the magnifying glass buttons to zoom in and zoom out of the Layout incrementally. Note that you can also use the Fit, 1:1 and zoom value field at the top right of the workspace to define your exact zoom view.

Zoom in Zoom out

SAP NetWeaver Visual Composer: User Guide

175

SAP Online Help

07.09.2004

Generating Model Documentation


Purpose
Visual Composer lets you automatically generate model documentation in HTML format, for use as a design-time tool. The document is associated with the Visual Composer project, and is not included in the compiled portal content package. Some of the documentation information is drawn from documentation properties that can be defined for the individual model components. See Defining Documentation Properties for Model Components [Page 178].

Automatically Generating Model Documentation


...

1. Choose Tools Documentation. The Documentation Wizard appears. 2. In the Print Range field, choose the model or module whose documentation should be generated. 3. Choose which of the following options to implement (any or all): Include diagrams Diagrams displayed in the Design workspace, and which will be included in the documentation according to their position in the model hierarchy. Properties and Definitions of the main components of the model. Properties displays properties of the model component (for example, the component name, author, last modified date, user-defined hyperlink and user defined notes). Definitions displays a table listing the elements belonging to the model component, and properties of those elements. If the component has no lower-level elements, the table does not appear. Include statistics A section at the end of the document that provides the following model statistics: Total Diagrams, Total Definitions, Total Property Values, Average Definitions per Diagram, Average Properties per Definition. Adds an index to the document.

Include definitions

Include index

If none of these options are selected, the base documentation created includes a heading per model, module, page, and iView node in the model hierarchy, a table of contents, and a description under each heading. (You write the object descriptions in the Properties task panel, in the Description field of the Documentation list.) 4. Click Generate. The document is displayed in a new browser window.

To save a permanent copy of the document, choose File Save As in the new browser window. To print the document, choose File Print in the new browser window.

SAP NetWeaver Visual Composer: User Guide

177

SAP Online Help

07.09.2004

Defining Documentation Properties for Model Components


Use
The documentation properties are included in the automatically-generated project documentation. Some of these properties are editable, and some are not. The editable properties let you add hyperlinks, descriptions and notes for the various model components in the project documentation.

Procedure
...

1. Navigate to the model component for which you want to define documentation properties, and select it in the Design workspace. For information about navigating the model, see Navigating the Model [Page 34]. 2. Choose Model Define Properties. The Properties tools are displayed in the Properties task panel. 3. In the Documentation section of the list, you can define the following properties: Description A description of the selected model element, which is automatically included in the documentation. To create or modify a description, click in the Description field, click the pencil icon, and in the Description dialog box that appears, enter or modify the text and click OK. Note that the Description dialog box also provides some text formatting options. Hyperlink Lets you add to the documentation a link to any URL. To define a hyperlink, click in the Hyperlink field, click the magnifying glass icon, and in the Hyperlink dialog box that appears, enter a URL and click OK. Note that the Hyperlink dialog box also provides a Browse button, enabling you to browse the Internet, and then copy the URL. Notes User-defined notes for the selected model component. To create or modify a note, click in the Notes field, click the pencil icon, and in the Notes dialog box that appears, enter or modify the note text and click OK. Author The model author. This field value is automatically generated, and cannot be edited. The Author property is not available for UI components included in the iView. The date and time that the model element was last modified. This field value is automatically generated, and cannot be edited. The Modified on property is not available for UI components included in the iView. The function of the selected iView UI component, such as Form View, Table View, Filter, Data Mapping (DAT_MAP), Data Flow (DT_FLOW) or Data Binding (DT_BIND). This field value is automatically generated, and cannot be edited. The Protocol value is only available for UI components in the iView. GKB ID The unique ID of the model component in the Visual Composer database. This field value is automatically generated, and cannot be edited.

Modified on

Protocol

SAP NetWeaver Visual Composer: User Guide

178

SAP Online Help

07.09.2004

Other than Description, these properties can also be listed in the documentation generated through the Documentation Wizard. If you select the Include definitions checkbox in the first screen of the wizard, the properties are listed in the Properties list of the Definitions table.

SAP NetWeaver Visual Composer: User Guide

179

SAP Online Help

07.09.2004

Deploying the Model


Use
When you build a model, Generic Modeling Language (GML) code is automatically generated. To deploy your application to a portal, the GML code must be compiled into a language supported by the portal. The Visual Composer compiler lets you generate a portal business package to assist you in checking your model for errors, and deploys the compiled content directly to the portal.

In order to prevent upload (and deployment) of content created by Visual Composer to a portal production server, the portal administrator should perform the following procedure:
...

1. Open the com.sap.portal.guimachine.portalconnector.par file found in the PORTAL-INF folder. 2. Change the value of the allowOnProduction parameter to False (default is True). This parameter is found in the following part of the file: . . . <command name="parupload" type="Command-Handler" handler="com.sap.portal.guimachine.portalconnector.CommandHandle r"> <param name="allowOnProduction" value="true"/> </command> . . .

Procedure
...

1. Choose Build Deployer to display the Deployer task panel. 2. If you are not already connected to a portal, connect to one now. 3. In the Design workspace, indicate the part of the model that is to be deployed to the portal:

If you select nothing, Visual Composer will deploy every component in the model from the current level (module, page or iView) on down through the model. If you select a page or an iView, only that component will be deployed. If there is another model of the same name, this option causes the original target folder to be deleted before deployment, in order to create the new folder of the same name. Note that this overwrite can result in the loss of other content existing on the portal, which should be saved. If selected, the Java source code generated when the model is compiled will also be included in the PAR file.

4. Select one of the following compiler options: Delete entire existing model first

Include source in PAR files

5. To check the actual code, you can click Check. A list of generated files will be displayed in the Package Viewer window. Click any file in the Package Files list at the right to view the compiled code. When done, click Close.

SAP NetWeaver Visual Composer: User Guide

180

SAP Online Help

07.09.2004

6. If you have made any changes to the model, display it in the Layout workspace, in order to enable Visual Composer to verify the layout of the iView components. 7. Click Deploy.

Result
Visual Composer compiles the model and creates a portal business package in the location defined in the Visual Composer portal installation (or modified by selecting Tools Options Portal). The model is deployed to the portal you are currently connected to, and the deployed iViews are automatically added to the Visual Composer iViews channel. Deployed pages are automatically displayed in the portal Page List. In the Deployer task panel, the name of the newly-deployed package is displayed in the Created Components block at the bottom. To launch the iView to see how it is displayed in the portal, double-click its name.

If you have deployed a model and viewed it in the portal, you may wish to return and make changes before deploying again. You may use the Clear button to remove the text in the Created Components block before deploying again.

SAP NetWeaver Visual Composer: User Guide

181

SAP Online Help

07.09.2004

Debugging the Model


Purpose
If needed, once you have deployed the model, you can debug it using the Build Debug the Model option. The Debugger checks the iView and identifies flaws in the logic, if any exist.

Process Flow
After accessing the debugger function, you can check the resulting log to view the portal server actions that were carried out. Subsequently, you can use the Events Monitor and the Data Inspector to fully debug the model. Once the bugs have been corrected, you deploy the model once again. For more information about the elements of this process, see: Accessing the Debugger [Page 182] Viewing a Log of Portal Server Actions [Page 183] Using the Events Monitor [Page 183] Using the Data Inspector [Page 185]

Accessing the Debugger


Procedure
...

1. In the Preview workspace, choose Build Debug Model to display the Debugger task panel. 2. If you are not already connected to a back-end system, connect to one now. Then select the relevant System.

Result
In the workspace, the iView is displayed as it will be displayed in the portal at runtime. You can initiate user actions as you would in the run-time iView and view the results displayed. Use the Events Monitor (see Using the Events Monitor [Page 183]) and the Data Inspector (see Using the Data Inspector [Page 185]) to debug your model.

SAP NetWeaver Visual Composer: User Guide

182

SAP Online Help

07.09.2004

Viewing a Log of Portal Server Actions


Use
A status bar at the bottom of the preview pane displays a log of portal server actions. If the status bar is not displayed, drag it open with your mouse, as follows:

SAP NetWeaver Visual Composer: User Guide

183

SAP Online Help

07.09.2004

Using the Events Monitor


Use
The Events Monitor lets you run a selected event, one step at a time.

Procedure
...

1. In the Debugger task panel, turn the Events Monitor On. 2. From the Choose event drop-down list, choose an event to monitor. 3. Click Run to run the entire event or click Step to run the event one step at a time (clicking Step for each subsequent part of the sequence).

SAP NetWeaver Visual Composer: User Guide

184

SAP Online Help

07.09.2004

Using the Data Inspector


Use
When debugging a model, the Data Inspector lets you more closely examine data sets within iView components.

Procedure
...

1. From the Choose infoset drop-down list, choose an infoset to be inspected. 2. Choose the Grid or Form radio button to determine how the data set is displayed by the Data Inspector. 3. Run an event in the workspace. 4. In the Data Inspector, click Refresh. The Data Inspector displays the data output in the corresponding event. The navigation buttons at the bottom of the Data Inspector can be used to navigate through the records in the infoset.

SAP NetWeaver Visual Composer: User Guide

185

SAP Online Help

07.09.2004

Importing Visual Composer Content into the Portal


Purpose
You import a Visual Composer-generated business package into a portal using standard portal administration methods. See the section describing the content import process in the relevant portal Administration Guide accessed from SAP Help Portal at http://help.sap.com/nw04/ : SAP Enterprise Portal: Administration Guide System Administration Transport of Content Objects Package Export Editor and Package Import Editor NetWeaver 04: Administration Guide System Administration Transport, Upload and Content Mirroring Transport of Content Objects Package Export Editor and Package Import Editor

Performing Backup and Restore Purpose


All Visual Composer data is stored in a Microsoft SQL database created during Storyboard installation. You can find the name of the database in the connection string (var SQL_CONN=) listed in the ~server.ini file in the following folder: Inetpub\wwwroot\SAP NetWeaver Visual Composer\Server. Use the Microsoft SQL Server Enterprise Manager to periodically back up the database. Exported and imported models are stored in the file system of the Storyboard server. The default path for these exports on the Visual Composer server is: . . . \inetpub\wwwroot\SAP NetWeaver Visual Composer\data\~export. Backup of models is important because if you uninstall Visual Composer, the process will erase all of your files. To save models between upgrades, you may wish to export files and save them in a different location. For more information, see Exporting and Importing a Model [Page 40]. To restore the model to your Storyboard or to a different Storyboard, use the Import procedure described in Exporting and Importing a Model [Page 40].

SAP NetWeaver Visual Composer: User Guide

186

SAP Online Help

07.09.2004

Customizing the Design Workspace


Purpose
Visual Composer contains a number of mechanisms for manipulating the look-and-feel of the design-time workspace.

Features
You can customize the workspace using the: Graphic Symbol Properties List [Page 189] Design Toolbox [Page 188]

SAP NetWeaver Visual Composer: User Guide

187

SAP Online Help

07.09.2004

Design Toolbox
Definition
The toolbox at the bottom of the Design workspace enables you to manipulate the components in the diagram and the actual workspace itself. (You can move the toolbox to a different location on the desktop by right-clicking in the toolbox area and selecting your docking option from the context menu.)

Structure
The following tools are available in the toolbox. Action Pointer tool Connector tool Shape edit tool Alignment tool Text block tool Painter tool Zoom tool Hand tool High quality Show table Show magnifier Show shadow Button Description Standard pointer Highlights the ports of all elements in the workspace Enables you to move ports on a model component Displays two perpendicular lines for aligning elements in the workspace Adds a text block for writing notes (in design time only) Paints the selected component with the color you select from the palette Magnifies the element under an area you define by dragging Moves the entire workspace with the cursor Displays the elements in the workspace in high/low quality Shows/hides the workspace grid Provides a magnifying glass for magnifying the part of an element under the magnifying circle Displays a shadow for each component in the workspace

SAP NetWeaver Visual Composer: User Guide

188

SAP Online Help

07.09.2004

Graphic Symbol Properties List


Definition
In each Properties task panel, the Graphic Symbol properties lists let you customize certain aspects of the design time environment, per model component.

Use
These options are relevant to the design-time environment only and have no bearing on the compiled code. To define the design-time graphic properties, select (but do not open) the model component in the Design workspace and then choose Model Define Properties.

Structure
Background (select workspace grid) Dimensions (select workspace grid) The background color of the currently-displayed Design workspace. Click in the Background field, click the palette icon at the right, and from the color palette, choose a color. The width and height of the current workspace (in logical units, relative to the current view settings). In the Dimensions field, enter a width and then a height value, separated by a space. The color of the component selected in the Design workspace, and its labels. Click in the Stroke Color field, click the palette icon at the right and from the color palette, click a color. Label Alignment The position of the label of the component selected in the Design workspace. Click in the Label Alignment field, and select an option from the context menu. Icon Alignment The position of the icon if any that appears inside the selected component. An example of an icon is the SAP logo displayed in every SAP data service icon. The position of the component selected in the Design workspace, relative to the top-left corner. (In other words, entering the values 0 0 places the top-left corner of the component in the top-left corner of the Design workspace.) In the Symbol Position field, enter a horizontal and then a vertical value, separated by a space. Symbol Size The size (in logical units, relative to the current view settings of the diagram) of the component selected in the Design workspace. In the Symbol Size field, enter a width and then a height value, separated by a space.

Stroke Color

Symbol Position

SAP NetWeaver Visual Composer: User Guide

189

SAP Online Help

09.09.2004

Troubleshooting
The following table lists a number of problems that may arise when working in Visual Composer, and gives the required troubleshooting steps.

Situation Attempting to establish a connection with portal

Error Message Failed to get systems list

Possible Problem visualcomposer.par file has not been deployed in the portal.

Proposed Solution Check the portal installation prerequisites and required procedures outlined in Chapter 2 of the SAP NetWeaver Visual Composer Installation Guide, accessed from SAP Service Marketplace at service.sap.com/instguides SAP Components. Storyboard administrator must download Help from NetWeaver 04 Help portal (at help.sap.com\nw04) to the Storyboard server. Instructions for running the Help installer are found in the Readme.txt file in the Help installer .zip package. See Chapter 2 of the SAP NetWeaver Visual Composer Installation Guide, accessed from SAP Service Marketplace at service.sap.com/instguides SAP Components.

Accessing contextsensitive help in Storyboard

Help is not currently available

Context-sensitive help has not been installed on the Storyboard server.

Trying to access BI Query Wizard

BI Query Wizard not available

BI components may not have been properly installed.

Other troubleshooting information can be found in Visual Composer log files. For information about accessing the log files, see Using Log Files for Troubleshooting [Page 191].

SAP NetWeaver Visual Composer: User Guide

190

SAP Online Help

07.09.2004

Using Log Files for Troubleshooting


Use
If a problem occurs in Visual Composer Storyboard, you may be able to determine its source from log files created and stored both on the Visual Composer server and on the connected portal.

Visual Composer Server Log


On the Visual Composer server, events can be logged in the Output Console located at the bottom of the workspace. Events are logged for the duration of the client session. The Output Console can be viewed in Storyboard by dragging open the status bar at the bottom of the Storyboard desktop.

Output Console The server administrator controls the display of the log file in the console, selecting to show only errors, only warnings, or all information. The actual file that controls the display of information resides in the following path of the Visual Composer server: ...inetpub\wwwroot\SAP NetWeaver Visual Composer\server\~server.ini The control file is as follows: <% var devmode = false, LogLevel = 0; var SERVER_VIRTUAL_DIR = "VCServer"; var DATA_VIRTUAL_DIR = "VCData"; var var var var GKB_URL RES_URL DOCS_URL DATA_URL = = = = 'SERVER_URL/'+SERVER_VIRTUAL_DIR+'/'; 'SERVER_URL/'+SERVER_VIRTUAL_DIR+'/'; 'SERVER_URL/'+SERVER_VIRTUAL_DIR+'/docs/'; 'SERVER_URL/'+DATA_VIRTUAL_DIR+'/';

SAP NetWeaver Visual Composer: User Guide

191

SAP Online Help

07.09.2004

var var var var

GKB_PATH RES_PATH DOCS_PATH DATA_PATH

= = = =

Server.MapPath('/'+SERVER_VIRTUAL_DIR)+'\\'; GKB_PATH+(devmode?'':'res\\'); GKB_PATH+'docs\\'; Server.MapPath('/'+DATA_VIRTUAL_DIR)+'\\';

var SQL_PASSWORD = 'bRb9mfE='; var SQL_CONN = 'DRIVER=SQL Server;SERVER=MAZDA,1433;DATABASE=VCDB;UID=sa;PWD=$$PWD$$;'; //log levels: 3 - None, 2 - Errors, 1 - Warnings, 0 - Information %> Change log level in top line (listed here in blue). Use the comment at the bottom (also in blue) for determining which level to select. When troubleshooting, always choose the highest level (0) all information so that all of the log information is displayed. Copy and paste the text into a text file and then send the file to Support.

Only administrators with access to the Visual Composer server machine can access the log control file; no direct access is available from the client machine. Any changes to the control file, though, affect all end users accessing Storyboard from that server.

Visual Composer Log on Enterprise Portal


On the portal, all exceptions occurring in Visual Composer are registered and maintained in log files residing on the portal server. On servers running Enterprise Portal 6.0 SP2, two files error.log and output.log are located in the following path: usr\sap\. . .\j2ee\cluster\server\managers\console_logs On servers with Enterprise Portal running on SAP NetWeaver 2004, a number of log files are located in the following path: usr\sap\QP3\. . .\j2ee\cluster\server\log A SAP NetWeaver log viewer contains all NetWeaver logs, including one for Visual Composer. Only portal users with System Administrator authorization can access these files.

SAP NetWeaver Visual Composer: User Guide

192

SAP Online Help

07.09.2004

Appendix: Examples
Purpose
This section contains a number of procedures that take you step by step through the processes used to create different types of iViews, using a range of different Visual Composer functions. Performing these procedures should enable you to familiarize yourself with iView creation and the use of the Visual Composer tools. The sequences in the examples assume that you have familiarized yourself with the general processes of model creation outlined previously in this manual. You may wish to create a different page or module for each iView, or you may decide to create all the iViews on a single page.

In order to import the SAP BAPIs used in the examples, you should be connected to a standard SAP IDES system. See also: Example 1: Customer Address iView [Page 194] Example 2: Expanded Banks iView [Page 197] Example 3: Salesorder iView [Page 200] Example 4: BI iView [Page 205]

SAP NetWeaver Visual Composer: User Guide

193

SAP Online Help

07.09.2004

Example 1: Customer Address iView


Use
In this example, you create a simple iView in which the user can input a range of customer identification numbers and receive a list of those customers addresses. In this example, you:
...

Import the data service and flip its output port. Test the data service. Create an input form. Define a table as the output view. Check the model for errors. Adjust the layout of the views and their layout in the iView. Preview the iView. Compile the iView.

Start the procedure on page level in a new or existing module.

Procedure
...

1. Create an iView (dragging the iView icon from the Elements task panel) and call it Customer iView. 2. Import the data service: a. Connect to the appropriate portal (see Adding Data Services to Your Model [Page 49]). b. Open (double-click) the iView and click the Data button in the task panel toolbar. c. From the System drop-down list, select the R/3 system containing BAPI_CUSTOMER data services. d. On the Search tab, enter: BAPI_CUSTOMER_GET* in the Name field. e. Click Search. A list of all data services matching the search string are displayed. f. Drag BAPI_CUSTOMER_GETLIST onto the Design workspace. The metadata from the BAPI is imported from the SAP Enterprise system to SAP NetWeaver Visual Composer. 3. Adjust the data service input and test it: a. The input to Customer Getlist should be a table, which appears here as the output port Idrange. To convert this to an input port, right-click Idrange and select Flip Port from the context menu. Idrange becomes an input port. b. Right-click Customer Getlist and from the context menu, choose Test Function (see Testing the Data Service (Optional) [Page 50]). To test the function, enter 0000001030 in the Low field and click Execute. c. Click Close in the Test Function dialog box to continue.

SAP NetWeaver Visual Composer: User Guide

194

SAP Online Help 4. Define the input:

07.09.2004

a. Drag out from the Idrange port of Customer Getlist, release the mouse, and choose Add Input Table from the context menu. b. Double-click the Submit line between the table and the BAPI. In the Fields task panel at the right, you can see that the four fields of the Idrange input HIGH, LOW, OPTION and SIGN have been mapped automatically between the two components. 5. Define the output: a. Drag out from the Address Data output port of Customer Getlist, release and select Add Table View from the context menu. The Addressdata Table icon is placed on the workspace; it will display the customer addresses in the iView. b. In the Fields task panel at the right, select the following fields to be displayed in the iView: ADDRESS, CITY, COUNTRY, CUSTOMER and NAME. 6. Check the model for errors by clicking Deployer in the Task Panel toolbar and then clicking Check. If all is well (and it should be!), you will get the following message: Model is valid! Otherwise, you will receive a list of your errors. 7. Adjust the iView layout by clicking the Layout tab. The general layout of the iView components is displayed. a. Click the Designer button in the Task Panel toolbar and make sure that the Container tab is selected. b. Select the Addressdata Table view in the workspace. c. Deselect the Selectable checkbox (towards the bottom of the task panel); this will make the table appear in the iView without radio buttons on each row. d. To make the first column (Customer) of Addressdata Table read-only, select the column and at the bottom of the Controls tab, select the Read Only check box. e. Rearrange the layout of the columns in Addressdata Table: Select the City column and drag it to the left, before Country. 8. Preview the iView by clicking the Preview tab. 9. Compile the code by clicking Deployer again and in the Deployer task panel, clicking Deploy. The model is compiled and deployed to the portal to which you are connected.

Result
In the Design workspace, the final iView should look something like this:

SAP NetWeaver Visual Composer: User Guide

195

SAP Online Help

07.09.2004

SAP NetWeaver Visual Composer: User Guide

196

SAP Online Help

07.09.2004

Example 2: Expanded Banks iView


Use
In this example, you expand the Banks iView created previously (see Quick Start A Sample Work Session [Page 21]) by adding a data service that will display the address of the bank selected in the Bank List Table. In this example, you will: Open an existing iView to modify it. Import a data service and map data between an existing output table and the input to the data service. Define a form as the output view. Check the model for errors. Adjust the layout of the views. Preview the iView. Compile the iView.

Remember that as you build the iView, you should periodically save your model.

Procedure
...

1. Open the Banks model and open the Banks iView in the Design workspace. 2. Import an additional data service: a. Connect to the appropriate portal (see Adding Data Services to Your Model [Page 49]). b. Open (double-click) the iView and click the Data button in the task panel toolbar. c. From the System drop-down list, select the R/3 system containing BAPI_BANK data services. d. On the Search tab, enter: BAPI_BANK_GET* in the Name field. e. Click Search. A list of all data services matching the search string are displayed. f. Drag BAPI_BANK_GETDETAIL onto the Design workspace. 3. Map data from Bank List Table to Bank Getdetail: a. The input to Bank Getdetail will be a row selected from Bank List Table. Drag a line to connect between the out port of Bank List Table and the Input port of Bank Getdetail. b. Double-click the select line. A list of fields is displayed in the Fields task panel. In each row of the list, click in the Assign column, and from the drop-down list, select the corresponding field name. This maps the input fields of the data service (Field column) to the field that is output from the table (Assign column). 4. Define the output from Bank Getdetail:: a. Drag out from the Bank Address output port of Bank Getdetail, release and select Add Form View from the context menu. The Bank Address Form icon is placed on the workspace; it will display the address of the bank selected in Bank List Table.

SAP NetWeaver Visual Composer: User Guide

197

SAP Online Help

07.09.2004

b. Double-click Bank Address Form and select the following fields to display in the iView: BANK_NAME, BANK_NO, CITY, REGION and STREET. 5. Check the model for errors by clicking Deployer in the Task Panel toolbar and then clicking Check. 6. Adjust the iView layout by clicking the Layout tab: a. Select Input Form, move the Submit button to the right of the Bank Country field, and reduce the height of the form accordingly. b. Select Bank List Table, move the view up on the layout and reduce the height of the view as well. c. Scroll down, select Bank Address Form and move it up on the layout. Rearrange the order of the fields in the view: Bank Name, Bank No, Street, City and Region.

To align the fields after rearranging them, select the top field (Bank Name) and then click each subsequent field while pressing Ctrl. When all the fields are selected, click the Left Align button in the toolbox at the bottom. 7. Preview the iView by clicking the Preview tab. You can enter US or DE and view the results. 8. Compile the code by clicking Deployer again and in the Deployer task panel, clicking Deploy. The model is compiled and deployed to the portal to which you are connected.

Result
In the Design workspace, the final Banks iView should look something like this:

SAP NetWeaver Visual Composer: User Guide

198

SAP Online Help

07.09.2004

The actual iView will look similar to the views displayed in the Preview workspace, as follows:

SAP NetWeaver Visual Composer: User Guide

199

SAP Online Help

07.09.2004

Example 3: Salesorder iView


Use
In this example, you create an iView in which the user can input a customer number and sales organization number in order to display a table sorted by document date of all orders placed by that customer. From the displayed list, the user can then select a document and subsequently display the order details Document Date, Material, Currency, Net Price, Reference Quantity and relative Order Size in a second table. In this example, you will: Create an iView and import two data services. Define an input form and a start point for the first data service. Define a table view for output, which is first sorted using a Sort operator. Map the data from the output form to the input of the second data service. Define a table view for output from the second data service, which is also sorted using a Sort operator. Define a dynamic expression in the output table, using the Expressions Editor. Check the model for errors. Adjust the layout of the views. Preview the iView. Compile the iView.

Procedure
...

1. Create an iView (dragging the iView icon from the Elements task panel) and call it Salesorder iView. 2. Import the data services: a. Connect to the appropriate portal (see Adding Data Services to Your Model [Page 49]). b. Open (double-click) the iView and click the Data button in the task panel toolbar. c. From the System drop-down list, select the R/3 system containing BAPI_SALESORDER data services. d. On the Search tab, enter: BAPI_SALESORDER* in the Name field. e. Click Search. A list of all data services matching the search string are displayed. f. Drag BAPI_SALESORDER_GETLIST and then BAPI_SALESORDER_GETSTATUS onto the Design workspace. g. Right-click Salesorder Getlist and from the context menu, choose Test Function (see Testing the Data Service (Optional) [Page 50]). To test the function, you can use 0000001000 for Customer Number and 1000 for Sales Organization.

SAP NetWeaver Visual Composer: User Guide

200

SAP Online Help 3. Define the input:

07.09.2004

a. Drag out from the Input port of Salesorder Getlist and from the context menu, choose Add Input Form. b. Drag out from the same Input port again and choose Start Point. Then, doubleclick on the connecting line of the Start Point to display the input fields in the Fields task panel. In the Assign column, next to CUSTOMER_NUMBER, enter 0000001000 and next to SALES_ORGANIZATION, enter 1000. These values will serve as the default values for the iView. 4. Define the output: a. Drag out from the Sales Orders output port of Salesorder Getlist, release and select Sort Data from the context menu. The Sort data operator is placed on the workspace and the fields input to the operator are displayed in the Fields task panel. b. In the Fields list, click in the first column of the DOC_DATE row to select the document date as the sort criterion. c. In the Design workspace, drag out from the output port of the Sort operator, release and select Add Table View from the context menu. This table will display the list of sales orders. d. In the list in the Fields task panel, select the following fields to be displayed in the iView: DOC_DATE, MATERIAL, NAME, NET_PRICE and SD_DOC. e. Save the model. 5. Define the input to the second BAPI: a. To enable the user to select a document and get all of its details, the table must serve as input the second BAPI: Salesorder Getstatus. Therefore, connect the out port of the table to the Input port of Salesorder Getstatus. b. As you can see in the Fields task panel, the SALESDOCUMENT field of the Salesorder Getstatus data service must receive data from the table. To map the data, assign @SD_DOC to the SALESDOCUMENT field. 6. Define the output from the second BAPI: a. In order to display the details of the selected document, the output can be displayed in a second table, sorted according to Material. First, drag out from Salesorder Getstatus, release and from the context menu, select Sort Data. Another Sort data operator is placed on the workspace. b. In the list in the Fields task panel, click in the first column of the MATERIAL row to select the material number as the sort criterion. c. Drag out from the output port of the Sort operator, release and select Add Table View from the context menu. This table will display the details of the selected order, sorted according to material. d. From the list in the Fields task panel, select the following fields to be displayed in the iView: CURRENCY, DOC_DATE, MATERIAL, NET_PRICE and REF_QTY. e. Save the model. f. Add a field with a dynamic expression: i. ii. Under the list in the Fields task panel, click Add. The Add New Field dialog box is displayed. In the Name field, type Order and from the Type drop-down list, choose Text. A string called Order will be added to the list, selected for visible display (the checkmark in the first column).

SAP NetWeaver Visual Composer: User Guide

201

SAP Online Help iii.

07.09.2004 In the Label field in the Display set of properties below, change the field label to Order Size and press Enter. You can go to the Layout workspace and see the newly-added field in the table. Go back to the Design workspace, right-click the table, and from the context menu, select Dynamic Expressions. The Expressions Editor is displayed. Place the cursor in the Computation column of the Order_Size row and click Assistant. Scroll down the list of functions to the Conditional Functions group and select IF. Then click in the empty text box at the bottom to display the following expression: IF(test,expr1,expr2) Use that formula to enter the following: IF(@REF_QTY*@NET_PRICE>100000,@REF_QTY*@NET_PRICE,'Sma ll') Press Enter.

iv.

v. vi.

vii.

This formula indicates that if the value of the order (reference quantity (REF_QTY) multiplied by net price (NET_PRICE) is greater than 100,000, the exact value will be displayed in the iView. Otherwise (if the resulting value is less than 100,000) the word Small will be displayed in the list rather than the actual amount. viii. ix. Click Close to enter the dynamic expression in the ORDER_SIZE field of the table. Save the model.

7. Check the model for errors by clicking Deployer in the Task Panel toolbar and then clicking Check. 8. Rearrange the iView layout by clicking the Layout tab and moving the views as needed. a. Click the Designer button in the Task Panel toolbar and make sure that the Controls tab is selected. b. Resize the Input form to accommodate all the fields. c. Select all the fields of the Input form (using the mouse and the Ctrl key), and select Long Label from the Available Styles list.

SAP NetWeaver Visual Composer: User Guide

202

SAP Online Help

07.09.2004

d. Select the Purchase Order Number field, and in the Label field at the bottom right, change the label to Purchase Order No. 9. Preview the iView by clicking the Preview tab. You can select different rows of the first table and view the results in the second. 10. Save the model. 11. Compile the code by clicking Deployer again and in the Deployer task panel, clicking Deploy. The model is compiled and deployed to the portal to which you are connected.

Result
In the Design workspace, the final iView should look something like this:

The actual iView will look similar to the views displayed in the Preview workspace, as follows:

SAP NetWeaver Visual Composer: User Guide

203

SAP Online Help

07.09.2004

SAP NetWeaver Visual Composer: User Guide

204

SAP Online Help

07.09.2004

Example 4: BI iView
Use
In this example, you use Visual Composers BI Query Wizard to create an analytical iView which addresses the business question "What are my top three and bottom three sales divisions, based on billing value?" In this example, you: Select a BI data service based on the BW Demo Cube from the BI Query Wizard Use the BI Query Wizard to configure the Top N template using values from your data service Preview the result in the wizard and in the workspace Switch the table view to a column chart view Map the fields for display in the chart Preview the column chart

Prerequisites
You have the BW demo content InfoCube SAP Demo: Sales and Distribution Overview with the Order and sales values query activated (technical name: 0D_SD_C03/0D_SD_C03_Q009) and configured to connect via the BI XMLA Connector in the portal landscape.

The BI Query Wizard and related functionality are installed by default with Visual Composer. However, if you try to access the BI Query Wizard and receive a BI Query Wizard not available message, you need to check that the required BI components have been properly installed. To do so, see section 2.0 of the SAP NetWeaver Installation Manual, accessed from SAP Help Portal at help.sap.com\nw04.

Procedure
...

1. Create and open an iView. 2. Connect to the portal from which you can access the BI XMLA system. 3. Choose BI BI Query Wizard. 4. From the Welcome to the BI Query Wizard screen, click Next. 5. In the Select a System screen, expand the XMLA Connections folder in the Available Systems list, select the data service that contains the BW demo InfoCube, and click Next. 6. In the Select a Query Template screen, expand the Rank category, select the Top N template and click Next. 7. In the Select a Cube screen, expand the 0D_SD_C03 catalog and select the 0D_SD_C03/0D_SD_C03_Q009 cube. Note that the Description section reflects the name of the query (Order and sales values) and the properties of the cube are displayed in the Properties section. Then click Next.

SAP NetWeaver Visual Composer: User Guide

205

SAP Online Help

07.09.2004

8. In the Configure Top N Parameters screen, there are two sections: Define Query Ranks and Values, and Define Members. In the Define Query Ranks and Values section, note that you can independently configure top rank and bottom rank values. Configure the parameters needed for this section according to the table below: Define Query Ranks and Values Section Option Top rank type Bottom rank type Checked? Yes Yes Type Count Count Value 3 3

In the Define Members section, note that the drop-down lists are populated with metadata from the demo InfoCube. Configure the parameters needed for this section according to the table below: Define Members Section Option Dimension Hierarchy Level According to measure Value Division Division Division Level 01 Billing value

9. Click Next to advance to the Define Filters screen 10. In the Define Filters screen, bypass the optional step of defining filters by clicking Next. 11. In the Preview Result screen, review the table that appears as the result of the query you have defined. Note that the top three divisions sold are listed first, followed by a top total, and then the bottom three divisions are listed, followed by a bottom total. Click Finish. 12. You return to the Visual Composer workspace, where a new data service has been created with the Top N query you have configured. The objects in the workspace should look something like this:

The data service is configured automatically with a start input and a table view as output. These three elements constitute a complete iView, ready for preview and deployment to your portal. 13. Click the Preview tab and confirm that you see a table view something like the below:

SAP NetWeaver Visual Composer: User Guide

206

SAP Online Help

07.09.2004

14. To display the results of a Top N query, decide you would prefer a column chart view instead of a table view. Click the Design tab and delete the table view. 15. From the Elements panel, drag the Chart View to the workspace. 16. Click the output port of the Top N query and drag to connect to the input port of the Chart View. 17. Select the Chart View, and go to the Designer panel. 18. On the Container tab, from the Chart Type section, select Columns. 19. Now you must map the fields to be displayed in the chart. Select the Fields panel, and place a checkmark next to both Billing Value and F0D_DIV. 20. You want to swap the axes so that Division appears on the X axis. Change Billing Value to Series 1 and F0D_DIV to X axis. 21. Adjust the iView layout by clicking the Layout tab and dragging the size of the chart to be wider. 22. Preview the iView by clicking the Preview tab.

Result
As displayed on the Preview tab, the final iView might look something like this:

SAP NetWeaver Visual Composer: User Guide

207

SAP Online Help

07.09.2004

SAP NetWeaver Visual Composer: User Guide

208

You might also like