Top Banner
Veteran's Guide Visual Composer for SAP NetWeaver 7.3 Document Version 2.00 March 2011 SAP NetWeaver 7.3
25

Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Mar 31, 2018

Download

Documents

hatram
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Veteran's Guide

Visual Composer for

SAP NetWeaver 7.3

Document Version 2.00 – March 2011 SAP NetWeaver 7.3

Page 2: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

© Copyright 2011 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.

Disclaimer Some components of this product are based on Java™. Any

code change in these components may cause unpredictable and

severe malfunctions and is therefore expressively prohibited, as

is any decompilation of these components.

Any Java™ Source Code delivered with this product is only to

be used by SAP’s Support Services and may not be modified or

altered in any way.

Page 3: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Typographic Conventions

Type Style Represents

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

Example text Emphasized words or phrases in

body text, graphic titles, and

table titles.

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

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

Example text Exact user entry. These are

words or characters that you

enter in the system exactly as

they appear in the

documentation.

<Example text> Variable user entry. Angle

brackets indicate that you

replace these words and

characters with appropriate

entries to make entries in the

system.

EXAMPLE TEXT Keys on the keyboard, for

example, F2 or ENTER.

Icons Icon Meaning

Caution

Example

Note / Tip

Recommendation

Syntax

Page 4: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Contents

VISUAL COMPOSER VETERAN'S GUIDE ....................................................................... 5

1 Componentization ........................................................................................................................ 6

1.1 What is a Visual Composer Component? ................................................................................... 6

1.2 Components in Action ................................................................................................................ 7

1.2.1 Create a New Model .......................................................................................................... 7

1.2.2 Reuse Another Component in Your Model ....................................................................... 8

1.2.3 Concept of "Model" versus "Session" ............................................................................... 9

1.2.4 Export and Import ........................................................................................................... 10

2 Source Control ............................................................................................................................ 12

3 Deploy Environment ................................................................................................................... 13

4 The New Modeling Flow ............................................................................................................. 15

5 Where Is the . . . ? ....................................................................................................................... 18

6 How Do I . . .? ............................................................................................................................. 20

7 Did You Know That . . .? .............................................................................................................. 23

8 Tips for Rebuilding Models ......................................................................................................... 24

9 Related Content ......................................................................................................................... 25

Page 5: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Visual Composer Veteran's Guide

Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous

versions of the modeling tool. It has undergone major revisions both in functionality and in

usability. With these major changes in mind, this guide was designed to assist modelers familiar with

Visual Composer for SAP NetWeaver 7.0 (SAP NetWeaver 2004s) in learning to model

with Visual Composer 7.3. You "Visual Composer veterans" can use this guide to understand

the underlying technological changes between the versions and how they have affected

functional implementation.

How to Use this Guide Take the time to carefully read the first chapter of this guide: Componentization [Page

6]. This section describes the major underlying concepts that have driven many of the

enhancements in Visual Composer. The next two chapters – Source Control [Page 12] and Deploy Environment [Page 13]

– describe enhancements and changes implemented in Visual Composer. The New Modeling Flow [Page 15] section describes new functionality, such as support for

clustered data and changes in managing data. It also compares the previous modeling

flow and that in Visual Composer 7.3. Chapters 5, 6 and 7 have been designed to take you straight to potential sources

of confusion:

● Where is the . . . ? [Page 18] tells you where to find familiar items and dialog boxes

that have been "relocated" in Visual Composer 7.3.

● How Do I . . .? [Page 20] explains how to perform tasks that have been redesigned in

Visual Composer 7.3.

● Did You Know that . . .? [Page 23] points out new or changed functions that you may

not be aware of.

Finally, the Tips for Rebuilding Models [Page 24] section provides information to keep in mind

when preparing models created in Visual Composer for SAP NetWeaver 7.0, for use with the

new environment.

Constraints This guide covers changes in functionality and does not list functions and items that may

not be included in Visual Composer 7.3. For more information, see the Limitations Note for

Visual Composer for 7.3.

Page 6: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

1 Componentization The models that you create in Visual Composer 7.3 are single, reusable components.

Components are self-contained modeling entities: either full or partial composite views, or

service components. Components can be reused in other models. A model can contain references to other components, rather than actually embedding them. In this manner, both

model maintenance and modeling efficiency are significantly streamlined. Through the use

of components, modelers can leverage these same reusable assets in the design of other

models with little or no modification necessary. Models and Components

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Models can contain packages and multiple Each model represents a single iViews – both separate and embedded one component. Embedding is implemented within the other. simply by inserting a reference to another

component. For detailed information, see:

● What is a Visual Composer Component? [Page 6]

● Components in Action [Page 7]

1.1 What is a Visual Composer Component? For Visual Composer, a component can be described as a basic unit of modularity,

reusability and execution that has:

● An internal domain-specific implementation

● A well-defined external interface

● Known dependencies from/to other components

● A version (for interface and implementation) The use of standardized components in Visual Composer enables modelers to integrate

components created in Storyboard and in other technologies ("black-box" components) into

their models. This empowers Visual Composer modelers to create comprehensive

composite applications. Types of components that can be integrated into Visual Composer

models will include:

● Other components modeled in Visual Composer

● Web Dynpro components

● Data services: Web services, Enterprise services, CAF services, RFCs, BAPIs, JDBC,

BI

● BPM processes

Page 7: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

1.2 Components in Action When comparing the Visual Composer 7.3 Storyboard with that of Visual Composer for

NetWeaver 7.0, note that the following changes have been implemented to

accommodate componentization:

● Create a New Model [Page 7]

● Reuse Another Component in your Model [Page 8]

● Concept of "Model" versus "Session" [Page 9]

● Export and Import [Page 10] For more information about componentization, see:

● Concepts [External] in Modeling Composite Views with Visual Composer

● Reusing Components [External] in Modeling Composite Views with Visual Composer

1.2.1 Create a New Model When you create a new model in the Create New Model dialog box, you indicate the type of

component that you are creating. Then you store it in a development component either

locally or within your source-control system.

In the basic version of Visual Composer 7.3, you can create one of two types of

components:

● A composite view: similar to the iView in Visual Composer for NetWeaver 7.0

● A service component: a complex data service of some kind

Page 8: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Depending on other kits loaded with Visual Composer – such as Voice or BI –

additional component types are added to the list. Model/Component Types

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

None ● Composite view

● Service component

1.2.2 Reuse Another Component in Your Model In Visual Composer for NetWeaver 7.0, a nested iView or other embedded component is an

integral part of the model itself and cannot be reused by other models. In Visual Composer

7.3, "embedding" a model simply means creating a reference to an external component

stored within the same source-control system. Reused components are usually defined as a

nested view or a navigate-to component.

● To reuse an existing component, you use the Search task panel in the manner that you

use the Find Data task panel in Visual Composer for NetWeaver 7.0, but you Search in the Visual Composer Models repository for Type Model.

● To create a new component for use as a nested view or navigate-to component, you

drag the relevant icon (view or connector) to the Design board and create the new

component from the standard Create New Model dialog box.

Page 9: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Reuse Another Component in Your Model

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

No "reuse" per se. You can create a nested Reuse of components within the same

iView that is used only within the single model. development component. You can create a

A navigate (Web Dynpro) or popup (Flash) nested view or navigate-to view from within

iView is also created solely within the same a component, saving it as a standalone

model. component, or you can create it separately.

It is referenced from the other component

and when opened (double-clicked), a tab

for that component is opened.

Eventing can be defined between standalone With componentization, the concepts of

iViews on a portal page. iViews and portal page are not relevant.

1.2.3 Concept of "Model" versus "Session" In Visual Composer for NetWeaver 7.0, you can have only one model open in a single

session. If you open a second model, the previously-opened model is closed (after

prompting to save if needed). However, remember that a single model can contain multiple

pages and iViews. In Visual Composer 7.3, on the other hand, you can open as many components as needed in

a single session. These are indicated by tabs at the top of the workspace (previously

dedicated to Design, Layout and Source tabs). These individual components may be fully

independent, or may in some cases be the result of "opening" a component that has been

reused in one of the other component. Model versus Session

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Only one model can be open at a time. In a single session, you can have any Opening a different model prompts you to save number of open models (components). and close the presently-open model. Each component is indicated by a tab.

A single model can contain any number of A single model represents a single pages (with iViews) and other iViews. component.

In Visual Composer 7.3, your "top-level" element is the actual component, or

view. The Drill-down option is available only with reused components (popups

and nested iViews) and is used to "open" the model in its own tab.

Page 10: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

In this example, three components (models) are open in this Visual Composer session, each

indicated by a tab. In the displayed Test1 model, the Deploytest component has been used

as a nested view. To view its contents, you would click the Deploytest tab. Each of these three components can be used by itself and reused in other components.

To reuse another component, you may need to create an input port within the

component, which serves as the interface to the "outside world." This creates

an external "plug" that is added to the icon and enables you to connect from an

element in your open component to that reused component (in our example, the

plug is called in2). To create the input port:

i. Open the tab of the reused component and create the port with a

Signal in connector.

ii. Back in the referencing component, right-click the icon of the reused

component (Deploytest in this example) and choose Redefine Ports from

the context menu. All components in the Visual Composer Models Library are handled as separate entities in

all respects. The dependencies created through reuse between components are managed

throughout the lifecycle – build, change management, upgrade and so on – of the

components.

1.2.4 Export and Import In Visual Composer 7.0, you can export a model as a .gml file to any location on your

computer or in your computer network. You can import a previously-exported file into

your open model, with the option of integrating the model diagram that is currently open. In Visual Composer 7.3, when you export a model (component), you package it as a .zip

file and save it at any location in your local or network file system.

Page 11: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Note that you can only export models from the local repository (not from

the shared repository). In addition, the model to be exported cannot have

any dependencies on components in the shared repository, such as nested

components. Importing a previously-exported model saves the .zip file in the same development

component from which it was exported. However, it does not import it into an open

model, because it is a separate component. Export and Import

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

You export a model as a .gml to any location You export a local model as a .zip file to

in your computer network. any location in your computer network.

You import a previously-exported file into your When you import a model, you basically

open model, and choose to integrate it directly move the previously-exported .zip file

into the open diagram or save it separately

back to the development component from

within the model. which it was exported.

Page 12: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

2 Source Control As part of the Composition Environment, Visual Composer modelers can take advantage of

version control by storing models in the NWDI Design-Time Repository (DTR) or in other

source-control systems (not yet available). In cases where none of these options is

implemented, Visual Composer 7.3 provides a rudimentary shared repository that enables

basic functionality such as check-in, check-out and revert. Source Control

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

No version control available. Two types of source control available:

Workspace for saving models is divided as ● DTR

follows:

● Rudimentary system with basic

● MyModels folder contains models

versioning functionality. Workspaces

created in each modeler's dedicated are divided in a manner similar to

client workspace.

Visual Composer for NetWeaver 7.0,

● Public folder includes models created with a Shared Repository and a

Local Repository.

for general use by all users.

The Manage Models dialog box is used in Visual Composer 7.3 to handle the models

stored both locally and in the source control system. You can use it to check models in

and out, revert to previous versions and perform file sync where supported.

For more information, see: Working with Source Control [External].

Page 13: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

3 Deploy Environment

Portal and Web Dynpro Whereas Visual Composer for NetWeaver 7.0 is mainly a tool for modeling iViews for SAP

NetWeaver portal, Visual Composer 7.3 is designed for creation of Web Dynpro-based

composite applications. As such, in Visual Composer 7.3, the Web Dynpro foundation is

the main runtime UI technology. It enables Visual Composer users to render models to both

to Web Dynpro HTML and Web Dynpro Flex. Portal and Web Dynpro

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Access to back-end systems via the portal Direct access to back-end systems (using system aliases)

Deploy to and run in portal Currently, no deploy-to-portal option. Can deploy to Web Dynpro application either directly (hot deployment) or through the nightly build.

User Management and Role Definition In Visual Composer for NetWeaver 7.0, user management is carried out according to

standard portal user management procedures. During installation, a predefined role – VC

Role – is deployed in the portal as part of the initial Visual Composer content, allowing users

to perform modeling tasks in Visual Composer Storyboard. The role includes full permissions

for the Visual Composer folder in the portal. Additionally, each user should be assigned

read permissions in order to access data services located on the back-end system accessed

through the portal. In Visual Composer 7.3, all user management and role definition is carried out in the

NetWeaver Administrator running on the SAP NetWeaver Application Server, Java EE 5. User Management

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

User management according to portal User management according to NWA on procedures portal platform

Creation of VC Role for all Visual Composer Permissions according to portal roles modelers

Deploy and Run Options In Visual Composer for NetWeaver 7.0, models can be deployed to Adobe Flex 1.x. Visual

Composer 7.3 enables deployment to Flex 2.0 (via Web Dynpro) and on a range of browsers,

including Microsoft Internet Explorer, Netscape Navigator and Mozilla Firefox. Deploy Options

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Deploy to and run in portal No deploy-to-portal option. Can deploy to Web Dynpro application

Page 14: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Deploy directly to Adobe Flex 1.5 or Adobe Flex 2 or to Web Dynpro

Deploy to Web Dynpro HTML or to Web Dynpro Flex 2.0

Hot deployment (direct to runtime) only Two build types:

● Hot deployment

● Nightly build (onto source-control system)

Page 15: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

4 The New Modeling Flow Visual Composer 7.3 includes a number of new features that enhance the modeling

workflow and make it more intuitive. One of the prime differences from Visual Composer

for NetWeaver 7.0 is the manner in which you compose, configure and lay out the model

elements. This is based on the following changes:

● New concept of binding controls to fields: implemented in defining fields for display

and in composing/configuring controls Whereas in Visual Composer for NetWeaver 7.0, fields selected for display were

automatically "assigned" an appropriate control, in Visual Composer 7.3, you need to

bind a control to a selected field in order to have the field visible in the UI. For more

information, see "Controls and Fields" in the Visual Composer Concepts [External]

section of the Modeling Composite Applications with Visual Composer manual.

"Visible" Fields

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

To make a field visible in the UI, enter a To make a field visible in the UI,

checkmark in the column with the eyeglasses open the Define Data dialog box.

header ( ). Enter a checkmark in the column

with the eyeglasses header ( ) to

bind the field to a control, displayed

in the Control column. (You can

select other controls from the

dropdown list in that column, as

needed.)

● Support for clustered data (nested tables)

Visual Composer 7.3 supports data received in clusters, which is the standard in Web

services. Clustered data is data that is structured in a hierarchy. When mapping data

from clustered data sources and to clustered data targets, you choose the node(s) that

are the source of the data and map to the nodes that represent the target(s) of the

mapping.

● New means for defining, mapping and initializing data

Based on the enhancements described in the previous two bullets, a new set of dialog

boxes has been created for defining field-control combinations and for mapping the

data between two elements, in both "flat" and clustered datasets. For more

information, see the Mapping Data [External] section of the Modeling Composite

Applications with Visual Composer manual.

Page 16: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

To define or map data, select the model element and choose the appropriate

option (Define Data or Map Data) from the context menu. Compose and Configure a Model

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Design and Layout "tabs" are now at the bottom-left of the boards.

1. In the Find Data task panel, search for and 1. In the Search task panel, search for drag data services onto the Design board. and drag data services onto the Design

board. You can also use the Visual Composer Models repository to search for and reference components in your model.

2. From the Compose task panel, drag the 2. From the Compose task panel, drag model elements onto the Design board, or the model elements onto the Design drag out from the data services to connect board, or drag out from the data them. services to connect them.

3. Map the fields from one element to the 3. For each UI element, you can define other by double-clicking the connecting line the fields and their bound controls by and using the field mapping table in the choosing the Define Data option in the Configure task panel. context menu of the item. Use the Map

Data option in the context menu to define the data flow of connecting lines.

Page 17: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

Configure and Lay Out the UI

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Use the Layout board for configuring and laying out the UI.

Layout of elements – including controls within each UI element – is "free", according to the Auto (Absolute) default. Other options are Horizontal and Vertical.

Layout of elements is presently restricted to Horizontal flow and Vertical flow. The Absolute positioning option is not available. For laying out controls, you can use the Columns field in the Configure task panel to organize the controls in any number of columns. For full information, see Defining Layout Options [External] in the Modeling Composite Views with Visual Composer manual.

1. To define controls for a UI element, click on its edge and use the table at the bottom of the Configure task panel to create new controls and determine their visibility.

2. To configure the attributes of a control, use the Control Properties dialog box.

1. To define controls for a view, drag controls from the Compose task panel onto the view.

2. To configure the attributes of a control, select it and use the Configure task panel. The grouping of the options in the task panel is, in general, similar to the tabs of the Control Properties dialog box.

Page 18: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

5 Where Is the . . . ? A number of standard and familiar functions in Visual Composer for NetWeaver 7.0 have

been revamped and moved to different locations in Visual Composer 7.3. This section tells

you where to find them.

. . . Find Data Task Panel Use the Search task panel.

With the integration of Visual Composer into an SOA architecture – along with the

implementation of source control and componentization – you can discover a range of

different data services and components for your model. As such, the task panel functionality

has been significantly expanded. For more information, see Discovering Data Services

[External] in the Modeling Composite Views with Visual Composer manual.

. . . List of Fields in Configure Task Panel The list of fields used for mapping or defining controls in Visual Composer for NetWeaver

7.0 is now available as follows: Field Lists

Type of List Visual Composer for Visual Composer 7.3

NetWeaver 7.0

Field - Control (or Column - Configure task panel Define Data dialog box Control), for UI elements Right-click UI element and

choose Define Data.

Mapping of Input Field and Configure task panel Map Data dialog box Assigned Value, for data flow Right-click connecting line Lines and choose Map Data.

Input Fields and Output Fields Configure task panel Not available of data services Data services are

generally considered "black components" and as such, their contents are not displayable.

Initialization values for None Define Data dialog box Start/End points, Signal Right-click element, In/Out, User Data, Data Store, choose Define Data and DataIn/DataOut click the Initialize Data

( ) toolbar button

. . . Control Properties Dialog Box Go to the Layout board, click the control and open the Configure task panel. Remember, in Visual Composer 7.3, you define controls from the Compose task panel and configure them in the Configure task panel. For more background, see Adding Controls [External] and Configuring Controls [External] in the Modeling Composite Views with Visual

Composer manual.

Page 19: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

. . . Create Toolbar Option The Create Toolbar context-menu option has been replaced in Visual Composer 7.3 with the

Show toolbar checkbox in the Configure task panel, when the UI element is selected. To

create buttons for the toolbar, switch to the Layout board and the Compose task panel, and

drag the relevant controls to the toolbar area. This method replaces defining buttons in the

Create Toolbar Buttons dialog box.

Page 20: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

6 How Do I . . .? A number of standard and familiar Visual Composer for NetWeaver 7.0 functions have been

revamped and are implemented differently in Visual Composer 7.3. This section tells you

how to perform them.

. . . Map Fields To map data between a UI element and a data service, in which the datasets are "flat" (not

clustered):

1. Right-click the connecting line and choose Map Data… from the context menu. The

Map Data dialog box is displayed:

2. In the Assigned Value column, enter the field name, value or dynamic expression that

represents the value that is output by the element to the Target Input Field of the

other element (such as the data service). To map from or to clustered datasets:

1. Right-click the connecting line and choose Map Data… from the context menu. A

special Map Data dialog box is displayed:

Page 21: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

2. Expand the tree at the left to display the source nodes to be mapped. Do the same for

the target nodes at the right.

3. Drag from each source node that you need on the left, to the corresponding source

node on the right.

4. Select each field from the right hierarchy whose mapping values you want to define

and in the Assigned Value column in the table at the bottom, define the appropriate

mapping value.

. . . Add a Control to a View After adding the view to the logical flow on the Design board:

1. Switch to the Layout board and open the Compose task panel.

2. Choose the control that you need and drag it onto the view.

Note that by default, each control is placed automatically under existing controls

in a vertical position (Vertical flow). Absolute positioning is presently not

available.

. . . Define an Action

1. On the Layout board, select the relevant control and open the Configure task panel.

2. In the Action field, click the ellipsis (…) on the right. (Alternatively, you can right-click

the control on the Layout board and choose Action… from the context menu.) The

Define Action dialog box is displayed.

3. Click the Add Action (+) button to create a predefined or custom action and enter the

relevant properties at the right.

Page 22: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

. . . Define an Entry List

1. On the Layout board, select the relevant control and open the Configure task panel.

2. In the Entry list field, click the ellipses (…) on the right. (Alternatively, you can right-click

the control on the Layout board and choose Entry List… from the context menu.) The

Entry List Wizard is displayed.

3. On the first screen, select the type of entry list and click Next. The subsequent screens will

walk you through the creation of the entry list you require.

. . . Add an Image to a View Presently, this option relates only to images defined by a URL or from the standard Web

Dynpro collection. On the Layout board, drag the Image icon from the Compose task panel.

Then change to the Configure task panel and in the URL field, click the ellipses (…) on the

right (Alternatively, you can right-click the control on the Layout board and choose Browse…

from the context menu.). The Browse Images dialog box is displayed. For more information,

see Defining Images [external] in the Modeling Composite Views with Visual Composer

manual.

Page 23: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

7 Did You Know That . . .?

● You can right-click a control to change its type

On the Layout board, right-click the control whose type you want to change and choose

Change Control Type → <New Control> from the context menu, where <New Control>

represents the type of control you want to change to. The list of available controls

depends on the current view element, the current control type, and the type of the field

that is bound to the control.

● Creating containers – such as tabbed dialog boxes and wizards – is more

intuitive and direct in Visual Composer 7.3 In Visual Composer 7.3, you start with the actual container and create the layers

within it, rather than building the containers from single layers. Creating transitions is

automated and intuitive as well. The following table describes the changes and

availability of layers/containers between the two Visual Composer versions.

Layers and Containers

Visual Composer for NetWeaver 7.0 Visual Composer 7.3

Wizard Wizard

Tabstrip Tabstrip

Link list None

Link tree None

Accordion None

Standard layers (such as toggle) View switch

(Popup view) Popup container with nested view

For more information, see Containers [External] in the Modeling Composite Views with

Visual Composer manual.

● You can use classifications to search in the SAP service registry for enterprise

services Selecting one or more classification category narrows your search for the enterprise-

service operation(s) that you need. For more information, see Discovering Data

Services [External] in the Modeling Composite Views with Visual Composer manual.

● The Model menu in Visual Composer 7.3 contains a list of recently-opened

models. To change the number of models displayed in the menu, use the Number of

recent models to display option in the Model group of the Tools → Options list.

Page 24: Visual Composer for SAP NetWeaver 7 - archive.sap.com Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions

8 Tips for Rebuilding Models This section contains items to consider when modeling components in Visual Composer

7.3, based on applications modeled in Visual Composer for NetWeaver 7.0. The need for

certain workarounds required in Visual Composer for NetWeaver 7.0 has been eliminated in

Visual Composer 7.3, based on componentization and redefinition of containers. The following points are tips that you should review and are not ordered according to

any required sequence.

● Use the Search task panel to rediscover data services, including Web services,

enterprise services and possibly other components. What were imported as "flat"

Web services in NetWeaver 7.0 will now probably be clustered. For mapping and

other information, see The New Modeling Flow [Page 15] and How Do I . . .? [Page

20] in this document.

● If you created hyperlinks to other applications, recreate them in your new model.

● For each element in your original model, you will need to list the virtual fields that were

used. In Visual Composer 7.3, redefine the fields and link each one to the appropriate

control. For more information, see The New Modeling Flow [Page 15].

● You need to recreate popup windows that were created separately and defined by a

Popup Signal in Visual Composer for NetWeaver 7.0. To do so, use the Popup

container:

○ If the contents of the popup are fairly basic, use can define the view directly

within the container.

○ If the contents are complex, use a Nested View inside the Popup container.

For full information about creating popups, see the Defining Popups [External] section

in the Modeling Composite Applications with Visual Composer manual.

● When redefining popups in Visual Composer 7.3, you map data to/from the popup

using the Map Data option from the context menu for each connecting line, rather than

the two tables used in Visual Composer for NetWeaver 7.0.

● If you used eventing in your original model, be aware that the concept of eventing

between iViews has changed, due in part to componentization. In Visual Composer

7.3, each component that you model can be reused elsewhere, and referenced in a

different model. Therefore, two views can be "linked" in a single application by defining

matching in and out signals as needed.