VC 60 UserGuide v1 1

SAP NetWeaver Visual Composer re lease 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.

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

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.

SAPApps JDBC Non SAP

WebServices

Runtime Connectivity

SAP Enterprise Portal

Web Browsers / Clients

SAP NetWeaver Visual Composer

Pages / iViews

Data

MetadataD

esi g

n Ti

me

Con

nect

i vity

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

MainMenuMain

Toolbar

TabbedWorkspace

WorkspaceToolbox

ConnectionBlock

TaskPanelToolbar

TaskPanel

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 Help is not currently available message, the Visual Composer online help package has probably not been installed. It needs to be downloaded from the NetWeaver 04 Help portal (at help.sap.com\nw04) to the Storyboard server. This must be done by the Storyboard server administrator. Instructions for running the Help installer are found in the Readme.txt file in the Help installer .zip package.



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 Enter. In the Layout workspace, the field label is updated.

5. Having lengthened the label text, you need to adjust the layout to accommodate the longer label. From the Available Styles list, select Long Label. Do the same for the Max_Rows field.

6. In the form itself, select and move the fields, and adjust the Submit button accordingly.

To move the three elements at once, click the Bank Country field and then press Ctrl when selecting the Max Rows field and the Submit button. Once all items are selected, you can move them together.

7. Click in the title bar of Bank List Table to select it.

8. On the Controls tab in the Designer task panel, deselect the Bank_Key checkbox to remove the Bank Key column from the Bank List table, as shown in the following figure.



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 \inetpub\wwwroot\Visual Composer\data. Each model is saved in a subfolder with the same name as the model.

See:

Creating a New Model [Page 33] Opening an Existing Model [Page 33] Navigating the Model [Page 34] Rearranging the Model Hierarchy [Page 39] Saving a Model [Page 39] Exporting and Importing a Model [Page 40] Printing a Model [Page 41] Managing Models [Page 42] Closing a Model [Page 42] Closing Storyboard [Page 42]



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: . . . \inetpub\wwwroot\SAP NetWeaver Visual Composer\data\~export.

7. You can copy this folder to another location on your computer, as needed.

To import an exported model: ...

1. From a new or existing model, choose Tools Export/Import. The Export/Import dialog box appears.

2. In the Look in field, choose the path of the Storyboard from which you want to import the model.

3. From the list, choose the name of the file; its name will be displayed in the File field.

4. If the model is password-protected, type the password in the Password field.

5. Click Import.



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

VC 60 UserGuide v1 1

Documents

Transcript of VC 60 UserGuide v1 1