Sap Netweaver Visual Composer: User Guide

SAP NetWeaver Visual Composer r el eas e 6.
0
Document version 1.1

SAP NetWeaver Visual Composer:
User Guide
SAP Online Help 07.09.2004
SAP NetWeaver Visual Composer: User Guide 2
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.
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 Description
Sample text 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 Emphasized words or phrases in body text, graphic titles, and table
titles.
SAMPLE TEXT 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.
Sampl e t ext 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.
Sample text Exact user entry. These are words or characters that you enter in the
system exactly as they appear in the documentation.
<Sample text> Variable user entry. Angle brackets indicate that you replace these
words and characters with appropriate entries to make entries in the
system.
SAMPLE TEXT
Keys on the keyboard, for example, F2 or ENTER.
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
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
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
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
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.
The following figure depicts the general architecture of the Visual Composer system.
SAP
Apps
JDBC Non SAP
Web
Services
Runtime Connectivity
SAP Enterprise Portal
Web Browsers / Clients
SAP NetWeaver
Visual Composer
Pages / iViews
Data
Metadata
D
e
s
i
g
n

T
i
m
e
C
o
n
n
e
c
t
i
v
i
t
y
Pages / iViews

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.
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 Application Programming Interface
BAPI Business API
BI Business Intelligence
BW Business Information Warehouse
EPCM Enterprise Portal Client Manager
An object defined by the portal Client Framework to handle functions such as
client eventing
GML Generic Modeling Language
IDES SAP Internet Demo and Evaluation System
IGS Internet Graphics Service
Used to display results of BI queries in Heatmap format
J2EE Java 2 Enterprise Edition
The portal operates on top of the J2EE engine
JDBC Java database connectivity
MDX Multidimensional Expression language
Used for manipulating multidimensional data
OLAP Online Analytical Processing
A means of processing and presenting multidimensional data for analysis and
management
PAR Portal Archive file
Contains all resources of a portal application
PCD Portal Content Directory
RFC Remote Function Call
SQL Structured Query Language
A standardized language for retrieving data from and updating a database
SVG Scalable Vector Graphics
A language used to describe two-dimensional vector and mixed vector/raster
graphics in XML
UI User Interface
URL Uniform Resource Locator
The address of a site on the Internet
URN Uniform Resource Name
A persistent identifier for information resources
XMLA XML for Analysis
A set of XML message interfaces used to define data access interaction
between a client and an analytical data provider working over the Internet
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

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.
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
Tabbed
Workspace
Workspace
Toolbox
Connection
Block
Task
Panel
Toolbar
Task
Panel

Main Parts of the Visual Composer Desktop
Workspace
Definition
The grid on which you build your model.

Structure
The workspace can contain up to four tabs, or model views:
Tab Use
Design Constructing your model
Layout Customizing the layout of iViews
Preview Previewing and validating the logic of iViews
Source 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.

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
Toolbar
Button
Menu
Option

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

Search Displays a hierarchical tree that represents your
model. You can use the tree to modify the model
hierarchy and to navigate the model.
Add Elements

Model Used to configure the fields of a UI component.
Design the Views

Model Used, in conjunction with the Layout workspace,
to customize the layout of your iViews.
Define Fields

Model Used, in conjunction with the Design workspace,
when defining the flow of information in an iView.
Define Properties

Model 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.
Select Data
Services

Model Used, in conjunction with the Design workspace,
to import data services into your model.
Deploy

Build Used to compile and deploy the portal business
packages.
Debug the Model

Build Used, in conjunction with the Preview workspace,
to validate the logic of your model.

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.

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]

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.

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 Option Description
Options for manipulating the main components of the
Visual Composer desktop.
Taskbar Lets you position the task panel toolbar on either the
right or the left of the desktop.
Toolbox Lets you position the current workspace toolbox
above, below, to the right or the left of the workspace.
You can also hide it entirely.
Windows Enables you to define how multiple windows are
displayed.
View
Reload last workspace
at startup
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 Number of times you can perform undo sequentially.
Maximum history size Number of times you can use a left or right arrow to
navigate backwards/forwards (respectively) in your
tree structure.
Edit
Maximum open
editors
Number of multiple windows that can be open at the
same time.
Draw Options for defining display parameters when
manipulating model components in the workspace.
Tab Name Option Description
Automatically fit
diagram on open
Adjusts the size of the last-opened model in the
workspace when you first access Visual Composer.
Clip shapes to
diagram boundaries
Restrains a model component icon when it is moved
to the edge of the workspace.
Show diagram caption Displays (or hides) the title of the model component in
the workspace.
Drag shapes smoothly Enhances the resolution of model icons as they are
dragged in the workspace.
Show drag and drop
sprite
Displays the animated shape of the object you are
dragging.
Select partially within
area
Lets you select a group of objects by dragging the
bounding rectangle partly over them.

Optimize screen
refreshing
Enhances the speed and quality of the model display.
Options used for the deployment process.
PAR name prefix Lets you define the prefix of all PAR files created by
Visual Composer.
Deployment folder 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.
Internet Graphics
Service (IGS) URL
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.
Portal
BW Query View WS
suffix
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.

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

button in the
toolbar.
To get information about a section of the screen, click 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 Hel p i s not cur r ent l y
avai l abl e 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. t xt file in the Help installer . zi p package.
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:

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.

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

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

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.

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.

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
Ent er . 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
Ct r l 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.


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.
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].
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 \ i net pub\ wwwr oot \ Vi sual Composer \ dat a.
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]
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].

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.

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:

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 double-
arrows 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.

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

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

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.

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:
. . . \ i net pub\ wwwr oot \ SAP Net Weaver Vi sual
Composer \ dat a\ ~expor t .
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.

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. Type the new password in the New Password field.
ii. Confirm your password in the Retype Password field.
iii. Click OK.
To change an existing model password:
...
i. Type the existing password in the Old Password field.
ii. Type the new password in the New Password field.
iii. Confirm your password in the Retype Password field.
iv. Click OK.
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.

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

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

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.

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.

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

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 back-
end 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

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

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 Name of the data service. To change the name, enter any text
in the field.
SAP System 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 The type of system such as R/3, BI or Siebel from which
the data service has been imported.
Function The function on which this data service is based. There is no
need to edit this field.
Requires commit? For function modules that modify the database, this indicates
that a second commit call is required to confirm the
database update.
Convert outputs? When checked, this option indicates that a conversion BAPI is
required, for values in one unit of measurement to another.
Graphic Symbol 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].
Documentation Options that let you create text for inclusion in the
automatically-generated project documentation. See Defining
Documentation Properties for Model Components [Page 178].

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

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.

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
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 Function
Help Provides screen-level context-sensitive help for any screen
in the wizard.
Back 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.
Next Advances to the next screen in the wizard. Values you have
selected on previous screens are saved.
Finish 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.
Cancel 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.

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:
OLAP and BW Terminology
OLAP Term BW Term
dimension [External] characteristic
measure [External] key figure
member [External] characteristic level
level [External] 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].

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.

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 Description Sample Business
Question
Grand Totals [Page 68]
(default)
Aggregates all measures to the
highest level. Returns one row of
data with the total for each
measure.
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?
Percentage Share
[Page 76]
Calculates the share that selected
members represent within the
sum of the level members, and
expresses this as a percentage.

What percentages do
Canada and Mexico
represent of my total
sales?
Category / Name Description Sample Business
Question
Dynamic Calculation
Cumulative Total [Page
64]
Cumulates the value of a measure
over a specific date range.
What is my monthly year-
to-date expense total?
Moving Average [Page
69]
Calculates the average values of
selected measures based on
specified time periods.
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.
What is the change in rank
for my top ten customers
between last year and this
year?
Top N [Page 87] Calculates the rank of a level
based on a specific measure.
Who are my top ten or
bottom ten customers?
Trend
Trend Over Time
[Page 90]
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?
Variance
Percentage Growth
[Page 73]
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.
By what percentage did
my sales increase this
year compared to last
year?
Planned vs. Actual
[Page 79]
Calculates the values of a
measure defined as actual and a
measure defined as planned,
illustrating the difference between
actual and expected results.
How do my actual costs
compare to the planned
costs?
Zero Activity [Page 93] Identifies members of a selected
level that have had sales in the
past, but which have had no sales
in a specified time period.
Which products didn't sell
last year?

The following templates, listed together with their descriptions and sample business
questions, are provided for relational data services:
Relational Query Templates
Name Description Sample Business
Question
All Data [Page 96]
(default)
Selects all records and all fields
as the final result, without any
filters or joins.
What are all the available
grade levels and their
details?
Count [Page 97] Counts all occurrences of a
certain type of data in a group or
groups within a table.
How many employees is
each different manager
responsible for?
Freeform [Page 98] Walks you through defining a
query without the constraint of a
particular business question.
Not applicable.
Heatmap [Page 99] 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.
What is the relative
distribution of sales among
certain divisions and
companies?
Minimum/Maximum
[Page 103]
Finds the minimum or maximum
value of a field, and provides
details from the row that holds that
value.
Which store has the
smallest revenue; where is
that store and who is the
manager?

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

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.

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

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 Values Action
Dimension 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.
Select the dimension that
contains the hierarchy to
display in the Hierarchy field.
Hierarchy Lists all hierarchies in the
currently selected dimension.
Select the hierarchy that
contains the level to display in
the Level field.
Level Lists all levels in the currently
selected hierarchy.
Select the level that contains
all the members you wish to
count.
With measure Lists all measures in the cube
on which the query is based.
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.

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
based.
from this list.
the Level field.
selected hierarchy.
the members that should be
listed on the rows in the result.

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
Time dimension Lists all the time dimensions in
the cube on which the query is
based.
from this list.
the Level field.
Period level Lists all levels in the currently
selected hierarchy.
the time granularity upon
which to base the date range.
From Lists all members in the
currently selected level.
Select the start period of the
date range in which to count
members.
To Lists all members in the
Select the end period of the
date range in which to count
members.

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:

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 January February March
CA 1056 1131 1074
OR 1185 970 1239
WA 1343 1382 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.
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.
following:
What is my monthly year-to-date expense total?

Prerequisites

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:
...
2. Configure Cumulative Total parameters [Page 65]

Result

Example
For an example of working with the Cumulative Total template, see Configuring Cumulative
Total Parameters [Page 65].
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
[Page 106]).
contains the level to display
in the Level field.
selected hierarchy.
the members you want to
see in the querys result.

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
Time dimension Lists all the time dimensions
in the cube on which the
query is based.
in the Level field.
selected hierarchy.
which to base the date
range.
date range in which to
cumulate the total.
date range in which to
cumulate the total.

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

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:

data service.

Calculate section:
Running total of measure = Store Sales

For Members of section:
Dimension = Product
Hierarchy = Product

For Date Range section:
Hierarchy = Time
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 Jul Aug Sep Oct Nov Dec
Part A 25 15 10 10 10 5
Part B 20 10 5 5 10 15
Part C 5 5 5 5 10 5

Cumulative Total Query: Result
Part Jul Aug Sep Oct Nov Dec
Part A 25 40 50 60 70 75
Part B 20 30 35 40 50 65
Part C 5 10 15 20 30 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.

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.
following:
What is the total revenue of all sales transactions?

Prerequisites

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

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.


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.
following:
What are the average manufacturing costs of products A and B for Q2 and Q3, based on the
previous four months?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Moving Average
...
2. Configure Moving Average parameters [Page 70]

Result

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

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
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:
[Page 106]).
the Level field.
selected hierarchy.
the members you want to see
in the query's result.

4. Configure the parameters in the Display Date Range section of the screen according to
the actions in the table below:
Display Date Range
Time dimension Lists all the time dimensions in
the cube on which the query is
based.
the Level field.
selected hierarchy.
which to base the date range
display.
date range to display.
date range to display.

5. Click Next.

Result

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:

data service.

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

Dimension = Product
Hierarchy = Product

Display Date Range section:
Hierarchy = Time
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 Dec Jan Feb Mar Apr
Part A $25 $15 $10 $10 $5
Part B $20 $10 $5 $5 $15
Part C $5 $5 $5 $5 $5

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

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.

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).
following:
By what percentage did my sales increase this year compared to last year?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Percentage Growth
...
2. Configure Percentage Growth parameters [Page 74]

Result

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

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

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
[Page 106]).
in the Level field.
selected hierarchy.

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
query is based.
in the Level field.
selected hierarchy.
the time granularity for the
base and comparison
periods.
Base period Lists all members in the
Select the base period for
the growth calculation.
Comparison period Lists all members in the
Select the comparison period
for the growth calculation.

4. Click Next.

Result

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 Base Period Comparison
Period
Difference Percentage
Change
Wine 20 60 40 200%
Beer 80 60 -20 -25%
Juice 100 10 -90 -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.

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.
following:
What percentages do Canada and Mexico represent of my total sales?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Percentage Share
...
2. Configure Percentage Share parameters [Page 77]

While defining filters is typically an optional step, for the business logic in this
template, it can be particularly important to specify filters.

Result

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

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

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
[Page 106]).
the Level field.
selected hierarchy.
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:
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.

Result

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 Unit Sales % Based on All % Based on Filtered
Wine 200 20% 33%
Beer 200 20% 33%
Juice 200 20% 33%
Whiskey 200 20%
Soft drinks 200 20%

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.

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.
following:
How do my actual costs compare to the planned costs?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Planned vs. Actual
...
2. Configure Planned vs. Actual parameters [Page 80]

Result

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

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

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 Usage
Measures 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; Actual
Plan Profit; Actual Profit
Plan Sales; Actual Sales
Quantity Ordered; Quantity Shipped

Planned vs. Actual
Indicators
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
based (see Selecting a
Cube [Page 106]).
currently selected
dimension.
in the Level field.
Level Lists all levels in the
currently selected
hierarchy.
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
based.
Select the planned measure.
Actual measure Lists all measures in the
based.
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
based.
currently selected
dimension.
in the Level field.
Level Lists all levels in the
currently selected
hierarchy.
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
based.
Select the measure for which
you want to compare
planned vs. actual values.
For example, Profit.
Planned / Actual
dimension
Lists all dimensions in the
based.
display in the Planned /
Actual hierarchy field.
Planned / Actual
hierarchy
Lists all hierarchies in the
currently selected planned
/ actual dimension.
in the Planned / Actual level
field.
Planned / Actual
level
Lists all levels in the
/ actual hierarchy.
the members to display in
the Planned indicator and
Actual indicator fields.
Planned
indicator
Lists all members in the
/ actual level.
Select the member that
indicates the planned value.
Actual indicator Lists all members in the
/ actual level.
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
Version dimension Lists all dimensions in the
based.
display in the Version
hierarchy field.
Version hierarchy Lists all hierarchies in the
currently selected version
dimension.
in the Version level field.
Version level Lists all levels in the
hierarchy.
the members to display in
the Version field.
Version Lists all members in the
level.
indicates plan version. For
example, this might be a
numeric value such as 001
or 003.

4. Click Next.

Result

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:

data service.

Calculate Planned versus Actual defined by = Measures
Dimension = Product
Hierarchy = Product
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 Plan Actual
Good Imported Beer 275 275
Portsmouth Light Beer 121 78
Walrus Light Beer 211 188
Good Chardonnay Wine 422 242

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.
following:
What is the change in rank for my top ten customers between last year and this year?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Rank Change
...
2. Configure Rank Change parameters [Page 85]

Result

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

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.

[Page 106]).
in the Level field.
selected hierarchy.

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:
Between Base and Comparison Periods Parameters
query is based.
in the Level field.
selected hierarchy.
base and comparison
periods.
Base period Lists all members in the
Select the base period from
which to calculate the rank
change.
Comparison period Lists all members in the
Select the comparison period
with which to calculate the
rank difference.

4. Click Next.

Result

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
Rank Base
Period
Rank
Difference
Wine 1500 6 1 5
Beer 1300 8 2 6
Juice 800 1 3 -2

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.

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.
following:
Who are my top ten or bottom ten customers?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Top N template, the
...
2. Configure Top N parameters [Page 88]

Result

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

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 Checked Type Value
Count Numeric value indicates count (for example,
5 specifies Top 5).
Top rank If checked,
calculate in query.
If unchecked,
ignore.
Percent Numeric value indicates percentage (for
example, 10 specifies Top 10%).
Count Numeric value indicates count (for example,
5 specifies Bottom 5).
Bottom rank If checked,
calculate in query.
If unchecked,
ignore.
Percent 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 Value Action
[Page 106]).
in the Level field.
selected hierarchy.
According to measure Lists all measures in the
based.
Select the measure to use
for the Top N calculation.

3. Click Next.

Result

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

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.
following:
What is the trend in my gross margin over the past few years? Is it increasing or decreasing?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Trend Over Time
...
2. Configure Trend Over Time parameters [Page 91]

Result

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

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

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.
[Page 106]).
in the Level field.
selected hierarchy.

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
query is based.
in the Level field.
selected hierarchy.
which to base the trend
calculations.
trend.
trend.

4. Click Next.

Result

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:

data service.

Display section:
Trend in measure = Unit Sales

Dimension = Product
Hierarchy = Product
Level = Product Family

During Date Range section:
Hierarchy = Time
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 Jul Aug Sep Oct Nov Dec
Drink 2,205 1,921 1,939 1,898 2,344 2,419
Food 17,036 15,741 14,663 14,232 18,278 19,356
Non-Consumable 4,522 4,035 3,786 3,828 4,648 5,021

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.
following:
Which products didn't sell last year?

Prerequisites

Process Flow
After using the BI Query Wizard to select an OLAP data service and the Zero Activity
...
2. Configure Zero Activity parameters [Page 94]

Result

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

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
[Page 106]).
in the Level field.
selected hierarchy.
Based on the
measure
Lists all measures in the
based.
Select the measure that
should provide a zero value.

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
query is based.
in the Level field.
selected hierarchy.
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.

3. Click Next.

Result

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:

data service.

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

With No Activity For section:
Hierarchy = Time
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
...

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

directly in the workspace, your system and table are already configured and this
step is bypassed.

Result

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.
following:
How many employees is each different manager responsible for?

Prerequisites

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
...
1. Select fields [Page 111]
2. Configure joins
3. [Page 114]Configure filters [Page 116]
4. Specify the sort order [Page 118]

Result

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

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:
...
2. Configure joins [Page 114]
3. Configure filters [Page 116]

Result

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.
following:
What is the relative distribution of sales among certain divisions and companies?

Prerequisites
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:
...
5. Configure Heatmap parameters [Page 101]

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


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

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:

data service.

Display Heatmap for section:
Primary grouping = Sal es. Di vi si on (the Di vi si on field from the Sal es table)
Secondary grouping = Sal es. Company (the Company field from the Sal es table)

Where section:
Size is determined by = Sal es. Quant i t y (the Quant i t y field from the Sal es table)
Color is determined by = Sal es. Revenue (the Revenue field from the Sal es table)


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.
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.
following:
Which store has the smallest revenue; where is that store and who is the manager?

Prerequisites

Process Flow
After using the BI Query Wizard to select a relational data service and the Minimum/Maximum
...
5. Configure Minimum/Maximum parameters [Page 104]

Result

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

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

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:

data service.

...
1. Select the Smallest radio button.
2. From the Field drop-down list, select the Sal es. Revenue field (the Revenue field
from the Sal es 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 St or e, Ci t y, and Manager from a table
called Sal es.

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

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.

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.

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 drop-
down 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.
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

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

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.
as the root node of a tree, followed by any catalogs contained in that service.
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.

Selecting Fields - Count
Use
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
...
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.
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.

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 Empl oyees 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:

Count Query Result: With Grouping
Manager Type Count
Miller Full-time 38
Miller Part-time 3
Jackson Full-time 10
Jackson Part-time 1
Sullivan Full-time 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 Empl oyees 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 Manager Count
Full-time Miller 38
Full-time Jackson 10
Full-time Sullivan 16
Part-time Miller 3
Part-time Jackson 1

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

Selecting Fields - Heatmap
Use

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

the Configure Joins screen and you proceed to the Configure Filters [Page 116]
screen.

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

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.

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


Procedure
To add a filter
...
1. From the Field drop-down list, select the field for which to configure the filter.
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 Description
= Equal to
> Greater than
< Less than
<> Not equal to
i s bet ween Is between
i s l i ke Is like
i s nul l 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.

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 Description
And This filters condition must apply.
Or 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.

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


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

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.

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

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]

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

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.

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.

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:
Default Query Templates
System Type Default Template
OLAP data service Grand Totals (OLAP)
Relational data service All Data (Relational)
BW-native data service Default Web template associated with the
query selected

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 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 Values Action
Schema All schemas in the selected
system
Click Browse to populate
the metadata list with the
selected schema as root
node
Cube All cubes in the selected
schema
selected cube as root node
Dimension All dimensions in the
selected cube
selected dimension as root
node
Hierarchy All hierarchies in the
selected dimension
selected hierarchy as root
node

ii. In the metadata tree, locate and select the object to use in the statement.
iii. 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.
v. 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.
vi. Click Search. If the member is found, you may select it in the list below.
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.

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.

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 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.
ii. 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.
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:
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.

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]

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

Query Properties
Features
The table below lists properties specifically relevant to BI queries:
Query Properties
Panel and Property Selected Object Notes
Properties Query
Configuration Max.
rows
Data service 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
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,
Properties Graphic
Symbol Description
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.
Fields Input port on the
data service
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.

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

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 Alternate View
All Data Table
Count (OLAP) Bars chart
Count (Relational) Table
Cumulative Total Lines chart
Freeform Table
Grand Totals Table
Minimum/Maximum Table
Moving Average Lines chart
Percentage Growth Table
Percentage Share Pie chart
Planned vs. Actual Columns chart
Rank Change Table
Top N Columns chart
Trend over Time Lines chart
Zero Activity Table

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 Description
Relational systems Every field of the selected
table
OLAP systems One field per dimension of the
selected cube
BW-native systems 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.

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.

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.
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.
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]
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 drop-
down 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.
To define initial input values:
Drag out fromthe 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 fromthe 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]

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 Empl oyee Get l i st 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 Empl oyee Get dat a in the
following diagram).
Multiple-value, indicated by a square ( ). In this case, a range of data is output from
the data service (see Empl oyee Get dat a, Ar chi vel i nk, 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.
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
fields, click the

button.
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:

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.

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.
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]*.
Sort

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.

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)

Outputs to a form a single record that is an aggregate value of the
records.
Top

Returns a specific number of records that fall at the top of the full
range of returned records.
Bottom

Returns a specific number of records that fall at the bottom of the
full range of returned records.
Distinct

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

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.

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 A connector property that names an event that is raised. If the Event is
not given, the Name property is used instead.
Condition Connector property, currently not supported.
Capacity 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.
Alias Reserved for future use.
Role A read-only field indicating the port ID, used by the run-time engine.
Display 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].
Graphic Symbol 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].
Documentation Options for creating text that is included in the automatically-generated
project documentation. See Defining Documentation Properties for
Model Components [Page 178].

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.

Data The available Data options vary, depending on field type.
Name Read-only.
Type Read-only.
Required? Indicates a mandatory field. Click to toggle the selection on and
off. If you designate a field as mandatory, it requires input at
runtime.
Zero Fill? 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 For numeric fields, used in conjunction with Max. Value to specify
a range of valid values, such as a date range.
Max. Value For numeric fields, used in conjunction with Min. Value to specify a
range of valid values, such as a date range.
Max. Length Maximum field length. Must be defined if Zero Fill is defined for the
field.
Link URL 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.
Action This option is available only when the selected field is a button
type. It defines the action launched by clicking the button.

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].
Display The Display options are available only for fields. They help define
how the fields are displayed in the iView.
Visible? Determines whether or not the field is hidden in the iView.
Disabled? The field is displayed in the iView, but is read only.
Label The field name, which can be any string.
Tooltip A tool tip for the selected field.
Design Provides various display options for the label, depending on the
selected field type.
Behavior Used to describe text fields that correspond to back-end
component fields. These fields relate to conditional expressions.
See Dynamic Expressions Editor [External].
Initialization 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*
Computation An expression showing how to calculate the value of the field, in
relation to or independent of other fields.
Example: @num1-@num2
Validation Indicates if the value in the field should be checked to ensure that
it is a valid input. Example: @@<Num1; 1..20
Formatting An expression that indicates the format in which the value in the
field is displayed. Example: ddmmyy

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]

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].
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-
tion
Descrip-
tion
Syntax Examples
DADD/
TADD
Increases/
decreases
a date/time
value by
the
specified
number of
date units.
DADD( dt , n, uni
t)
TADD
( t , n, unit)
where unit is
one of the
enumerations
listed in Table A
(following)
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).
DSTR/
TSTR
Converts a
date or
time object
format to a
defined text
string.
DSTR
( dt , mask)
DSTR ( t , mask)
where mask is
one of the
devised from the
set of special
characters listed
in Table B
(following)
DSTR(@DATE_FIELD,MON DD, YYYY)
Conver t s t he dat e val ue r et ur ned t o
a st r i ng dat e f or mat . f or exampl e,
30. 05. 2002 woul d be conver t ed t o
May 30, 2002.

DSTR(DADD(@CREATE_DATE,13,D),XML
_DATE
Usi ng t he DADD f unct i on, t hi s
expr essi on adds 13 days t o t he
r et ur ned dat e, and t hen conver t s
t he dat e f or mat t o t he XML st andar d
f or mat . For exampl e, 30. 05. 2002
woul d be conver t ed t o: 2002- 06- 12.
DGET
TGET
Returns the
numeric
value of the
selected
part of a
date or
time.
DGET( dt , part)
TGET( t , part)
where part is
one of the
enumerations
listed in Table C
(following)
DGET(@CREATE_DATE,M)
Ret ur ns onl y t he val ue of t he
speci f i ed t i me uni t f r omwi t hi n t he
dat e val ue. For exampl e, 30. 05. 2002
woul d r et ur n 5, whi l e 27. 02. 2004
woul d r et ur n 2.
NOW/
TNOW
Returns the
current
date or
time.
NOW( ) NOW()
See exampl e i n DSUB f ol l owi ng.
DSUB/
TSUB
Returns the
difference
between
two dates,
in the
specified
date unit.
DSUB( dt 1, dt 2,
unit)
TSUB
( t 1, t 2, unit)
where unit is
one of the
enumerations
listed in Table A
(following)

DSUB(NOW(),@CREATE_DATE,D)
Cal cul at es t he di f f er ence i n t he
t wo dat es, speci f i ed her e, i n days.
For exampl e, val ues of 16. 09. 2004
( t oday) and 05. 8. 2004 f or t hese t wo
f i el ds woul d r et ur n 39.
Func-
tion
Descrip-
tion
Syntax Examples
DVAL/
TVAL
Converts a
date or
time string
representat
ion to a
standard
date/time
object
format.
DVAL( st r , seq)
TVAL( st r , seq)
where seq is:
EUR
(DD/MM/YYY
Y HH:NN:SS)
USA
(MM/DD/YYY
Y HH:NN:SS)
XML (YYYY-
MM-
DDTHH:NN:S
S)
FREE (free
format)
DVAL(@TIME_FIELD,USA)
Conver t s t he dat e st r i ng r et ur ned
t o a st andar d f or mat . f or exampl e,
May 30, 2002 woul d be conver t ed t o
t he USA st andar d dat e f or mat :
05/ 30/ 2002.
.

Conditional Functions
Func-
tion
Descrip-
tion
Syntax Examples
IF Checks
whether a
specified
condition is
met. If it is,
returns the
first
specified
value;
otherwise,
returns the
second
specified
value.
I F( t ext , expr
1,
expr 2)
IF(@NET_PRICE>1000,Expensive,Che
ap)
I f t he expr essi on i n t he f i el d i s
TRUE ( t he val ue i s gr eat er t han
1000) , t he t ext Expensi ve i s
di spl ayed. I f t he expr essi on i s
FALSE ( t he val ue i s l ess t han
1000) , t he t ext Cheap i s di spl ayed.

IF(@@==DE,Germany,Other)
I f t he st r i ng DE i s r et ur ned, t he
t ext di spl ayed i n t he i Vi ew wi l l be
Germany. Ot her wi se, t he t ext wi l l
be Ot her .

IF(@BANK_CTRY==US,United States,
IF(BANK_CTRY==GB,England,IF(@BA
NK_
CTRY==IL,Israel,IF(@BANK_CTRY==
DE,
Germany,Other))))
A nest ed I F expr essi on def i ni ng
di spl ay t ext f or count r y names. I f
t he val e r et ur ned i s not US, GB, I L
or DE, t he t ext di spl ayed wi l l be
Ot her .
ISNUL
L
Returns
TRUE if a
reference
is to an
empty,
undefined
or null cell,
I SNULL( val ue
)
IF(ISNULL(@@),NO FAX NUMBER, @@)
I f t he val ue of t he cur r ent cel l i s
empt y, t he val ue di spl ayed i n t he
i Vi ew wi l l be NO FAX NUMBER;
ot her wi se, t he r et ur ned val ue wi l l
be di spl ayed.
Func-
tion
Descrip-
tion
Syntax Examples
otherwise,
returns
FALSE.
Other available Conditional functions: BOOL, NVL

Numeric Functions
Func-
tion
Descrip-
tion
Syntax Examples
NSTR Returns a
formatted
string
representin
g the
defined
number.
NSTR( n, mask)
wher e mask i s
a f or mat t ed
sequence
def i ned
accor di ng t o
Tabl e B
( f ol l owi ng)
NSTR(@@,B)
Di spl ays or hi des zer o/ bl ank
val ues. For exampl e, an empt y space
or a val ue of 0 woul d not be
di spl ayed.
NSTR(@SD_DOC,Z)
Di spl ays l eadi ng zer oes i n t he
f i el d val ue. For exampl e, i f t her e
ar e 10 char act er s i n t he st r i ng,
t he number 1432 woul d be di spl ayed
as 0000001432.

NSTR(@@,10.2)
Rounds of f a l ong deci mal out put t o
a t wo- pl ace deci mal val ue. For
exampl e, a val ue of 142. 3213762
woul d be di spl ayed as 142. 32.

NSTR(@TOTAL_PRICE,C)
Adds a comma separ at or t o val ues i n
t he t housands. For exampl e, a val ue
of 682328 woul d be di spl ayed as
682, 328.
AVG Returns
the
calculated
average
value
among a
specified
set of
values.
AVG( n2, n2) AVG(@EARNINGS_Q1,@EARNINGS_Q2,@EARN
INGS_Q3)
Di spl ays a val ue t hat i s t he
cal cul at ed aver age of t he t hr ee
val ues r et ur ned i n t hese cel l s.

Rel at ed or si mi l ar f unct i on: SUM
MAX Returns
the largest
value
among a
specified
set of
values.
MAX( n1, n2) MAX(EARNINGS_Q1,@EARNINGS_Q2)
Di spl ays t he l ar ger of t he val ues
of t he t wo cel l s.

Rel at ed or si mi l ar f unct i on: MI N
CEIL Rounds a
number
upward to
the nearest
integer or
CEI L( n, facto
r)
where factor
is the basis for
rounding off the
CEIL(@@,0.01)
Ret ur ns a number r ounded of f t o t he
next hi ghest mul t i pl e of 0. 01. For
exampl e, 6. 2468 woul d be r ounded of f
t o 6. 25.
Func-
tion
Descrip-
tion
Syntax Examples
multiple of
a defined
factor
number

Rel at ed or si mi l ar f unct i on: FLOOR
Other available Numeric functions: MAX, FLOAT, HEX, LIMIT and others

String Functions
Func-
tion
Descrip-
tion
Syntax Examples
UPPER/
LOWER
Converts
the returned
string to
upper case
or lower
case,
respectively.
UPPER( t ext )
LOWER( t ext )
UPPER(@@)
Di spl ays t he st r i ng i n
al l capi t al l et t er s; f or
exampl e: ATLAS.
LOWER(@COUNTRY_NAME)
Di spl ays t he st r i ng i n
al l l ower - case l et t er s;
f or exampl e: usa.
CAPITAL Converts
the first
word in the
string to a
capitalized
word.
CAPI TAL( t ext ) CAPITAL(@COMP_NAME)
Di spl ays t he st r i ng wi t h
t he f i r st wor d
capi t al i zed; f or exampl e:
At l as ci t y.

CAPITALW Converts
the string to
capitalized
words
(separated
by
underscores
or white
spaces.
CAPI TALW( t ext ) CAPITALW(@COMP_NAME)
Di spl ays each wor d i n t he
st r i ng as a capi t al i zed
name; f or exampl e: At l as
Ci t y.
RIGHT/
LEFT
Returns a
substring of
a specified
number of
characters,
starting from
the end of
the string
(RIGHT) or
beginning of
the string
(LEFT)
RI GHT( t ext , l en)
LEFT( t ext , l en)
RIGHT(@SHORT_TEXT,4)
Di spl ays t he l ast f our
char act er s of t he st r i ng.
For exampl e, a val ue of
FI NALCOST woul d be
di spl ayed as COST.
LEFT(@@,3)
Di spl ays t he f i r st t hr ee
char act er s of t he
r et ur ned st r i ng. For
exampl e, DOCUMENTATI ON
woul d be di spl ayed as
DOC.
MID Returns a
string
starting from
a specified
number of
characters
from the
MI D( t ext , st ar t , l en) MID(@SHORT_TEXT,5,3)
Di spl ays a subst r i ng
consi st i ng of t he f i f t h,
si xt h and sevent h
char act er of t he st r i ng.
For exampl e,
DOCUMENTATI ON woul d be
Func-
tion
Descrip-
tion
Syntax Examples
beginning of
the string
and
containing
the next
specified
number of
characters.
di spl ayed as MEN.

Rel at ed or si mi l ar
f unct i on: AT
TRIM Removes
the white
space from
both ends of
the string.
LTRIM
removes the
white space
only from
the left.
TRI M( t ext ) TRIM(@YEAR_TO_END)
Removes t he whi t e space
i n t he r et ur ned val ue.
For exampl e, t he val ue
ANNUAL TURNOVER
woul d be di spl ayed as
ANNUAL TURNOVER ( wi t hout
t he spaces at t he
begi nni ng and t he end) .
Rel at ed or si mi l ar
f unct i ons: COMPACT,
LTRI M, RTRI M
FILL Fills a string
of a given
length with
the
specified
(pad)
characters.
FI LL( l en, 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
+(Conca-
tenate)
Connects
two returned
values
(number or
text) in
order to
produce a
single,
continuous
text value.
NOTE that
only two
arguments
can be
concate-
nated.
( st r i ng) +( st r i ng) (@CITY_NAME)+(STATE_NAME)
Di spl ays t he r et ur ned
val ues of t he t wo f i el ds
as a si ngl e val ue. For
exampl e, i f t he val ues
DAYTON and OHI O ar e
r et ur ned f or t he t wo
f i el ds, t he val ue DAYTON
OHI O woul d be di spl ayed.
To concat enat e t wo
number s, use t he DSTR
f unct i on, as i n t hi s
exampl e: NSTR(@FIRST) +
NSTR (@SECOND). I n t hi s
exampl e, r et ur ned val ues
of 2 and 4 woul d
r esul t i n a val ue of 24
bei ng di spl ayed.
Other available String functions: LEN, LIKE, PREF and others

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

Table A: DATE_UNITS
An enumeration of date/time units used for date/time arithmetic operations
Code Date/Time Unit Milliseconds
Z Milliseconds 1
ms

S Seconds 1,000
ms

N Minutes 60,000
ms

H Hours 3,600,000
ms

D Days 86,400,000
ms

M Months 2,592,000,000
ms

Q Quarters 7,776,000,000
ms

Y Years 31,536,000,000
ms

C Centuries 3,153,600,.000,000
ms

Table B: Date/Time Mask
The date/time formatting mask uses the following syntax:

[dat e- par t embedded- char s]* speci al - f or mat

Mask Description
dat e- par t Listed in Table B following
embedded- char s Character codes other than those listed in the Table B
speci al - f or mat 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 D for D).

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

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

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

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.

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:
I F( @Of f i ce_Cnt r y=US, www. f l yi nghi gh_us. com ,
www. f l yi nghi gh_ap. com ) .
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.
Defining Eventing Between iViews
Use
You can create two iViews that communicate with each other on the same page, using client-
side 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).

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:

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.

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 Val i dat i on Compl et ed Successf ul l y.
...

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]
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 Ct r l + 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 Ct r l + 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 Ct r l + 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.

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.

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 Determines whether or not the view displays a title bar. If selected,
use the Title field to enter the title text.
Toolbar 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 Determines whether or not the view displays vertical scroll bars,
when needed.
Editable 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.
Navigable Determines whether or not the view displays standard navigation
buttons, for example: Next, Previous, First or Last.
Title Defines the text displayed in the title bar of the selected view.
Records Available when a table view is selected. It determines the number
of rows displayed in the table at one time.
URL Available when an HTML view is selected. It defines what is
retrieved and displayed in the HTML view.
Legend Position 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.
Color Scheme Available when a Chart view is selected. Click in the field to select a
color scheme from the context menu.

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.
List Computed Fields Displays computed or virtual fields; for example: a user
input field in an input form that is mapped to a data field.
List Static Controls Displays controls such as buttons and labels.
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]).

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.
Action 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.
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.
Link URL 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.
Tooltip Defines a tool tip for the selected control.
Disabled Indicates that the field is displayed in the iView, but is
inactive.
Required Indicates a mandatory field, meaning that it requires input
at runtime.
Wrapping 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.
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.
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 Button Description
Reposition selected
objects

Manually move the selected object or
objects by dragging the selection with
the mouse.
Resize selected objects

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.
Align selected objects

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
Distribute spacing

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
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:
Reposition selected
objects

Manually move the selected object or
objects by dragging the selection with
the mouse.
Resize selected objects

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.
Align selected objects

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
Distribute spacing

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.
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.
Send to back

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.
Resize to fit contents

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.
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.
Zoom in
Zoom out
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.

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.
Include definitions 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.
Include index Adds an index to the document.
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.

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.
Modified on 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.
Protocol 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.

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.
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. por t al . gui machi ne. por t al connect or . par file found in the
PORTAL- I NF folder.
2. Change the value of the allowOnProduction parameter to False (default is Tr ue). This
parameter is found in the following part of the file:
.
.
.
<command name=" par upl oad" t ype=" Command- Handl er "
handl er =" com. sap. por t al . gui machi ne. por t al connect or . CommandHandl e
r " >
<param name="allowOnProduction" value=" t r ue" / >
</ 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.
4. Select one of the following compiler options:
Delete entire existing model
first
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.
Include source in PAR files If selected, the Java source code generated when the
model is compiled will also be included in the PAR
file.
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.
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.

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.

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:

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

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.

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 ~ser ver . i ni file in the following folder:
I net pub\ wwwr oot \ SAP Net Weaver Vi sual Composer \ Ser ver .
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:
. . . \ i net pub\ wwwr oot \ SAP Net Weaver Vi sual Composer \ dat a\ ~expor t .
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].

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]
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.
Pointer tool

Standard pointer
Connector tool

Highlights the ports of all elements in the workspace
Shape edit tool

Enables you to move ports on a model component
Alignment tool

Displays two perpendicular lines for aligning elements in the
workspace
Text block tool

Adds a text block for writing notes (in design time only)
Painter tool

Paints the selected component with the color you select from
the palette
Zoom tool

Magnifies the element under an area you define by dragging
Hand tool

Moves the entire workspace with the cursor
High quality

Displays the elements in the workspace in high/low quality
Show table

Shows/hides the workspace grid
Show magnifier

Provides a magnifying glass for magnifying the part of an
element under the magnifying circle
Show shadow

Displays a shadow for each component in the workspace

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)
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.
Dimensions
(select
workspace grid)
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.
Stroke Color 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.
Symbol Position 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.

Troubleshooting

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

Situation Error
Message
Possible Problem Proposed Solution
Attempting
to establish
a
connection
with portal
Fai l ed t o
get
syst ems
l i st
vi sual composer . par
file has not been
deployed in the portal.
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.
Accessing
context-
sensitive
help in
Storyboard
Hel p i s
not
cur r ent l y
avai l abl e
Context-sensitive help
has not been installed on
the Storyboard server.
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. t xt file in the Help
installer . zi p package.
Trying to
access BI
Query
Wizard
BI Quer y
Wi zar d
not
avai l abl e
BI components may not
have been properly
installed.
See Chapter 2 of the SAP
NetWeaver Visual Composer
Installation Guide, accessed from
SAP Service Marketplace at
service.sap.com/instguides
SAP Components.

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].
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:
. . . i net pub\ wwwr oot \ SAP Net Weaver Vi sual Composer \ ser ver \ ~ser ver . i ni

The control file is as follows:
<%
var devmode = f al se, LogLevel = 0;
var SERVER_VI RTUAL_DI R = " VCSer ver " ;
var DATA_VI RTUAL_DI R = " VCDat a" ;

var GKB_URL = ' SERVER_URL/ ' +SERVER_VI RTUAL_DI R+' / ' ;
var RES_URL = ' SERVER_URL/ ' +SERVER_VI RTUAL_DI R+' / ' ;
var DOCS_URL = ' SERVER_URL/ ' +SERVER_VI RTUAL_DI R+' / docs/ ' ;
var DATA_URL = ' SERVER_URL/ ' +DATA_VI RTUAL_DI R+' / ' ;

var GKB_PATH = Ser ver . MapPat h( ' / ' +SERVER_VI RTUAL_DI R) +' \ \ ' ;
var RES_PATH = GKB_PATH+( devmode?' ' : ' r es\ \ ' ) ;
var DOCS_PATH = GKB_PATH+' docs\ \ ' ;
var DATA_PATH = Ser ver . MapPat h( ' / ' +DATA_VI RTUAL_DI R) +' \ \ ' ;

var SQL_PASSWORD = ' bRb9mf E=' ;
var SQL_CONN = ' DRI VER=SQL
Ser ver ; SERVER=MAZDA, 1433; DATABASE=VCDB; UI D=sa; PWD=$$PWD$$; ' ;

/ / l og l evel s: 3 - None, 2 - Er r or s, 1 - War ni ngs, 0 - I nf or mat i on

%>

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\ . . . \ j 2ee\ cl ust er \ ser ver \ manager s\ consol e_l ogs
On servers with Enterprise Portal running on SAP NetWeaver 2004, a number of log
files are located in the following path:
usr \ sap\ QP3\ . . . \ j 2ee\ cl ust er \ ser ver \ l og
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.

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]
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* i n t he Name f i el d.
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.
4. Define the input:
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 i s val i d! 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:

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.
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:
[Page 49]).
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* i n t he Name f i el d.
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.
b. Double-click Bank Address Form and select the following fields to display in the
iView: BANK_NAME, BANK_NO, CITY, REGION and STREET.
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 Ct r l . 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.

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

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

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.
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:
[Page 49]).
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* i n t he Name f i el d.
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.
3. Define the input:
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, double-
click 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. Under the list in the Fields task panel, click Add. The Add New Field
dialog box is displayed.
ii. 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).
iii. In the Label field in the Display set of properties below, change the field
label to Order Size and press Ent er . You can go to the Layout
workspace and see the newly-added field in the table.
iv. Go back to the Design workspace, right-click the table, and from the
context menu, select Dynamic Expressions. The Expressions Editor is
displayed.
v. Place the cursor in the Computation column of the Order_Size row and
click Assistant.
vi. 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)
vii. Use that formula to enter the following:
IF(@REF_QTY*@NET_PRICE>100000,@REF_QTY*@NET_PRICE,'Sma
ll')
Press Ent er .

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. Click Close to enter the dynamic expression in the ORDER_SIZE field of
the table.
ix. Save the model.
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 Ct r l key), and
select Long Label from the Available Styles list.
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.

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:

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: Sal es and Di st r i but i on
Over vi ewwith the Or der and sal es val ues query activated (technical name:
0D_SD_C03/ 0D_SD_C03_Q009) and configured to connect via the BI XMLA Connector in
the portal landscape.

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.
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 Checked? Type Value
Top rank type Yes Count 3
Bottom rank type Yes Count 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 Value
Dimension Division
Hierarchy Division
Level Division Level 01
According to measure 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:

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

Uploaded by

Copyright:

Available Formats

You might also like

Sap Netweaver Visual Composer: User Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sap Netweaver Visual Composer: User Guide

Uploaded by

Copyright:

Available Formats

SAP NetWeaver Visual Composer r el eas e 6.

You might also like