Sappress NetWeaver Visual Composer

099.book Seite 3 Montag, 9.
Oktober 2006 2:45 14
Carsten Bönnen, Mario Herger
SAP NetWeaver™ Visual Composer
Bonn 폷 Boston
099.book Seite 5 Montag, 9. Oktober 2006 2:45 14
Contents at a Glance
Foreword ................................................................. 13
1 Introduction ............................................................ 17
2 SAP NetWeaver Visual Composer .......................... 25
3 Model-Driven Development ................................... 55
4 Architecture and Concepts ..................................... 67
5 Visual Composer Basics .......................................... 91
6 Building Applications ............................................. 179
7 Analytical Applications ........................................... 279
8 Application Lifecycle ............................................... 399
9 Business Examples ................................................. 427
10 Visual Composer and Enterprise SOA .................... 435
A Modeling and Tips .................................................. 441
B Coding for Integration Examples ............................ 463
C The Authors ............................................................ 513
Index ....................................................................... 515

Contents
Foreword ................................................................................... 13
1 Introduction ............................................................ 17
2 SAP NetWeaver Visual Composer ........................... 25

2.1 SAP NetWeaver ......................................................... 26
2.2 Building Applications for SAP NetWeaver .................. 29
2.3 A Model-Driven Tool ................................................. 31
2.3.1 From Business Analyst to Business
Process Expert ............................................... 32
2.3.2 Freestyle Models ........................................... 34
2.3.3 SAP’s UI Strategy .......................................... 38
2.3.4 Benefits of SAP NetWeaver Visual
Composer ..................................................... 40
2.4 Visual Composer Today ............................................. 42
2.4.1 SAP Visual Composer for NetWeaver
2004s ........................................................... 42
2.4.2 SAP Visual Composer 6.0 .............................. 49
3 Model-Driven Development ................................... 55

3.1 Basics ........................................................................ 56
3.2 Model-to-Code Approach .......................................... 58
3.3 Model-Driven Development Within SAP ................... 59
3.3.1 SAP NetWeaver Business Intelligence ............ 60
3.3.2 Web Dynpro ................................................. 60
3.3.3 SAP Composite Application Framework ........ 61
3.3.4 Comparison Matrix ....................................... 61
3.4 Visual Composer as Visual Modeling Tool .................. 62
3.5 Parting Thoughts ....................................................... 64
4 Architecture and Concepts ...................................... 67

4.1 Architecture of SAP Visual Composer for
NetWeaver 2004s ...................................................... 68
4.1.1 Visual Composer Storyboard ......................... 69
4.1.2 Visual Composer Server ................................. 75
4.1.3 SAP NetWeaver Portal .................................. 80
7
Contents
4.1.4 Web Browser ............................................... 84

4.1.5 Summary ...................................................... 84
4.2 Visual Composer within the SAP NetWeaver
Development Infrastructure ...................................... 86
4.3 How to Choose the Right Modeling Tool .................. 87
4.3.1 SAP Composite Application Framework ........ 88
4.3.2 Guided Procedures ....................................... 89
4.3.3 Business Process Modeling ........................... 89
4.3.4 SAP Business Explorer Suite .......................... 90
5 Visual Composer Basics .......................................... 91

5.1 Visual Composer Storyboard ..................................... 93
5.1.1 Main Menu .................................................. 94
5.1.2 Main Toolbar ............................................... 116
5.1.3 Task Panel and Task Panel Toolbar ............... 117
5.1.4 Board Toolbox .............................................. 122
5.1.5 Navigation Bar ............................................. 123
5.1.6 Console ........................................................ 124
5.2 Composing a Model .................................................. 125
5.2.1 Components ................................................. 126
5.2.2 Connectors ................................................... 132
5.2.3 Operators ..................................................... 136
5.2.4 Additional Operators .................................... 139
5.3 UI Controls ............................................................... 142
5.3.1 Bulleted List ................................................. 143
5.3.2 Calendar ....................................................... 144
5.3.3 Checkbox ..................................................... 145
5.3.4 Clock ............................................................ 146
5.3.5 Combo Box .................................................. 147
5.3.6 Date Picker .................................................. 148
5.3.7 Drop-Down List ........................................... 149
5.3.8 Expression Box ............................................. 150
5.3.9 Gauge .......................................................... 151
5.3.10 HSlider ......................................................... 152
5.3.11 HTML Text ................................................... 153
5.3.12 Image ........................................................... 154
5.3.13 Input Field ................................................... 155
5.3.14 List Box ........................................................ 156
5.3.15 Numbered List ............................................. 157
5.3.16 Plain Text ..................................................... 157
5.3.17 Progress Bar ................................................. 158
8
Contents
5.3.18 Pushbutton ................................................... 159

5.3.19 Radio Group ................................................. 160
5.3.20 Spinner ......................................................... 161
5.3.21 Text Editor .................................................... 162
5.3.22 Ticker ............................................................ 163
5.3.23 Toggle Button ............................................... 164
5.3.24 VSlider .......................................................... 165
5.4 Expression Editor ....................................................... 166
6 Building Applications .............................................. 179

6.1 Getting Started—The Basic Model ............................. 179
6.2 Transactional Applications—Accessing ERP from
Visual Composer ........................................................ 181
6.2.1 The First Application ..................................... 182
6.2.2 Adding More Complex Data Services ............ 192
6.2.3 Adding Toolbars, Popups, and Charts ............ 205
6.2.4 Adding Layers ............................................... 215
6.2.5 Working with Data Stores and Visibility
Conditions .................................................... 221
6.2.6 Adding a Wizard ........................................... 227
6.2.7 Eventing in Visual Composer ......................... 251
6.3 Accessing Web Services ............................................. 259
7 Analytical Applications ........................................... 279

7.1 BI Kit Connections ..................................................... 279
7.1.1 SAP NetWeaver BI ........................................ 281
7.1.2 SAP Query .................................................... 282
7.1.3 JDBC ............................................................. 283
7.1.4 XMLA ........................................................... 285
7.1.5 ODBO ........................................................... 286
7.2 BI Kit Tools ................................................................ 287
7.2.1 First BI Example ............................................ 287
7.2.2 BI Integration Wizard .................................... 292
7.2.3 SAP BI Queries .............................................. 295
7.2.4 JDBC ............................................................. 312
7.2.5 SAP Query .................................................... 319
7.2.6 XMLA ........................................................... 319
7.2.7 ODBO ........................................................... 338
7.2.8 SQL Editor .................................................... 338
7.2.9 MDX Editor .................................................. 343
9
Contents
7.2.10 Exceptions .................................................... 346

7.2.11 Alerts ........................................................... 347
7.2.12 Hierarchies ................................................... 357
7.2.13 Sorting ......................................................... 370
7.2.14 Filtering ....................................................... 371
7.2.15 Dynamic Columns ........................................ 372
7.2.16 Pivot and ALV .............................................. 377
7.3 Integration ................................................................ 378
7.3.1 BI Elements .................................................. 378
7.3.2 BI Workbooks .............................................. 389
7.3.3 BI Documents Store ..................................... 389
7.3.4 Planning Functionality .................................. 392
7.3.5 Exporting Data to Different Targets .............. 392
8 Application Lifecycle ............................................... 399

8.1 Visual Composer System Landscape .......................... 399
8.1.1 Transporting Models .................................... 399
8.1.2 Transporting Applications ............................. 400
8.1.3 Down Porting Applications ........................... 403
8.1.4 Upgrading Models and Applications ............. 407
8.1.5 Versioning .................................................... 407
8.1.6 Personalization ............................................. 408
8.1.7 Localization .................................................. 409
8.1.8 Testing and Monitoring ................................ 419
8.1.9 Documentation and Help ............................. 423
8.2 Backend and Portal Systems ...................................... 423
8.2.1 Portal ........................................................... 423
8.2.2 SAP NetWeaver BI ....................................... 423
8.2.3 Other Data Sources ...................................... 425
9 Business Examples .................................................. 427

9.1 Best Practice Scorecarding ........................................ 427
9.2 Account Analytics ..................................................... 429
9.3 Treasury and Financial Investment Controlling .......... 430
9.4 Summary .................................................................. 433
10 Visual Composer and Enterprise SOA ..................... 435
10
099IVZ.fm Seite 11 Mittwoch, 11. Oktober 2006 3:33 15
Contents
Appendix ........................................................................ 439

A Modeling and Tips ............................................................... 441
A.1 General Portal Issues ................................................. 441
A.2 Enable the Visual Composer Log ................................ 443
A.3 Unlocking a Visual Composer Model ......................... 443
A.4 Percentage Sign ......................................................... 444
A.5 Chart Design .............................................................. 445
A.6 Changing Colors for Visual Composer
Applications .............................................................. 445
A.7 Searching for Visual Composer iViews in
the Portal .................................................................. 446
A.8 Performance Issues with BI JDBC Connector .............. 447
A.9 No Metadata from the BI JDBC Connector ................. 448
A.10 No Metadata from the BI XMLA Connector ............... 448
A.11 Cannot See the InfoCube Under BI XMLA .................. 448
A.12 Performance Issues and Limitations with the
BI XMLA/ODBO Connector ....................................... 449
A.13 INVALID_VARIABLE_VALUES# .................................. 450
A.14 Wrong Language ....................................................... 451
A.15 Language Mapping .................................................... 452
A.16 Strange Names for Query Elements ............................ 452
A.17 Web Service Enablement ........................................... 452
A.18 “Authority Check” Error ............................................. 454
A.19 “Virtual Interface not found” Error ............................. 455
A.20 “Serialization” Error ................................................... 456
A.21 Drop-Down List and Combo Box ............................... 458
A.22 Visual Composer and SAP BW/
SAP NetWeaver BI Sizing ........................................... 458
A.23 Formats of Date, Time, Units ..................................... 458
A.24 Problems with Mandatory Variables in BI XMLA ........ 459
A.25 SAP Query Result Fields and Select Fields .................. 459
A.26 Writing Data Back ..................................................... 460
A.27 Jump to Detailed Analysis (from Alert or Any
Other Link) ................................................................ 460
A.28 Using a Dynamic RFC ................................................. 461
A.29 Sorting on BI Data with More Than 500 Records ....... 461
A.30 Calling Analysis Process Designer or Process Chain .... 462
11
Contents
B Coding for Integration Examples .......................................... 463

B.1 BEx Integration ......................................................... 463
B.2 Document Integration ............................................... 472
B.3 Additional Code for Meta and Transactional
Data Document Association ...................................... 506
B.4 Dynamic RFC ............................................................ 510
C The Authors ........................................................................ 513
Index ......................................................................................... 515
12
Foreword
Foreword
SAP NetWeaver is a product that provides the tools to follow a new

architecture concept called Enterprise Services-Oriented Architec-
ture (Enterprise SOA). One of these new and exciting development
tools to create applications calling enterprise services is the Visual
Composer. Before we look into its details described in this book by
Carsten Bönnen and Mario Herger, let us get some common ground
first: Why is it necessary to become familiar with an Enterprise SOA?
What role does SAP NetWeaver play in it? What’s the benefit of it
all?
Most companies do not want to continue spending large portions of

their IT budget on maintaining the status quo. That is investing in
maintaining the current infrastructure or building quick fixes that
result in even more costs for the future. They’d rather free money
and time to build applications from their users’ wish list long since
neglected or build new applications. Regardless of the applications
that have to be built, they all follow this pattern. IT is not aligned
with the business and thus not set up for rapid change, which is one
of the main drivers in competitive business situations. Adhering to
an Enterprise SOA will give customers the flexibility to adapt to new
market requirements and keep up with the speed of change. The
Enterprise SOA’s main aim is to realize a business-driven approach
to an architecture of loosely coupled enterprise services for adaptive
business solutions. The enterprise services are Web services with
business logic and they are created and maintained with tools pro-
vided by SAP NetWeaver. Once you are able to leverage enterprise
services by utilizing the many development, administration and
maintenance tools provided by SAP NetWeaver, you have success-
fully established an open, rapidly changeable but yet stable IT archi-
tecture. How so? Your applications utilizing services are re-usable,
can easily be deployed, can be used in various UIs, are quick to
implement, involve little training effort, and grant you with lean and
transparent business processes that can be adapted quickly.
SAP NetWeaver is not only providing the tools to realize an Enter-

prise SOA. SAP NetWeaver is also on its path to become a full-blown
Business Process Platform (BPP), with core business objects and
ready-to-run business processes leveraging enterprise services. SAP
13
Foreword
is already well underway in providing the technology through its

SAP NetWeaver release and has already service-enabled SAP applica-
tions. For your convenience you can find an Enterprise Service Dis-
covery System on the SAP Developer Network (SDN), that describes
hundreds of services that are available right now. So you can start
any minute to implement an Enterprise SOA that will help you gain
business advantages and help your IT and business stay flexible.
Of course you will also be able to develop your own custom services
and applications. If you put the right tools into the hands of the right
users, you can increase flexibility, develop faster, and free time and
money for new custom development projects.
How does the Visual Composer help you? What does it allow you to
do and who should use it? The Visual Composer allows you to
quickly and easily build applications and prototypes using a visual
interface rather than manually writing code. Instead of having to
concentrate on technical and programming know-how, you use
graphical building blocks and put these together to a flow diagram.
The Visual Composer will promote a new type of application devel-
opers, namely business analysts and business process experts. They
will be able to apply their inherent understanding of business pro-
cesses and their companies’ requirements to model Visual Composer
applications without having any development expertise or better still
without having to have it. The Visual Composer lets them tailor their
models to their end-users’ needs, e.g., the same Visual Composer
application can be deployed to run in more than one UI, for example
the SAP NetWeaver Portal, a Web Dynpro application or a mobile
application. The UI building blocks are interlinked with enterprise
services to service-enable your applications.
What reduction of development time can be expected? Since the

Visual Composer’s development environment is so intuitive, you can
expect a huge decrease of development time. For example, SAP has
used the Visual Composer to model about 200 xApps for BI Analytics
in six weeks, one of which received the Macromedia MAX price for
analytical applications last year. Some of our customers have used
the Visual Composer for fast prototyping for projects running no
longer than a few weeks, sometimes days. So not only will your
development time and costs get significantly reduced, but you will
also be able to easily customize and adapt a Visual Composer model
14
Foreword
to changing business needs. You will gain speed, flexibility and you
will have freed time to get to the backlog of internal development
requests that you can now model rapidly, deploy, and adapt quickly
using the Visual Composer.
To sum it up, SAP recommends an Enterprise SOA to stay flexible,

reduce costs and align IT with the business. The tools to maintain
and change your IT and applications are provided by SAP
NetWeaver, which will move ahead to become a Business Process
Platform to offer an extensive and rich set of enterprise services. One
of these tools to model applications leveraging enterprise services,
the Visual Composer, is described in detail in this book.
Enjoy this exciting book and have fun leveraging the Visual Com-
poser. When you’ve finished your new modeling projects, we’d love
to hear from you.
Klaus Kreplin, Walldorf 2006

Executive Vice President and Corporate Officer of SAP Group
SAP NetWeaver
15
One of the longest chapters in this book is still ahead of you,

but it is also the most practical one. What would all the
prior talk be without hands-on examples and real life ques-
tions? Well, this is the chapter to put all that talk to the test.
6 Building Applications
When building an application with SAP NetWeaver Visual Composer

from scratch, there are some initial steps that you must take:
1. First, you must create the model. One way to do this is by opening Visual Composer
the Model menu and choosing New Model from the list. An empty First Step—
Creating a Model
model is created.
2. Before you continue, it might make sense to configure the work
environment according to your needs (see Section 5.1.1 on the
Options dialog from the Tools menu for details).
3. After everything is set up, you can begin to build your applica-
tion.
6.1 Getting Started—The Basic Model

In Chapter 5, we said that Visual Composer is used to build applica- Visual Composer
tions for SAP NetWeaver Portal. Figure 6.1 shows the elements that 101—A Basic
Model
represent known entities from the portal world. All entities can be
opened by double-clicking on them in the Storyboard of the Visual
Composer. Starting with the basic element on the right, an iView
defines the smallest entity of content in SAP NetWeaver Portal. The
iView element is the basic element for all Visual Composer elements,
and without it, you cannot model an application. The application
logic and flow is defined in one or several iView elements.
179
Figure 6.1 The Main Elements …
From a Visual Composer perspective, a portal page is nothing more

than a container for iViews. Figure 6.2 shows the same elements as
Figure 6.1 but this time the iView is part of the Page element. Note
that you can define applications that consist only of iViews in Visual
Composer and set up the pages later as an administrator in SAP
NetWeaver Portal.
Figure 6.2 ... with an iView in the Page Element …
By definition,“Business packages provide out-of the-box portal applica-

tions that can be easily modified to suit a customer’s needs.” Because
Visual Composer is used to build business applications, it therefore
makes sense that one of the many elements that it offers represents a
business package: Package. Figure 6.3 shows this element with the
portal content (the page and the iView that we saw in Figure 6.1 and
Figure 6.2 before) in it.
Figure 6.3 ... and with the Same Page in the Package
From Package Figure 6.4 outlines all the steps of building an application with Visual
to iView Composer: First, you Create a Model, and then you Create a Package
within the model by dragging the Package element from the task
panel into the model. To open the package, double-click on it. Then
180
Transactional Applications—Accessing ERP from Visual Composer 6.2
you Create a Page by dragging a Page element from the task panel
into the package and open it with a double-click. Next, you Create an
iView by dragging the iView element from the task panel onto the
page. By double-clicking on the iView element, you open the iView
and can start modeling your application.
Create a Model Create a Package
Create a Page Create an iView
Connect to Backend Access Data Service
Design the iView Logic Create the Layout
Check Model for Errors Deploy Package
Flexible Application
Figure 6.4 Steps in Building a Flexible Application with Visual Composer
All other steps (from Connect to Backend to Deploy Package) are

explained in the examples later on in this chapter. Note that all
examples start from within an opened iView unless mentioned oth-
erwise.
6.2 Transactional Applications—Accessing ERP

from Visual Composer
In the following examples, you will build applications that connect
to SAP Enterprise Resource Planning (ERP) systems. To do so, you
will access Business Application Programming Interfaces (BAPIs) that
provide the functionality necessary to implement your application.
181
SAP System To access ERP systems, Visual Composer uses the SAP System adapter
Adapter for SAP NetWeaver Portal. The SAP System adapter is an implemen-
tation of a connector framework based on the J2EE Java Connectiv-
ity Architecture (JCA) 1.0, the SAP Remote Function Call (RFC)
library, and the SAP Java Connector (JCo). Using the SAP System
adapter, you can access SAP ERP systems, Customer Relationship
Management systems (like mySAP CRM), and Business Intelligence
solutions (like SAP NetWeaver BI).
6.2.1 The First Application

Keep it Simple— Imagine the following situation. You’re a member of a project team.
Our First You have a basic understanding of IT and an even better understand-
Application
ing of the processes in your company, but you don’t have any pro-
gramming skills. Therefore, you are close to having the skill set of the
business process expert.
In this particular scenario, your project lead comes in and tells you to
build a relatively simple application. The application is supposed to
display the address of a customer after typing in the customer num-
ber. Furthermore, since this application is intended to be used in a
SAP NetWeaver environment, it should be displayed using the SAP
NetWeaver Portal.
Sounds easy, doesn’t it? Remember in this setup that you don’t know
how to develop applications, that is, no Java, no ABAP, no nothing …
And now you are supposed to build an application that runs in SAP
NetWeaver Portal and also accesses data from a backend system.
Make it Fast— To add an interesting twist to this situation, because the application
Building an is considered to be so simple, the request is for it to be available by
Application
Quickly noon and it is now 9 am. If you have a good developer who is readily
available, you should be able to meet this goal; however, as luck
would have it, there is no developer on hand and the application still
has to be implemented by noon.
Let’s see how Visual Composer can help you to build this straightfor-
ward application. In the next example, we’ll show you how to build
this application without requiring development skills and without
needing three hours to implement it.
182
Accessing Data Services
1. After creating a basic model as explained in Section 6.1, you can

begin building your application. Open the iView from the basic
model and fill the iView with application elements and logic.
2. After choosing Find Data from the task panel toolbar, you will see
an input form in the task panel. Using the input form, you can
now decide on which system you want to access. For the follow-
ing example, you will choose an ERP system. Figure 6.5 shows an
already conducted search on an ERP system named XK3.
Figure 6.5 Task Panel Toolbar—Find Data
183
Attention
The list of systems in the System drop-down list may vary, depending on
the user. As mentioned before, Visual Composer uses the system land-
scape of SAP NetWeaver Portal. It connects to the portal with the same
user you used to log on to Visual Composer.
The roles and the permissions of the user define which systems you will see
in the drop-down list. In addition, the logon ticket or the user mapping of
this user are used for authentication purposes on the backend systems. If
there is any kind of authorization that is maintained for the user on the
backend, it will be used as well. This way Visual Composer ensures that
the user cannot access systems (authentication) he must not access and
cannot access data services (authorization) he must not use.
3. As you can see in Figure 6.5, using the Look for field, you can now
determine how you want to search for a data service. Visual Com-
poser differentiates from among the various system types (such as
ERP, BI, JDBC systems) that it can access. Depending on the type of
system that you select, different entries will appear. For example,
for ERP systems, you can either Look for a service by name, Look
for a service by group, or Browse the service catalog. In this exam-
ple, you want to Look for a service by name.
Searching for 4. You can now type in the search criteria in the Service field.
a Data Service in Because you’re looking for details on a customer, you first try the
Visual Composer
following: *CUSTOMER*. Then, if you expect the data service that
you’re looking for to be a BAPI, you search for BAPI_CUSTOMER*
as well. However, while the second approach reduces the list sig-
nificantly, the first approach shows all available data services with
“CUSTOMER” in its name. Besides BAPIs, it is very likely that RFCs
will be in the system as well. If you use the second approach (i.e.,
search for BAPI_CUSTOMER*), they will be listed as well.
5. From the list of results, you can now choose the data service that
you want to use for your application. In this example, that data ser-
vice is BAPI_CUSTOMER_GETDETAIL. To import the metadata
describing this data service into your iView, you can either double-
click on the data service or position it directly in your iView by
using drag-and-drop.
6. Before the representation of the data service will be visible in your
model, Visual Composer will ask you which ports and fields you want
184
to use (see Figure 6.6). If you select too many fields1 in the Define
Data Service dialog (see right side), you’ll receive a system warning.
Figure 6.6 Definition of a Data Service
You can use the following feature to optimize your model. In all Suggestions to
the examples that we have selected for this book, you will be able Optimize Your
Model—Visual
to select fields and play around with them, without having to Composer
import the metadata again. You will then see the new BAPI that Warnings
you imported above now shown as an element on the Storyboard.
7. To ensure that the data service—in this example, the BAPI—that
you imported really does what you expect it to do, you can check
the functionality of that data service. By right-clicking on the data
service—the BAPI representation in your model—you can open a
context menu (see Figure 6.7). When you select Test Data Ser-
vice... from the context menu, the Test Data Service dialog opens
(see Figure 6.8).
Figure 6.7 Data Service Context Menu
1 How many fields are too many is defined in the Options dialog box from the Tools
menu explained in Chapter 5.
185
Figure 6.8 Test Data Service Dialog
8. For the BAPI_CUSTOMER_GETDETAIL, you can enter test input

for five fields, although only two fields are required—Customerno
and Pi Salesorg. Required input fields are marked in red and are
each affixed with an asterisk (*).
An example entry for a customer number is 0000001000 and an
example entry for a sales organization is 1000. With these two val-
ues, you can test the functionality of the data service by clicking
on Execute.
You have now created your first representation of a data service in
Visual Composer. If you glance at the Layout tab, you’ll notice that
there are no views yet.
Creating Views
Creating Your 1. On the Design tab, you’ll see an Input port on the left side of the
First View data service. By dragging out from this port and releasing the
mouse button, you can open a context menu (see Figure 6.9).
Choosing Add Input Form from the list will create an input form.
2. You just created your first view—an input form. Easy, wasn’t it?
Switching back to the Layout tab, you’ll see an input form with all
the fields that you might need when using BAPI_CUSTOMER_
GETDETAIL.
186
Figure 6.9 Dragging Out a Context Menu from the Input Port
If a BAPI has too many input fields, Visual Composer will require
you to select from the list of input fields, but you can always select
all fields using Select all.
3. Creating an output view is as simple as creating an input form. By
dragging out from Pe Address—an output port of BAPI_
CUSTOMER_GETDAIL—and releasing the button, you can open
another context menu. You can then choose Add Form View from
the list. Another dialog box opens (see Figure 6.10).
Figure 6.10 Select Display Fields Dialog
4. Visual Composer realized that there are too many fields and you
can now decide on the fields that you want to use for your Form
View. For this example, choose CITY, COUNTRY, NAME, and STREET.
Submit your selection by clicking OK.
187
If you switch back to the Layout tab, you now see the new views—
the input form and the Form View (see Figure 6.11). But, there are
still some things that you would like to change such as the field
names.
Figure 6.11 Initial Layout of Your First Application
Layout of Views
You notice that all fields that can be used together with BAPI_
CUSTOMER_GETDETAIL are visible in the input form. Remember-
ing the test of the BAPI, you know that only two of the fields are
really required—the ones marked with red asterisks (*) on the Lay-
out tab. For this sample application, all you need to do is to provide
the input for the required fields.
Deleting 1. Removing the other three fields is easy. By marking the fields and
Superfluous Fields pressing the Del key, you can remove the fields. You can mark
more than one field by first using the Ctrl key and then using the
Del key to remove them.
Another solution would be to right-click on the input form and
choose Configure Element from the context menu. On the lower
part of the task panel, you can now check and uncheck the ele-
ments that should be visible in your input form.
2. On the Layout tab, you can then arrange the forms according to
Figure 6.12. This can be done easily by using drag-and-drop to
188
position the forms. In addition, you can grab the borders of the
forms to enlarge or shrink them.
Figure 6.12 Arranging the Layout of the First Application
3. After arranging the forms and the fields within them—using the Renaming Fields
same mechanism as you used for the forms—you can change the
names of the fields as well as the names of the forms. By marking
the element that you want to rename and pressing the F2 key,
you can easily rename it.
Alternatively, you can open a context menu by right-clicking on

the field. From this context menu, choose Edit Label to change the
name of the element. You can employ this method for almost
every element available in Visual Composer.
Note
By double-clicking on a control on the Layout tab, you can open the Con-
trol Properties dialog. You can also do this by right-clicking on the con-
trol and choosing Properties… from the context menu. Using the Control
Properties dialog, you can modify all controls that are available in Visual
Composer. At the same time that you opened the Control Properties dia-
log, the Configure Element was opened in the task panel.
The Control Properties dialog might differ for different UI controls in
Visual Composer. For a detailed description of the UI controls, see Section
5.3.
189
4. As an example of modifying a control, youyou can determine the

Label position on the Display tab of the Control Properties dialog
(see Figure 6.13). You can experiment with it for the example
above.
Figure 6.13 The Display Tab of the Control Properties Dialog
Deployment
From Visual Before you deploy your application, you should ensure that the
Composer to model looks similar to the one shown in Figure 6.14.
SAP Netweaver
Portal—Deploying
Your Application
Figure 6.14 Model of Your First Application
1. To deploy your application to the SAP NetWeaver Portal, you can

now click on Deploy in the task panel toolbar. Deploy to Portal
will appear in the task panel. You will see three buttons: Deploy,
Compile, and Clear.
2. After clicking on Deploy, a Progress Bar will appear to inform you
of the deployment progress. In addition, you will receive messages
with information on the different steps that Visual Composer is
running through such as compiling and deploying.
190
3. Figure 6.15 shows the Deploy to Portal dialog in the task panel
after a successful deployment.2 View source code and Run “Basi-
capplicationiview” are links that can be used to access the source
code and run the application in SAP NetWeaver Portal.
Figure 6.15 Deploy to Portal Dialog
4. Click on Run “Basicapplicationiview” to open your application in Running Your

SAP NetWeaver Portal. Your application should look similar to Application
the one shown in Figure 6.16 after test values have been entered
(into the input fields) and submitted.
Figure 6.16 First Application After Deployment in SAP NetWeaver Portal
2 After pressing Compile instead of Deploy in the previous step, you will only see
View source code.
191
Note
By default, Visual Composer will use Adobe Flash runtime to build an
application. As mentioned before, you can choose another runtime, that
is, Web Dynpro. For more information, see the explanation of Options
from the Tools menu in Section 5.1.1.
You have now built your first simple application. We’ll now have
you tackle more challenging applications in order to give you a better
understanding of how to use Visual Composer to build flexible busi-
ness applications.
6.2.2 Adding More Complex Data Services

Because you built your first application in the requested time, your
project lead is convinced that you can build applications in a very
short time frame.
First, the bad news. He asks you to build an application that shows all
sales orders for the customer from the first example. The orders
should be displayed in a list. After clicking on a list entry, the appli-
cation should then display the details on the sales order. Further-
more, the project lead would truly appreciate it if you could use col-
ors to mark different statuses of the sales orders. And of course, the
list should be sorted. Now, for the good news. This time, you’ll have
an entire day to build the application.
One Input Form In the next example, you will extend the application that you built in
for Two BAPIs the first application. You will reuse the information from the created
input form (Enter Customer) as input for another BAPI: BAPI_
SALESORDER_GETLIST. Then, you will modify the output of this
BAPI by sorting it before displaying it in a Table View. Next, you will
add a new column to the Table View, accessing data from another
field and using this data to determine the color of the table cells. You
will also invoke a second BAPI: BAPI_SALESORDER_GETSTATUS.
For the Table View that displays the data from this BAPI, you will
add a new column based on dynamic expressions.
192
Adding a Second BAPI to Your Application
1. In this example, you will start by importing BAPI_SALESORDER_

GETLIST to your first application (see Figure 6.17).
Figure 6.17 Looking for BAPI_SALESORDER_GETLIST
2. By dragging out the Input port of BAPI_SALESORDER_GETLIST it

can be connected to the already existing input form Enter Cus-
tomer. You just drag out from the Input port and release the
mouse button after moving it to the out port of Enter Customer. A
red line will mark the connection that will be created before
releasing the mouse button.
3. By testing BAPI_SALESORDER_GETLIST with your first applica-
tion, you ensure that the BAPI provides the functionality that you
want. At the same time, you notice that the required fields are
Customer Number and Sales Organization. This means that your
input form already has the correct input fields to fetch the data
for the required fields.
Field Mapping
If you remember your first application, you’ll recall that the fields
required by BAPI_CUSTOMER_GETDETAIL were named differently.
So there is no way yet for BAPI_SALESORDER_GETLIST to know
193
which data should be used for the two required fields. Fortunately,
this issue is easy to resolve.
1. The connection that you created in the first step is of type data-
mapping. You will open Configure Element for this connection in
the task panel. On the lower part of the task panel, you can assign
values to the input fields. In this example, the value @CUSTOMERNO is
assigned to the input field CUSTOMER_NUMBER and @PI_SALESORG is
assigned to SALES_ORGANIZATION. The data service is now imported
correctly into the model.
2. According to the settings for Automatically create data mapping
when source and target from the Composing tab of Options from
the Tools menu (see Section 5.1.1), Visual Composer will try to do
an automatic data mapping. Depending on this setting and the
data, it might be necessary to do the data mapping manually.
3. After correctly importing the data service BAPI_SALESORDER_
GETLIST into your model, you can now drag out from Sales
Orders port. When you release the button, a context menu will
open, from which you can again choose Add Table View. Visual
Composer realizes that there are too many fields and asks you to
select the ones that you want to use in the Table View. You
choose DOC_DATE, DOC_STATUS, MATERIAL, NAME, and SD_DOC from
the list of available fields.
You have now created your first Table View. The model should look
similar to the one in Figure 6.18.
Figure 6.18 Extended Application with a Table View
Switching back to the Layout tab, you can now modify the Table
View according to how it looks in Figure 6.19, using the same meth-
194
ods for resizing and renaming elements as you did in the first appli-
cation. The only difference here is that instead of marking input
fields, you will now mark table columns.
Figure 6.19 New Layout of Your Application with a Table View
Sorting
When we introduced this example, we promised to sort the output
of BAPI_SALESORDER_GETLIST. A look at Figure 6.20 reveals that
after entering test values and submitting them, the resulting table in
your application is not yet sorted. To sort the list of sales orders, you
have to switch back to the Design tab.
1. On the Design tab, click on Compose from the task panel toolbar.
This will open the Compose Model in the task panel.
2. You will see four groups: Components, Connectors, Operators,
and Additional Operators. To sort data, you can use Sort from the
Operators group. In a first step, drag this operator into your
model.
3. In the next step, you must remove the connection between BAPI_
SALESORDER_GETLIST and the Sales Orders Table View.
195
Figure 6.20 Application with an Unsorted List of Sales Orders
4. Drag the Sort operator (Sort1) to a convenient position in your

model and connect its Input port to the Sales Orders port of
BAPI_SALESORDER_GETLIST. To complete the connection, you
then connect the out port of the operator to the in port of the
Sales Orders Table View. Your model should resemble the one
shown in Figure 6.21.
Figure 6.21 Sample Application with Sort Operator
5. Because the Sort operator doesn’t know according to which crite-

ria you want to sort the data, you must configure it. To configure
the data, first, double-click on the operator. The Configure Ele-
ment dialog will be opened in the task panel. In this example, you
196
want to sort the data (Sort by) by DOC_STATUS and the Direction is
down. By setting the direction to down, you will sort the list in a
way whereby the open documents are shown first. Because DOC_
STATUS is of type Text, you have to sort the list in reverse alphabet-
ical order (down) instead of straight alphabetical order (up). There-
fore, documents with status Open will show up first on the list.
6. You might have to reconfigure the Sales Orders Table View.
Before deploying, you have to check the Layout tab. If everything
looks okay, you can deploy your application to your first applica-
tion.
After running the application in SAP NetWeaver Portal, it should

look like the one shown in Figure 6.22. The list of sales orders is now
sorted.
Figure 6.22 Application with a Sorted List of Sales Orders
According to the project plan, there is still something missing. Your

project lead would like to have the sales orders marked with differ-
ent colors to indicate their status. This would make it easier for an
end user to identify the relevant rows in the list. More specifically,
you want open sales orders to be marked with a red flag, sales orders
that are not yet delivered to be marked with a yellow flag, and com-
pleted sales orders to be marked with a green flag.
197
Customizing
If you open the Layout tab, you see that there is one column that
provides the data on the status of the sales order: Document Status.
From this column, you can derive the necessary information on the
statuses of the different sales orders. Now all you have to do is use
this information to mark orders with the right colors.
Creating a 1. First, you have to configure the Sales Orders Table View. You can
Custom Field open Configure Element by clicking on Configure in the task panel
toolbar, or by using the Sales Orders context menu.
2. Next, click on the Plus symbol on the lower part of the task panel,
which will open the New UI Control dialog that displays a list of
available UI controls.
3. Choose Expression Box from the list. The data type is by default
Text, which is fine for this example, but the Field name should be
changed. Because you eventually want to replace the existing field
Document Status, it makes sense to name the field document_sta-
tus. Note that there are no blanks allowed in a field name.
4. After clicking on OK, you’ll see an additional column in the Table

View Sales Orders. Rename the column to Document Status. Your
layout should now resemble the layout in Figure 6.23. Double-
click on the newly created column.
Figure 6.23 New Column for the Sales Orders Table View
198
5. The Control Properties dialog box opens. Your first goal is to display Expression Editor
the data from the existing field Document Status in your newly cre-
ated field. Click on Formula on the General tab of the dialog box.
6. Another dialog box opens (see Figure 6.24). Computed Value is
the dialog box in which you can use the Expression Editor.3 On
the right side of the dialog box is a structure that you can browse
as you would browse in a file explorer.
Figure 6.24 Expression Editor
7. From the structure, you choose Data Fields and expand the node.
You’ll see a list of fields. Every field has an icon to identify its data
type. From the list, you select DOC_STATUS by double-clicking on it.
You now see @DOC_STATUS in the formula area on the left side of
the dialog box.
8. When you click on the Check button in the Computed Values dia-
log, Visual Composer informs you that the entered formula is
valid. After closing the dialog box, you’ll see that @DOC_STATUS is
now the value of the Expression field on the General tab in the
Control Properties dialog (see Figure 6.25).
As an optional step, you could deploy the application to ensure that

the two columns always contain the same value. So far, there is no
coloring involved, but that will change right now.
1. If you switch from the General tab of the Control Properties dialog Adding Style—
box to the Styles tab, you can now define different styles, includ- Visual Composer
Styles
ing different colors. In addition, you can assign a Condition (i.e.,
boolean expressions that decide whether a style should be applied)
to every style that defines when a specific style should be used.
3 For details on the Expression Editor, see Section 5.4.
199
Figure 6.25 Expression Box—General Tab
2. By clicking on the Plus symbol (see Figure 6.26), you can create a
new entry in the list of Style-Condition pairs. You can use boolean
operators within the conditions. The Styles tab should look like
the one in Figure 6.26. Table 6.1 lists the Style-Condition pairs
accordingly.
Note that you can define the colors using hexadeximal notation (as
you would do in HTML), or by choosing from a palette that can be
opened by clicking on the icon next to the fields Foreground and
Background.
Figure 6.26 Expression Box—Styles Tab
200
Style Condition
#FF0000 (Background color red) @DOC_STATUS=='Open'
#FFFF00 (Background color yellow) @DOC_STATUS=='Not delivered'
#00FF00 (Background color green) @DOC_STATUS=='Completed'
Table 6.1 Style-Condition Combinations for Your Expression Box
Attention
On the Styles tab, not only can you define the background color (Back-
ground), but the text font (Text font) and style (Text style), the foreground
color (Foreground), and the alignment of the text (Align).
In the example, the conditions exclude each other so the order of the con-
ditions is not important. In general, however, the order of the conditions
is important. When you use a set of conditions whereby more than one
condition might apply, the style that is connected to the first condition is
applied.
You can now deploy your application. It should look like the one in
Figure 6.27. The only thing left for you to do now is to remove the
original Document Status column from the table. Note that in your
model you will have to uncheck the old column from the configura-
tion dialog of the table in order to remove it.
Figure 6.27 Application After Adding Expression Box with Styles
201
Connecting After having created a sorted list of all sales orders for your cus-
Two BAPIs tomer, you will now make additional information available on the
status of the sales orders.
1. To make this information available, you will have to invoke

another BAPI: BAPI_SALESORDER_GETSTATUS. This BAPI will
provide you with detailed information on the sales orders.
2. To use BAPI_SALESORDER_GETSTATUS, you must connect it to
the out port of the Sales Orders Table View. Then, double-click on
the connection and Configure Element will open in the task panel.
On the lower part of the task panel, you have to assign @SD_DOC to
the input field SALESDOCUMENT.
3. You can now drag out from the Statusinfo port and release the
mouse button. Select Add Table View to create an additional Table
View. In the Layout tab, modify your layout and then deploy the
application. Figure 6.28 shows what the application looks like
after deployment.
Dynamic For the output of BAPI_SALESORDER_GETSTATUS, you want to

Expressions mark the sales orders according to their size. Sales orders with a
value smaller than 100,000 € (or 128,000 USD) should be marked in
red with “Small” in the Order Size column. All other sales orders
should be marked in green and have the value of the order.
1. If you recall in the first example on creating custom fields, you first
switched to the Layout tab. The field NET_VALUE would provide us
with the information that we were looking for; however, in this
example, you will compute the value of the order instead of read-
ing it from a field. To do so, open Configure Element for Sales
Order Status.
2. By clicking on the Plus symbol on the lower part of the task panel
you open the New UI Control dialog. As in the last example, you
choose Expression Box from the list UI controls. Use the Text data
type again. Change the Field name to order_size.
3. After clicking on OK you’ll see an additional column in the Sales
Order Status Table View. You can now rename the column to
Order Size. When you double-click on the column, the Control
Properties dialog opens.
202
Figure 6.28 Application Showing Status Information from BAPI_SALESORDER_

GETSTATUS
Your first objective here is to compute and display the net value of Calculating in
the order. You also want the value to be replaced by the text ‘Small’ Visual Composer
whenever the order size is smaller than 100,000.
1. On the General tab of the dialog box, click on the Formula button.
The Expression Editor opens. By clicking on the node Conditional
Functions, you can expand this node.
2. A list of conditional functions is displayed. From the list, choose
the IF function. In the text field on the right-hand side, modify the
IF function using the following formula:
IF(@REQ_QTY*@NET_PRICE>100000,@REQ_QTY*@NET_PRICE,'Small')
The formula checks whether the net price multiplied with the
quantity is higher than 100,000 (IF(@REQ_QTY*@NET_PRICE>
100000)). If this condition is true, the first expression is used
(@REQ_QTY*@NET_PRICE); if the condition is false, the second
expression ('Small') is used.
203
3. Click on Check to determine whether the formula is valid (i.e.,

Visual Composer will notify you). If the formula is valid, you can
close the dialog. The formula is now the value of the Expression
field.
4. To bring some more color to your application, open the Styles tab
and define two Style-Condition pairs in accordance with your
objective of marking small orders in red and all orders with a
value higher than 100,000 € in green (see Table 6.2).
Style Condition
#FF0000 (Background color red) @REQ_QTY*@NET_PRICE>100000
#00FF00 (Background color green) @REQ_QTY*@NET_PRICE<=100000
Table 6.2 Style-Condition Combinations for Second Expression Box
That’s it! After deploying your application, it should look like the one
shown in Figure 6.29.
Figure 6.29 Application After Adding Another Custom Column to Sales Order Status
204
6.2.3 Adding Toolbars, Popups, and Charts

Well … now your project lead is convinced that you are some kind of Free Exercises—
magician when it comes to building applications quickly. He likes the Improving the
Application
application, but detects that there is still something missing:
왘 First, not every user will have instant recall of the sales organiza-
tion of customers. Therefore, the project lead recommends imple-
menting a kind of help for the user that allows him or her to
choose from a list of sales organizations. Furthermore, it would be
much appreciated if only those sales orders available for the spe-
cific customer would be on the list.
왘 Secondly, your project lead asks you to enhance the application
with some additional colors. More specifically, he wants you to find
a way to make some of the data available in a chart. This becomes
even more critical because your project lead has to provide a status
report and would like to add some nice screenshots to it.
Although you don’t know how you will implement all of these
requirements, you feel confident that you can do this using Visual
Composer.
In the next steps, you will extend the application that you built in the Adding a
last example. First, you will create a toolbar for the Enter Customer Toolbar
input form. From this toolbar, it will be possible to open a popup

window in which the end user can choose the sales organization of a
customer using BAPI_CUSTOMER_GETSALESAREAS. In addition,
you will create a chart that displays the size of the different orders in
a column chart sorted by the date of the order.
Creating a Toolbar
In Visual Composer, you can create a toolbar for every view—such as
form, table, or chart views.
1. Toolbars can be easily added to a view by right-clicking on the view,

either on the Design tab or the Layout tab. A context menu will
open up in which you can choose Create Toolbar (see Figure 6.30).
205
Figure 6.30 Context Menu of a View
2. In this example, you will create a toolbar for the input form Enter
Customer. After choosing Create Toolbar from the context menu,
the Create Toolbar Buttons dialog opens (see Figure 6.31). To add
a button to the toolbar, click on the Plus symbol on the lower left
side of the dialog box. A button labeled Button will be created.
Rename the button to Choose Sales Org. You can also define an
action on the button. Here, define a custom action with the name
CHOOSE_SALES_ORG.
Figure 6.31 Create Toolbar Buttons Dialog
You have now created your first toolbar. Figure 6.32 shows the input
form with the newly created toolbar.
206
Figure 6.32 Input Form with a Toolbar
Tip
If you click on OK before creating a button for a toolbar, you won’t see a
toolbar in the specific view. This is due to the fact that in theory every
view already has a toolbar and, by default, this toolbar is hidden. Adding
a button automatically sets the visibility flag of the toolbar to Show. If
you don’t add a button, the status of the toolbar won’t change and it will
still be hidden.
To remove a toolbar, open Configure Element for the view with the tool-
bar. You’ll see a property Toolbar with the value Show. By opening the
drop-down list and changing the value to Hide, you can hide the toolbar.
If you want to reuse the toolbar later on, you can keep the buttons of the
toolbar. On the other hand, if you want to remove the toolbar completely
and don’t intend on using it again, we recommend that you remove all
buttons from the toolbar before hiding it. This will eliminate unnecessary
data from your model description.
Popup iView
After creating the toolbar with the Choose Sales Org button, you
now have a trigger to raise an event to open a help dialog for the
Enter Customer input form. There are different ways in Visual Com-
poser to create a help dialog. In this example, you’ll use a popup
iView (see the sections on Value Help in Chapter 7 for an alternative
to this approach).
1. To create a popup iView, drag out from the out port of Enter Cus-
tomer. From the context menu that opens, select Open Popup
iView. The Select Popup iView dialog opens (see Figure 6.33).
2. In the Select Popup iView dialog, select Create new iView and
change the name to Choose Sales Org. After clicking on OK, you
have created your first popup iView, but it still doesn’t contain any
functionality nor can it be invoked.
207
Figure 6.33 Select Popup iView Dialog
3. You can configure the event that will later bring up the popup
iView by double-clicking on the connection between the out port
and the popup element. Moreover, by changing the value of
Event name to choose_sales_org (see Figure 6.34), you can gen-
erate an event which you can raise with the button from the tool-
bar that you just created. Note that Visual Composer does not dif-
ferentiate between uppercase and lowercase for actions and
event names.
Figure 6.34 Configure Element for the Popup Invocation
You can now open a popup iView. Next, you will add functionality to
this iView.
Adding 1. To add functionality to the popup iView, you have to drill down to
Functionality to a the popup iView. This opens the popup iView. You can do this by
Popup iView
right-clicking on the popup icon and choosing Drill Down from
the context menu. Figure 6.35 shows the icon with an opened con-
text menu.
208
Figure 6.35 Popup Element Context Menu
2. In your popup iView, the end user should be able to choose from
a list of sales areas that are available for a specific customer. The
BAPI that provides this functionality is BAPI_CUSTOMER_GET-
SALESAREAS. Note that this BAPI requires the customer number.
3. Since you already asked the end user for the customer number in
the Enter Customer input form, it is already available. Unfortu-
nately, this information is available only in the calling iView, and
not yet in the popup iView. How do you make the customer num-
ber available within the popup iView?
4. By dragging out and releasing the Input port of BAPI_
CUSTOMER_GETSALESAREAS, you open a context menu, just as
you have done before. This time you choose Start Point from the
list (see Figure 6.36).
Figure 6.36 Creating a Start Point to Import Data into a Popup iView
5. The Select Input Fields dialog opens. From there, you select
CUSTOMERNO and click on OK.
6. By dragging out from the Salesareas port of BAPI_CUSTOMER_

GETSALESAREAS, you can now create a Table View with at least
the customer number (CUSTOMER) and the sales organization
(SALESORG).
209
Adding a Button to To preview the layout of the popup iView, select the Layout tab.
a Popup iView Because you are dealing with a popup iView here, you sense that there
is still one thing missing, namely, a button to close the popup iView.
1. To add this button, you create a toolbar for the Table View and add
a button called Close. In addition, you define a custom action
named CLOSE on this button. Figure 6.37 shows an example for a
Table View for BAPI_CUSTOMER_GETSALESAREAS.
2. Next, drag out from the out port of the Table View and create an
End Point in the same way that you created the Start Point before.
By double-clicking on the connection between out port and the
End Point you can rename the connection to close.
Figure 6.37 Table View with Close Button for BAPI_CUSTOMER_

GETSALESAREAS
3. Now you can close the popup iView by clicking on the button from
the toolbar. There is still one thing left to do—make the informa-
tion on the sales organization available to the calling iView.
4. To make this data available, first switch back to the calling iView
by clicking on the back arrow from the navigation bar.
5. Then double-click on the choose_sales_org connection to open a
list of input and output ports. Assign the input and output fields of
the popup iView according to the way they appear in Figure 6.38.
After deploying your application, it should look like the one shown
in Figure 6.39. You can see the newly created popup iView opened
and showing only the available sales organizations for customer
0000001000—the customer number that was already entered in the
Enter Customer input form.
210
Figure 6.38 Assigning Popup Input and Output to the BAPI and the Input
Form Fields
Figure 6.39 Application with Popup iView Opened
211
Index
A STREET 187
BAPI_CUSTOMER_GETSALESAREA
ABAP List Viewer (ALV) 358 S 205, 209
ABAP stack 27, 28 CUSTOMER 209
ABAP Workbench 31, 391 CUSTOMERNO 209
ActionScript 72, 78, 85 SALESORG 209
Activation 425 BAPI_FLBOOKING_CREATEFROMD
Additional operators 139 ATA 246, 247, 248
Administrator Workbench 424 BOOKING_DATA 246
Adobe Flash 43, 72 CLASS 248
Client 78 INPUT 246
File 85 OUTPUT 246
Player 52, 91 RESERVER_ONLY 247
UI 40 RETURN 246
Adobe Flash Runtime 85 TEST_RUN 247
Deploying applications using 192 TICKET_PRICE 246
Adobe Flex Server 78, 85, 419 BAPI_FLIGHT_CHECKAVAILABILIT
Adobe SVG Viewer 52, 71, 91 Y 238
Alert Data Service 104, 347, 406 AIRLINEID 238
Alert Framework 347 CONNECTIONID 238
Alert Monitor 357 FLIGHTDATE 238
Alias Manager 403 BAPI_FLIGHT_GETLIST 230, 238,
Analysis Process Designer 462 253
Analytic applications 40, 46 AIRLINE 245
APD 462 AIRPORTFR 245
Application consultant 33 AIRPORTID 252
Application platform layer 27 AIRPORTTO 245
Application service 61, 88 ARRDATE 245
ARIS 87, 89 ARRTIME 245
Authentication 184 CITY 252
Authorization 184, 317 CONNECTID 238
COUNTRY 252
B COUNTRY_ISO 252
CURR 245
Backend elements 74 DATE_RANGE 230, 231, 232
Balanced Scorecard 428 DEPTIME 245
BAPI 435 FLIGHTDATE 245
Accessing 184 MAX_ROWS 231
BAPI_CUSTOMER_GETDETAIL PRICE 245
184, 216 BAPI_SALESORDER_GETLIST 192,
CITY 187 193, 213
COUNTRY 187 CUSTOMER_NUMBER 194
Customerno 186 DOC_DATE 194
NAME 187 DOC_STATUS 194
Pe Address 187 MATERIAL 194
Pi Salesorg 186 NAME 194
515
Index
SALES_ORGANIZATION 194 C
SD_DOC 194
BAPI_SALESORDER_GETSTATUS Calendar → UI Controls
192, 202 Change Management Service 86
SALESDOCUMENT 202 Characteristics 297, 321
BAPI_SALESORDERS_GETLIST 216 Chart 212
BEx 378 Column Chart 212
BEx Analyzer 90 Chart Type 221
BEx Query Designer 90, 305 Chart View → Model Components
BEx Report Designer 90 Checkbox → UI Controls
BEx Suite 31, 41, 47, 87, 90, 378 Clock → UI Controls
BEx Web Application Designer 47, Close Model → Model
90 Collaboration 42
BEx workbook 389 com.sap.vc 253
BI 281 epcm 253
BI Consumer Services 281 Combine operator 248
BI Document Repository Manager Creating 248
389 Combo Box → UI Controls
BI extension Kit for Visual Composer Command URL 295
47, 70, 75, 279 Compiler 70, 72
BI Integration Wizard 112, 286, Component Build Service (CBS) 86
292, 313 Compose → Task Panel Toolbar
BI JDBC Connector Compose Model 195
MaxDB 317 Additional operators 195
Microsoft SQL Server 316 Connectors 195
Oracle 317 Operators 195
Setup 316 Composer Model 222
BI UDI 419 Components 195
Board Toolbox 122 Composite Applications 41, 436
Design Board 122 Analytic Composites 41
Layout Board 123 Conditional Functions → Expression
Source Board 123 Editor
Bulleted List → UI Controls Conditions 199
Busines Process Modeling 87 Configure → Task Panel Toolbar
Business analyst 32, 47 Configure Element → Model
Business application 39 Connector Framework 182
Business content 60, 424 Connectors
Business expert 32 Multidimensional 280
Business Intelligence 27, 46, 59, Relational 280
182 Control Properties → UI Controls
Accessing 182 Control Properties Dialog → UI Con-
Business package 38, 85, 180 trols
Business Process Expert 32, 33, 47, Cost awareness 29
64 Count 321, 323
Business Process Expert Network Creating views 186
64 CSV 393
Business Process Management 27 Cumulative Total 321, 326
Business Process Modeling 89 Currency 300
Business Server Pages (BSP) 391 Custom Field
516
Index
Creating 198 Dynamic Expressions Editor →

Customer Relationship Manage- Expression Editor
ment 182 Dynamic Expressions Operators →
Accessing 182 Expression Editor
Dynamic List → List
D
E
Data Definition Language 426
Data fields 199 Eclipse
Data services 184 Eclipse SDK 86
Accessing 183 Element
Required input fields 186 Configure 188, 189
Data Store → Model Connectors Deleting 188
Data Type 142, 198, 199 Marking 188
Data Warehousing Workbench 424 Renaming 189
Date Functions → Expression Editor End Point → Model Connectors
Date Picker → UI Controls Enteprise services 437
Date/time 321 Enterprise portal 28
Date/Time Formats → Expression Enterprise Portal Client Manager
Editor (EPCM) 133, 253, 257
Date/Time Formatting Mask → Enterprise Service Repository (ESR)
Expression Editor 437
Date/Time Parts → Expression Editor Enterprise Services Architecture
Date/Time Units → Expression Edi- (ESA) 436
tor Enterprise SOA 39, 435, 436
DDL 426 Entity service 61
DefaultFlexFrameStyle 446 Entry List Manager 99
Delta link 400, 401 EP Usage Type 42, 81
Deploy → Task Panel Toolbar EPCM Event → Eventing
Deploy to Portal 190 ERP
Design Board 93 Accessing 181
Design tab 93 Event
Design Time Repository (DTR) 68, Name 208
86, 408 Raising 208
Development class 425 Eventing 251, 378
Development server 77 Event 133
Dimension table 308 Signal in 133
Distinct → Model Operators Signal out 133
Document classes 389 Excel 393
Document Object Model (DOM) 74 Exceptions 300, 346
Document Repository Manager 389 Executable GUI language 63
Document store 378 Exporting to
Documentation Wizard 99 CSV 397
Down port 403 Excel 394
Drag-and-drop 184 PDF 397
Drop-Down List → UI Controls Expression Box → UI Controls
Dynamic columns 298, 300, 372 Expression Editor 129, 166, 199
Dynamic Expressions → Expression Categories 167
Editor Conditional Functions 172, 203
517
Index
Date Functions 171 Generalized Modeling Language Plus

Date/Time Formats 177 (GML+) 63
Date/Time Formatting Mask 175 Grand Totals 321, 322
Date/Time Parts 176 Graphic engine 70, 71
Date/Time Units 176 GUI Machine 74
Dynamic Expressions 192, 202 GUI Machine Language 74
Number Formatting Mask 174 Guided Procedures 42, 87, 89, 131,
Numeric Functions 169 438
Operators 173
Scientific Functions 172 H
Text Functions 167
Time Functions 171 Hierarchy 297, 323
External key 297, 305 HTML 69, 71
External services 61 HTML components 71
HTML Text → UI Controls
F HTML View → Model Components
HTMLB 407
F4-help 306 HTTP sniffing 317, 338
Field mapping 193 HTTP(S) 69
Field name 198 HttpWatch 318, 423
Fields 184
Filter → Model Operators I
Filtering 136
Filters IF function 203
Key-figures 371 Image → UI Controls
Financial Instrument Controlling Image Manager 101
431 Images 154
Find Data → Task Panel Toolbar Inbound service template 379
Flash debugging console 421 InfoObject 301
Flexibility 29 InfoProvider Data 390
Floor Plan Information Integration Layer 27
Guided Activity 40 Inheritance of attributes 407
Forecasts 329 Innovation 29
Form View → Model Components Input Field → UI Controls
Formatted value 300 Input Form
Formulas 419 Add 186
Free form 323 Input Port 186, 193, 295, 304
Freestyle 35 Inspect → Task Panel Toolbar
Freestyle Kit for Visual Composer Integration broker 27
70, 75 Interaction problem 40
Internet Graphics Server (IGS) 315
G INVALID_VARIABLE_VALUES 450
IT architecture 436
Gauge -> s. UI Controls IT specialist 34
Generalized Modeling Language iView 28, 38, 179
(GML) 62, 72, 73, 85, 400
Generalized Modeling Language
Document Object Model (GML
DOM) 70
518
Index
J M
J2EE Connector Architecture (JCA) Macromedia Flex Markup Langu-
182, 280 age 64
J2EE Engine Main Menu 94
GUI Config Tool 399 BI 112
J2EE Log Configurator 420 Edit 96
Java API 69 Help 114
Java Connector (JCo) 182, 442 Model 94
Java Database Connectivity (JDBC) Search 96
283 Tools 98, 192
Java Dictionary 86 Window 114
Java Server Pages (JSP) 78 Main Toolbar 116
Java stack 27, 28, 67 Master Data 390
Database 68 Master Data Management 27
JavaScript 71 MDX 338
Multidimensional expressions 286
K MDX Editor 112, 286, 338, 343
MDX injection 338
Key figures 300, 371 Measures 321
Knowledge Management 27, 42, Member 322
378, 389 Menu BI → Main Menu
Menu Edit → Main Menu
L Menu Help → Main Menu
Menu Model → Main Menu
Language settings 451 Menu Search → Main Menu
Layer → Model Components Menu Tools → Main Menu
Layers Menu Window → Main Menu
Adding 215 Metadata 56, 184, 390
Creating 216 MetaObject facility 57
Navigation 218, 242 Microsoft Internet Explorer 52, 91
Wizard 227 Microsoft Internet Information Ser-
Layout Board → Layout tab ver 51, 67
Layout Manager 70, 71 Microsoft SQL Server 51, 67
Layout tab 93, 186 Microsoft Windows 51
Level 323 Microsoft XML 4.0 73, 91
List Microsoft XML Parser 52
Dynamic List 101 Mobile device 39
Static List 101 Model
Value Help List 101 Basic Model 179
List Box → UI Controls Browse 96, 117
Localization 409 Close 94
Log Viewer 420 Compile 98
Logging 419 Components 126
Logon ticket 184 Compose 118, 125
Lower → Model Operators Configure Element 118
Deploy 99
Export 95
Export To File 95
519
Index
Import 95 Reusability 36
Import From File 95 Simplicity 36
Inspect 120 Model-driven tools 35
Manage 95 Model-to-code approach 39
New 94 Model-View-Controller (MVC) 78
Open 94 Architecture 78
Print 95 MOF 57
Save 95 Moving average 321, 328
Search 98 Multi Channel Access 28
Model Browser 95 Multidimensional connectors 280
Model Components MXML 72, 78, 85
Chart View 128, 212, 221
Form View 126, 187, 222 N
HTML View 129
iView 179 Naming rules 94
Layer 131 Nested iView → Model Components
Nested iView 130 Number Formatting Mask → Expres-
Package 180 sion Editor
Page 180 Numbered List → UI Controls
Table View 127 Numeric Functions → Expression
Model Connectors 132 Editor
Data Store 134, 167, 221, 223,
244, 248, 406 O
End Point 132, 210
Popup Signal 135 Object Management Group 57
Signal In 133 OLAP 285
Signal Out 133 OLE DB for OLAP (ODBO) 286
Start Point 132, 209 Open Model → Model
Timer 135 Options 192
User Data 134, 167 Outbound service template 379
Model Operators 136
Combine 141 P
Distinct 139
Filter 136 Package 425
Group 141 PAR file 78, 401
Intersect 140 PDF 393
Lower 138 People Integration Layer 27
Sigma 137 Percentage Growth 321, 334
Sort 137 Percentage Share 321, 325
Subtract 140 Perforce 408
Union 139 Permissions 92, 184
Upper 138 Personalization 134, 167, 408
Model persistence 67 Perspective 86
Model-driven architecture 57 Pivot control 377
Model-driven development 35 Plain Text → UI Controls
Directness 37 Planned vs. Actual 321, 335
Exploratory 35 Planning functionality 392
Expressiveness 37 Popup iView 135, 207
Extensibility 37 Adding functionality 208, 210
Principles 35
520
Index
Creating 207 SAP List Viewer (ALV) 377

Open 207 SAP NetWeaver 26, 43
Select 207 SAP NetWeaver Application Server
Popup Signal → Model Connectors 27
Port Java stack 43
Flipping 230 SAP NetWeaver Business Intelli-
Portal archive 401 gence 27, 281
Portal Connector 80, 83, 419 SAP NetWeaver Developer Studio
Portal Connector Framework 80, 31, 41, 48, 78
83, 85 SAP NetWeaver Development Infra-
Portal Content Catalog 81, 110, 257 structure 68, 86
Portal Content Directory (PCD) 78, SAP NetWeaver Master Data
81, 82, 92 Management 27
Portal deployment 419 SAP NetWeaver Portal 27, 28, 43,
Portal eventing 421 68, 80, 85
Portal page 180 Connector Framework 38
Portlet 28 Content Catalog 38
Ports 184 System Landscape 38
Process chain 462 SAP NetWeaver Portal Content Stu-
Process Integration Layer 27 dio 30
Progress Bar 240 SAP NetWeaver Visual Composer
Progress Bar → UI Controls 31
Pushbutton → UI Controls Add-Ons 52, 80, 81
Architecture 68
Q Client 69
Components 68
Query 435 Configuration 105, 106, 107, 109
Query Designer 305 Console 124
Convergence 63
R Core 70
Customizing 104
Radio Group → UI Controls Deploy applications 190
Rank Change 321, 330 Kits 70, 75
Relational connectors 280 Logging off 95
Remote Function Call (RFC) 435 Logging on 92
Return on investment (ROI) 29 Navigation 98
RFC 391 Navigation back 98
Accessing 184 Navigation Bar 123
RFC library 182 Navigation forward 98
Rich client 39 Prerequisites 91
Rich Internet Applications 72 Repository 77
Roles 184 Roadmap 42
RSRT2 371 Server 68, 75, 85, 419
Storyboard 68, 69, 85, 93
S Storyboard components 70
SAP NetWeaver Visual Composer for
SAP Composite Application Frame- NetWeaver 2004s 42, 43
work 31, 41, 49, 59, 61, 87, 88, Supported platforms 44, 51
438 Supported UI technologies 44, 51
SAP Query 282
521
Index
SAP Query application 282 Suppress sum 303

SAP system adapter 182 SWF → see Adobe Flash file
SAP Visual Administrator 316 System alias 92, 441
SAP Visual Composer 6.0 42 System Alias Manager 102
SAP xApp Analytics 43, 46, 427 System landscape 82, 85, 184
SAP_JDBC 406 System types 184
Scalable Vector Graphics (SVG) 70,
71 T
Scientific Functions → Expression
Editor Table View 192, 194
Scorecarding 427 Add 194
Best Practices 427 Table Columns 195
SE80 391 Table View → Model Components
SEM 427 Task panel 117, 183
Serialization error 456 Task Panel Toolbar 117, 183
Service 435 Browse 117
Service consumer 435 Compose 118
Service provider 435 Configure 118
Service Repository 435 Deploy 120
Service request 435 Find Data 120
Service-Oriented Architecture (SOA) Inspect 120
435 Test Data Service 185
Severity 420 Text editor 162
Sigma → Model Operators Text Functions → Expression Editor
Signal In → Model Connectors Ticker → UI Controls
Signal Out → Model Connectors Tile View 407
Single Sign-On (SSO) 92, 442 Time Functions → Expression Editor
SOAP 285 Timer → Model Connectors
Sort → Model Operators Toggle Button → UI Controls
Sort Operator 195 Toolbar 205
Add 195 Adding a button 206
Configure 196 Creating 205
Direction 197 Removing 207
Sorting 137, 195, 370 Tools Menu → Main Menu
Source Board → Source Tab Top N 321, 331, 336
Source tab 93 Total cost of ownership (TCO) 29,
Special characters 407 40
Spinner → UI Controls Transactional applications 181
SQL editor 112, 285, 338 Translation
SQL field 285 Formula 419
SQL injection 317, 338 Text string 418
Standardized UI 40 Worklists 409
Start Point → Model Connectors Translation → Localization
Static List → List Translation files 409
Store 391 Translation information 85
Stored procedure 435 Transport 399, 425
Storing global data 134 Transport Package Tool 400
Strategic Enterprise Management Treasury and Financial Investment
427 Controlling 430
Styles 199
522
Index
Treasury and Risk Management User Management Engine (UME)

(TRM) 430 67, 69, 79, 85, 92
Trend over time 321, 332 User mapping 92, 184
User Task 40
U User-friendly UI 30
UI Building Blocks → Web Dynpro V

40
UI Controls 142 Validation scope 406
Bulleted List 143 Value Help 306
Calendar 144, 234 Add 307
Checkbox 145 Value Help Configuration Wizard
Clock 146 307
Combo Box 147 Value Help List → List
Control Properties 189 Variables 297, 304
Control Properties Dialog 189 Mandatory 459
Date Picker 148, 321 Versioning 407
Drop-Down List 149, 222, 243, Views
244, 458 Layout 188
Expression Box 150 Visibility 221
Gauge 151 Visibility Condition 224
HTML Text 153 Visual Composition Language (VCL)
Image 154 63
Input Field 155 VSlider → UI Controls
List Box 156
New 198 W
Numbered List 157
Plain Text 157 WAD 379
Progress Bar 158 Web 39
Pushbutton 159, 223 Web API 281
Radio Group 160 Web Application Designer 31, 379
Spinner 161 Web browser 84
Text Editor 162 Web Dynpro 39, 43, 59, 60, 438
Ticker 163, 239 Component 40
Toggle Button 164 Foundation 40
VSlider 165 Freestyle 61
UI strategy 38 Patterns 61
UIDPW 442 UI Building Blocks 40, 438
UI-driven elements 74 Web Dynpro UI 39
Unformatted value 300 Web Dynpro for Visual Composer
Unit 300 40
Universal Data Integration (UDI) Web Dynpro Runtime 69, 78, 85
280, 283 Deploying applications 192
Universal Modeling Language (UML) Web service 102, 435
57 Authentication 104
Universal Worklist (UWL) 104, 347 Web Service Connector 83
Upgrading models 407 Web service system 259
Upper → Model Operators Creating 259
User Data → Model Connectors Defining 102
523
Index
Web services 43, 83, 406 X

Systems 43
Web UI 39 xApps 87
WEBAPI 295 XGraph language (XGL) 37, 72, 85
Wizard → Layers XMI 58
Wizards 131 XML 69
Work Center 438 XML for Analysis (XMLA) 285
Workbook 389
Workspace environment 70 Y
World Wide Web Consortium (W3C)
74 Year-to-date 326
Write back 460 YTD 326
WSDL 43, 102, 259
Z
Zero Activity 321, 336
Z-order 221
524

Sappress NetWeaver Visual Composer

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Sappress NetWeaver Visual Composer

Transféré par

Droits d'auteur :

Formats disponibles

099.book Seite 3 Montag, 9.

Oktober 2006 2:45 14

Carsten Bönnen, Mario Herger

SAP NetWeaver™ Visual Composer

2 SAP NetWeaver Visual Composer .......................... 25

3 Model-Driven Development ................................... 55

4 Architecture and Concepts ..................................... 67

5 Visual Composer Basics .......................................... 91

6 Building Applications ............................................. 179

7 Analytical Applications ........................................... 279

8 Application Lifecycle ............................................... 399

9 Business Examples ................................................. 427

10 Visual Composer and Enterprise SOA .................... 435

A Modeling and Tips .................................................. 441

B Coding for Integration Examples ............................ 463

C The Authors ............................................................ 513

Index ....................................................................... 515

2 SAP NetWeaver Visual Composer ........................... 25

3 Model-Driven Development ................................... 55

4 Architecture and Concepts ...................................... 67

4.1.4 Web Browser ............................................... 84

5 Visual Composer Basics .......................................... 91

5.3.18 Pushbutton ................................................... 159

6 Building Applications .............................................. 179

7 Analytical Applications ........................................... 279

7.2.10 Exceptions .................................................... 346

8 Application Lifecycle ............................................... 399

9 Business Examples .................................................. 427

10 Visual Composer and Enterprise SOA ..................... 435

Appendix ........................................................................ 439

B Coding for Integration Examples .......................................... 463

Index ......................................................................................... 515

SAP NetWeaver is a product that provides the tools to follow a new

Most companies do not want to continue spending large portions of

SAP NetWeaver is not only providing the tools to realize an Enter-

is already well underway in providing the technology through its

What reduction of development time can be expected? Since the

To sum it up, SAP recommends an Enterprise SOA to stay flexible,

Klaus Kreplin, Walldorf 2006

One of the longest chapters in this book is still ahead of you,

When building an application with SAP NetWeaver Visual Composer

6.1 Getting Started—The Basic Model

Figure 6.1 The Main Elements …

From a Visual Composer perspective, a portal page is nothing more

Figure 6.2 ... with an iView in the Page Element …

By definition,“Business packages provide out-of the-box portal applica-

Transactional Applications—Accessing ERP from Visual Composer 6.2

Create a Model Create a Package

Create a Page Create an iView

Connect to Backend Access Data Service

Design the iView Logic Create the Layout

Check Model for Errors Deploy Package

Figure 6.4 Steps in Building a Flexible Application with Visual Composer

All other steps (from Connect to Backend to Deploy Package) are

6.2 Transactional Applications—Accessing ERP

6.2.1 The First Application

Transactional Applications—Accessing ERP from Visual Composer 6.2

Accessing Data Services

1. After creating a basic model as explained in Section 6.1, you can

Figure 6.5 Task Panel Toolbar—Find Data

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.6 Definition of a Data Service

Figure 6.7 Data Service Context Menu