sap netweaver visual composer - amazon s3...sap netweaver is not only providing the tools to realize...

54
Bonn Boston Carsten Bönnen, Mario Herger SAP NetWeaver™ Visual Composer

Upload: others

Post on 19-Apr-2020

21 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: SAP NetWeaver Visual Composer - Amazon S3...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

Bonn � Boston

Carsten Bönnen, Mario Herger

SAP NetWeaver™ Visual Composer

099.book Seite 3 Montag, 9. Oktober 2006 2:45 14

Page 2: SAP NetWeaver Visual Composer - Amazon S3...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

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

099.book Seite 5 Montag, 9. Oktober 2006 2:45 14

Page 3: SAP NetWeaver Visual Composer - Amazon S3...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

7

Contents

Foreword ................................................................................... 13

1 Introduction ............................................................ 17

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

2.1 SAP NetWeaver ......................................................... 262.2 Building Applications for SAP NetWeaver .................. 292.3 A Model-Driven Tool ................................................. 31

2.3.1 From Business Analyst to Business Process Expert ............................................... 32

2.3.2 Freestyle Models ........................................... 342.3.3 SAP’s UI Strategy .......................................... 382.3.4 Benefits of SAP NetWeaver Visual

Composer ..................................................... 402.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 ........................................................................ 563.2 Model-to-Code Approach .......................................... 583.3 Model-Driven Development Within SAP ................... 59

3.3.1 SAP NetWeaver Business Intelligence ............ 603.3.2 Web Dynpro ................................................. 603.3.3 SAP Composite Application Framework ........ 613.3.4 Comparison Matrix ....................................... 61

3.4 Visual Composer as Visual Modeling Tool .................. 623.5 Parting Thoughts ....................................................... 64

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

4.1 Architecture of SAP Visual Composer for NetWeaver 2004s ...................................................... 684.1.1 Visual Composer Storyboard ......................... 694.1.2 Visual Composer Server ................................. 754.1.3 SAP NetWeaver Portal .................................. 80

099.book Seite 7 Montag, 9. Oktober 2006 2:45 14

Page 4: SAP NetWeaver Visual Composer - Amazon S3...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

Contents

8

4.1.4 Web Browser ............................................... 844.1.5 Summary ...................................................... 84

4.2 Visual Composer within the SAP NetWeaver Development Infrastructure ...................................... 86

4.3 How to Choose the Right Modeling Tool .................. 874.3.1 SAP Composite Application Framework ........ 884.3.2 Guided Procedures ....................................... 894.3.3 Business Process Modeling ........................... 894.3.4 SAP Business Explorer Suite .......................... 90

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

5.1 Visual Composer Storyboard ..................................... 935.1.1 Main Menu .................................................. 945.1.2 Main Toolbar ............................................... 1165.1.3 Task Panel and Task Panel Toolbar ............... 1175.1.4 Board Toolbox .............................................. 1225.1.5 Navigation Bar ............................................. 1235.1.6 Console ........................................................ 124

5.2 Composing a Model .................................................. 1255.2.1 Components ................................................. 1265.2.2 Connectors ................................................... 1325.2.3 Operators ..................................................... 1365.2.4 Additional Operators .................................... 139

5.3 UI Controls ............................................................... 1425.3.1 Bulleted List ................................................. 1435.3.2 Calendar ....................................................... 1445.3.3 Checkbox ..................................................... 1455.3.4 Clock ............................................................ 1465.3.5 Combo Box .................................................. 1475.3.6 Date Picker .................................................. 1485.3.7 Drop-Down List ........................................... 1495.3.8 Expression Box ............................................. 1505.3.9 Gauge .......................................................... 1515.3.10 HSlider ......................................................... 1525.3.11 HTML Text ................................................... 1535.3.12 Image ........................................................... 1545.3.13 Input Field ................................................... 1555.3.14 List Box ........................................................ 1565.3.15 Numbered List ............................................. 1575.3.16 Plain Text ..................................................... 1575.3.17 Progress Bar ................................................. 158

099.book Seite 8 Montag, 9. Oktober 2006 2:45 14

Page 5: SAP NetWeaver Visual Composer - Amazon S3...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

Contents

9

5.3.18 Pushbutton ................................................... 1595.3.19 Radio Group ................................................. 1605.3.20 Spinner ......................................................... 1615.3.21 Text Editor .................................................... 1625.3.22 Ticker ............................................................ 1635.3.23 Toggle Button ............................................... 1645.3.24 VSlider .......................................................... 165

5.4 Expression Editor ....................................................... 166

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

6.1 Getting Started—The Basic Model ............................. 1796.2 Transactional Applications—Accessing ERP from

Visual Composer ........................................................ 1816.2.1 The First Application ..................................... 1826.2.2 Adding More Complex Data Services ............ 1926.2.3 Adding Toolbars, Popups, and Charts ............ 2056.2.4 Adding Layers ............................................... 2156.2.5 Working with Data Stores and Visibility

Conditions .................................................... 2216.2.6 Adding a Wizard ........................................... 2276.2.7 Eventing in Visual Composer ......................... 251

6.3 Accessing Web Services ............................................. 259

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

7.1 BI Kit Connections ..................................................... 2797.1.1 SAP NetWeaver BI ........................................ 2817.1.2 SAP Query .................................................... 2827.1.3 JDBC ............................................................. 2837.1.4 XMLA ........................................................... 2857.1.5 ODBO ........................................................... 286

7.2 BI Kit Tools ................................................................ 2877.2.1 First BI Example ............................................ 2877.2.2 BI Integration Wizard .................................... 2927.2.3 SAP BI Queries .............................................. 2957.2.4 JDBC ............................................................. 3127.2.5 SAP Query .................................................... 3197.2.6 XMLA ........................................................... 3197.2.7 ODBO ........................................................... 3387.2.8 SQL Editor .................................................... 3387.2.9 MDX Editor .................................................. 343

099.book Seite 9 Montag, 9. Oktober 2006 2:45 14

Page 6: SAP NetWeaver Visual Composer - Amazon S3...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

Contents

10

7.2.10 Exceptions .................................................... 3467.2.11 Alerts ........................................................... 3477.2.12 Hierarchies ................................................... 3577.2.13 Sorting ......................................................... 3707.2.14 Filtering ....................................................... 3717.2.15 Dynamic Columns ........................................ 3727.2.16 Pivot and ALV .............................................. 377

7.3 Integration ................................................................ 3787.3.1 BI Elements .................................................. 3787.3.2 BI Workbooks .............................................. 3897.3.3 BI Documents Store ..................................... 3897.3.4 Planning Functionality .................................. 3927.3.5 Exporting Data to Different Targets .............. 392

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

8.1 Visual Composer System Landscape .......................... 3998.1.1 Transporting Models .................................... 3998.1.2 Transporting Applications ............................. 4008.1.3 Down Porting Applications ........................... 4038.1.4 Upgrading Models and Applications ............. 4078.1.5 Versioning .................................................... 4078.1.6 Personalization ............................................. 4088.1.7 Localization .................................................. 4098.1.8 Testing and Monitoring ................................ 4198.1.9 Documentation and Help ............................. 423

8.2 Backend and Portal Systems ...................................... 4238.2.1 Portal ........................................................... 4238.2.2 SAP NetWeaver BI ....................................... 4238.2.3 Other Data Sources ...................................... 425

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

9.1 Best Practice Scorecarding ........................................ 4279.2 Account Analytics ..................................................... 4299.3 Treasury and Financial Investment Controlling .......... 4309.4 Summary .................................................................. 433

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

099.book Seite 10 Montag, 9. Oktober 2006 2:45 14

Page 7: SAP NetWeaver Visual Composer - Amazon S3...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

Contents

11

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

A Modeling and Tips ............................................................... 441A.1 General Portal Issues ................................................. 441A.2 Enable the Visual Composer Log ................................ 443A.3 Unlocking a Visual Composer Model ......................... 443A.4 Percentage Sign ......................................................... 444A.5 Chart Design .............................................................. 445A.6 Changing Colors for Visual Composer

Applications .............................................................. 445A.7 Searching for Visual Composer iViews in

the Portal .................................................................. 446A.8 Performance Issues with BI JDBC Connector .............. 447A.9 No Metadata from the BI JDBC Connector ................. 448A.10 No Metadata from the BI XMLA Connector ............... 448A.11 Cannot See the InfoCube Under BI XMLA .................. 448A.12 Performance Issues and Limitations with the

BI XMLA/ODBO Connector ....................................... 449A.13 INVALID_VARIABLE_VALUES# .................................. 450A.14 Wrong Language ....................................................... 451A.15 Language Mapping .................................................... 452A.16 Strange Names for Query Elements ............................ 452A.17 Web Service Enablement ........................................... 452A.18 “Authority Check” Error ............................................. 454A.19 “Virtual Interface not found” Error ............................. 455A.20 “Serialization” Error ................................................... 456A.21 Drop-Down List and Combo Box ............................... 458A.22 Visual Composer and SAP BW/

SAP NetWeaver BI Sizing ........................................... 458A.23 Formats of Date, Time, Units ..................................... 458A.24 Problems with Mandatory Variables in BI XMLA ........ 459A.25 SAP Query Result Fields and Select Fields .................. 459A.26 Writing Data Back ..................................................... 460A.27 Jump to Detailed Analysis (from Alert or Any

Other Link) ................................................................ 460A.28 Using a Dynamic RFC ................................................. 461A.29 Sorting on BI Data with More Than 500 Records ....... 461A.30 Calling Analysis Process Designer or Process Chain .... 462

099IVZ.fm Seite 11 Mittwoch, 11. Oktober 2006 3:33 15

Page 8: SAP NetWeaver Visual Composer - Amazon S3...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

Contents

12

B Coding for Integration Examples .......................................... 463B.1 BEx Integration ......................................................... 463B.2 Document Integration ............................................... 472B.3 Additional Code for Meta and Transactional

Data Document Association ...................................... 506B.4 Dynamic RFC ............................................................ 510

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

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

099.book Seite 12 Montag, 9. Oktober 2006 2:45 14

Page 9: SAP NetWeaver Visual Composer - Amazon S3...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

13

Foreword

Foreword

SAP NetWeaver is a product that provides the tools to follow a newarchitecture concept called Enterprise Services-Oriented Architec-ture (Enterprise SOA). One of these new and exciting developmenttools to create applications calling enterprise services is the VisualComposer. Before we look into its details described in this book byCarsten Bönnen and Mario Herger, let us get some common groundfirst: Why is it necessary to become familiar with an Enterprise SOA?What role does SAP NetWeaver play in it? What’s the benefit of itall?

Most companies do not want to continue spending large portions oftheir IT budget on maintaining the status quo. That is investing inmaintaining the current infrastructure or building quick fixes thatresult in even more costs for the future. They’d rather free moneyand time to build applications from their users’ wish list long sinceneglected or build new applications. Regardless of the applicationsthat have to be built, they all follow this pattern. IT is not alignedwith the business and thus not set up for rapid change, which is oneof the main drivers in competitive business situations. Adhering toan Enterprise SOA will give customers the flexibility to adapt to newmarket requirements and keep up with the speed of change. TheEnterprise SOA’s main aim is to realize a business-driven approachto an architecture of loosely coupled enterprise services for adaptivebusiness solutions. The enterprise services are Web services withbusiness logic and they are created and maintained with tools pro-vided by SAP NetWeaver. Once you are able to leverage enterpriseservices by utilizing the many development, administration andmaintenance 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 toimplement, involve little training effort, and grant you with lean andtransparent 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-blownBusiness Process Platform (BPP), with core business objects andready-to-run business processes leveraging enterprise services. SAP

099.book Seite 13 Montag, 9. Oktober 2006 2:45 14

Page 10: SAP NetWeaver Visual Composer - Amazon S3...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

14

Foreword

is already well underway in providing the technology through itsSAP 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 describeshundreds of services that are available right now. So you can startany minute to implement an Enterprise SOA that will help you gainbusiness advantages and help your IT and business stay flexible.

Of course you will also be able to develop your own custom servicesand applications. If you put the right tools into the hands of the rightusers, you can increase flexibility, develop faster, and free time andmoney for new custom development projects.

How does the Visual Composer help you? What does it allow you todo and who should use it? The Visual Composer allows you toquickly and easily build applications and prototypes using a visualinterface rather than manually writing code. Instead of having toconcentrate on technical and programming know-how, you usegraphical 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. Theywill be able to apply their inherent understanding of business pro-cesses and their companies’ requirements to model Visual Composerapplications without having any development expertise or better stillwithout having to have it. The Visual Composer lets them tailor theirmodels to their end-users’ needs, e.g., the same Visual Composerapplication can be deployed to run in more than one UI, for examplethe SAP NetWeaver Portal, a Web Dynpro application or a mobileapplication. The UI building blocks are interlinked with enterpriseservices to service-enable your applications.

What reduction of development time can be expected? Since theVisual Composer’s development environment is so intuitive, you canexpect a huge decrease of development time. For example, SAP hasused the Visual Composer to model about 200 xApps for BI Analyticsin six weeks, one of which received the Macromedia MAX price foranalytical applications last year. Some of our customers have usedthe Visual Composer for fast prototyping for projects running nolonger than a few weeks, sometimes days. So not only will yourdevelopment time and costs get significantly reduced, but you willalso be able to easily customize and adapt a Visual Composer model

099.book Seite 14 Montag, 9. Oktober 2006 2:45 14

Page 11: SAP NetWeaver Visual Composer - Amazon S3...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

15

Foreword

to changing business needs. You will gain speed, flexibility and youwill have freed time to get to the backlog of internal developmentrequests that you can now model rapidly, deploy, and adapt quicklyusing 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 maintainand change your IT and applications are provided by SAPNetWeaver, which will move ahead to become a Business ProcessPlatform to offer an extensive and rich set of enterprise services. Oneof 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 loveto hear from you.

Klaus Kreplin, Walldorf 2006Executive Vice President and Corporate Officer of SAP GroupSAP NetWeaver

099.book Seite 15 Montag, 9. Oktober 2006 2:45 14

Page 12: SAP NetWeaver Visual Composer - Amazon S3...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

179

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 Composerfrom scratch, there are some initial steps that you must take:

Visual Composer First Step—Creating a Model

1. First, you must create the model. One way to do this is by openingthe Model menu and choosing New Model from the list. An emptymodel is created.

2. Before you continue, it might make sense to configure the workenvironment according to your needs (see Section 5.1.1 on theOptions 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

Visual Composer 101—A Basic Model

In Chapter 5, we said that Visual Composer is used to build applica-tions for SAP NetWeaver Portal. Figure 6.1 shows the elements thatrepresent known entities from the portal world. All entities can beopened by double-clicking on them in the Storyboard of the VisualComposer. Starting with the basic element on the right, an iViewdefines the smallest entity of content in SAP NetWeaver Portal. TheiView element is the basic element for all Visual Composer elements,and without it, you cannot model an application. The applicationlogic and flow is defined in one or several iView elements.

099.book Seite 179 Montag, 9. Oktober 2006 2:45 14

Page 13: SAP NetWeaver Visual Composer - Amazon S3...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

180

Building Applications6

Figure 6.1 The Main Elements …

From a Visual Composer perspective, a portal page is nothing morethan a container for iViews. Figure 6.2 shows the same elements asFigure 6.1 but this time the iView is part of the Page element. Notethat you can define applications that consist only of iViews in VisualComposer and set up the pages later as an administrator in SAPNetWeaver 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.” BecauseVisual Composer is used to build business applications, it thereforemakes sense that one of the many elements that it offers represents abusiness package: Package. Figure 6.3 shows this element with theportal content (the page and the iView that we saw in Figure 6.1 andFigure 6.2 before) in it.

Figure 6.3 ... and with the Same Page in the Package

From Packageto iView

Figure 6.4 outlines all the steps of building an application with VisualComposer: First, you Create a Model, and then you Create a Packagewithin the model by dragging the Package element from the taskpanel into the model. To open the package, double-click on it. Then

099.book Seite 180 Montag, 9. Oktober 2006 2:45 14

Page 14: SAP NetWeaver Visual Composer - Amazon S3...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

181

Transactional Applications—Accessing ERP from Visual Composer 6.2

you Create a Page by dragging a Page element from the task panelinto the package and open it with a double-click. Next, you Create aniView by dragging the iView element from the task panel onto thepage. By double-clicking on the iView element, you open the iViewand can start modeling your application.

Figure 6.4 Steps in Building a Flexible Application with Visual Composer

All other steps (from Connect to Backend to Deploy Package) areexplained in the examples later on in this chapter. Note that allexamples 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 connectto SAP Enterprise Resource Planning (ERP) systems. To do so, youwill access Business Application Programming Interfaces (BAPIs) thatprovide the functionality necessary to implement your application.

Connect to Backend

Create an iView

Create a Package

Create a Page

Create a Model

Design the iView Logic Create the Layout

Access Data Service

Check Model for Errors Deploy Package

Flexible Application

099.book Seite 181 Montag, 9. Oktober 2006 2:45 14

Page 15: SAP NetWeaver Visual Composer - Amazon S3...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

182

Building Applications6

SAP SystemAdapter

To access ERP systems, Visual Composer uses the SAP System adapterfor 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 Systemadapter, you can access SAP ERP systems, Customer RelationshipManagement systems (like mySAP CRM), and Business Intelligencesolutions (like SAP NetWeaver BI).

6.2.1 The First Application

Keep it Simple—Our First

Application

Imagine the following situation. You’re a member of a project team.You have a basic understanding of IT and an even better understand-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 thebusiness process expert.

In this particular scenario, your project lead comes in and tells you tobuild a relatively simple application. The application is supposed todisplay the address of a customer after typing in the customer num-ber. Furthermore, since this application is intended to be used in aSAP NetWeaver environment, it should be displayed using the SAPNetWeaver Portal.

Sounds easy, doesn’t it? Remember in this setup that you don’t knowhow to develop applications, that is, no Java, no ABAP, no nothing …And now you are supposed to build an application that runs in SAPNetWeaver Portal and also accesses data from a backend system.

Make it Fast—Building anApplication

Quickly

To add an interesting twist to this situation, because the applicationis considered to be so simple, the request is for it to be available bynoon and it is now 9 am. If you have a good developer who is readilyavailable, you should be able to meet this goal; however, as luckwould have it, there is no developer on hand and the application stillhas 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 buildthis application without requiring development skills and withoutneeding three hours to implement it.

099.book Seite 182 Montag, 9. Oktober 2006 2:45 14

Page 16: SAP NetWeaver Visual Composer - Amazon S3...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

183

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 canbegin building your application. Open the iView from the basicmodel and fill the iView with application elements and logic.

2. After choosing Find Data from the task panel toolbar, you will seean input form in the task panel. Using the input form, you cannow decide on which system you want to access. For the follow-ing example, you will choose an ERP system. Figure 6.5 shows analready conducted search on an ERP system named XK3.

Figure 6.5 Task Panel Toolbar—Find Data

099.book Seite 183 Montag, 9. Oktober 2006 2:45 14

Page 17: SAP NetWeaver Visual Composer - Amazon S3...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

184

Building Applications6

3. As you can see in Figure 6.5, using the Look for field, you can nowdetermine how you want to search for a data service. Visual Com-poser differentiates from among the various system types (such asERP, BI, JDBC systems) that it can access. Depending on the type ofsystem that you select, different entries will appear. For example,for ERP systems, you can either Look for a service by name, Lookfor a service by group, or Browse the service catalog. In this exam-ple, you want to Look for a service by name.

Searching fora Data Service inVisual Composer

4. You can now type in the search criteria in the Service field.Because you’re looking for details on a customer, you first try thefollowing: *CUSTOMER*. Then, if you expect the data service thatyou’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 RFCswill 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 thatyou want to use for your application. In this example, that data ser-vice is BAPI_CUSTOMER_GETDETAIL. To import the metadatadescribing this data service into your iView, you can either double-click on the data service or position it directly in your iView byusing drag-and-drop.

6. Before the representation of the data service will be visible in yourmodel, Visual Composer will ask you which ports and fields you want

Attention

The list of systems in the System drop-down list may vary, depending onthe user. As mentioned before, Visual Composer uses the system land-scape of SAP NetWeaver Portal. It connects to the portal with the sameuser you used to log on to Visual Composer.

The roles and the permissions of the user define which systems you will seein the drop-down list. In addition, the logon ticket or the user mapping ofthis user are used for authentication purposes on the backend systems. Ifthere is any kind of authorization that is maintained for the user on thebackend, it will be used as well. This way Visual Composer ensures thatthe user cannot access systems (authentication) he must not access andcannot access data services (authorization) he must not use.

099.book Seite 184 Montag, 9. Oktober 2006 2:45 14

Page 18: SAP NetWeaver Visual Composer - Amazon S3...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

185

Transactional Applications—Accessing ERP from Visual Composer 6.2

to use (see Figure 6.6). If you select too many fields1 in the DefineData Service dialog (see right side), you’ll receive a system warning.

Figure 6.6 Definition of a Data Service

Suggestions to Optimize Your Model—Visual Composer Warnings

You can use the following feature to optimize your model. In allthe examples that we have selected for this book, you will be ableto select fields and play around with them, without having toimport the metadata again. You will then see the new BAPI thatyou imported above now shown as an element on the Storyboard.

7. To ensure that the data service—in this example, the BAPI—thatyou imported really does what you expect it to do, you can checkthe functionality of that data service. By right-clicking on the dataservice—the BAPI representation in your model—you can open acontext 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 Toolsmenu explained in Chapter 5.

099.book Seite 185 Montag, 9. Oktober 2006 2:45 14

Page 19: SAP NetWeaver Visual Composer - Amazon S3...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

186

Building Applications6

Figure 6.8 Test Data Service Dialog

8. For the BAPI_CUSTOMER_GETDETAIL, you can enter test inputfor five fields, although only two fields are required—Customernoand Pi Salesorg. Required input fields are marked in red and areeach affixed with an asterisk (*).

An example entry for a customer number is 0000001000 and anexample entry for a sales organization is 1000. With these two val-ues, you can test the functionality of the data service by clickingon Execute.

You have now created your first representation of a data service inVisual Composer. If you glance at the Layout tab, you’ll notice thatthere are no views yet.

Creating Views

Creating YourFirst View

1. On the Design tab, you’ll see an Input port on the left side of thedata service. By dragging out from this port and releasing themouse 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 allthe fields that you might need when using BAPI_CUSTOMER_GETDETAIL.

099.book Seite 186 Montag, 9. Oktober 2006 2:45 14

Page 20: SAP NetWeaver Visual Composer - Amazon S3...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

187

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.9 Dragging Out a Context Menu from the Input Port

If a BAPI has too many input fields, Visual Composer will requireyou to select from the list of input fields, but you can always selectall fields using Select all.

3. Creating an output view is as simple as creating an input form. Bydragging out from Pe Address—an output port of BAPI_CUSTOMER_GETDAIL—and releasing the button, you can openanother context menu. You can then choose Add Form View fromthe 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 youcan now decide on the fields that you want to use for your FormView. For this example, choose CITY, COUNTRY, NAME, and STREET.Submit your selection by clicking OK.

099.book Seite 187 Montag, 9. Oktober 2006 2:45 14

Page 21: SAP NetWeaver Visual Composer - Amazon S3...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

188

Building Applications6

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 arestill some things that you would like to change such as the fieldnames.

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 arereally required—the ones marked with red asterisks (*) on the Lay-out tab. For this sample application, all you need to do is to providethe input for the required fields.

DeletingSuperfluous Fields

1. Removing the other three fields is easy. By marking the fields andpressing the Del key, you can remove the fields. You can markmore than one field by first using the Ctrl key and then using theDel key to remove them.

Another solution would be to right-click on the input form andchoose Configure Element from the context menu. On the lowerpart 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 toFigure 6.12. This can be done easily by using drag-and-drop to

099.book Seite 188 Montag, 9. Oktober 2006 2:45 14

Page 22: SAP NetWeaver Visual Composer - Amazon S3...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

189

Transactional Applications—Accessing ERP from Visual Composer 6.2

position the forms. In addition, you can grab the borders of theforms to enlarge or shrink them.

Figure 6.12 Arranging the Layout of the First Application

Renaming Fields3. After arranging the forms and the fields within them—using thesame mechanism as you used for the forms—you can change thenames of the fields as well as the names of the forms. By markingthe 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 onthe field. From this context menu, choose Edit Label to change thename of the element. You can employ this method for almostevery 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 ControlProperties dialog, you can modify all controls that are available in VisualComposer. 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 inVisual Composer. For a detailed description of the UI controls, see Section5.3.

099.book Seite 189 Montag, 9. Oktober 2006 2:45 14

Page 23: SAP NetWeaver Visual Composer - Amazon S3...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

190

Building Applications6

4. As an example of modifying a control, youyou can determine theLabel position on the Display tab of the Control Properties dialog(see Figure 6.13). You can experiment with it for the exampleabove.

Figure 6.13 The Display Tab of the Control Properties Dialog

Deployment

From VisualComposer to

SAP NetweaverPortal—Deploying

Your Application

Before you deploy your application, you should ensure that themodel looks similar to the one shown in Figure 6.14.

Figure 6.14 Model of Your First Application

1. To deploy your application to the SAP NetWeaver Portal, you cannow click on Deploy in the task panel toolbar. Deploy to Portalwill 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 youof the deployment progress. In addition, you will receive messageswith information on the different steps that Visual Composer isrunning through such as compiling and deploying.

099.book Seite 190 Montag, 9. Oktober 2006 2:45 14

Page 24: SAP NetWeaver Visual Composer - Amazon S3...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

191

Transactional Applications—Accessing ERP from Visual Composer 6.2

3. Figure 6.15 shows the Deploy to Portal dialog in the task panelafter a successful deployment.2 View source code and Run “Basi-capplicationiview” are links that can be used to access the sourcecode and run the application in SAP NetWeaver Portal.

Figure 6.15 Deploy to Portal Dialog

Running Your Application

4. Click on Run “Basicapplicationiview” to open your application inSAP NetWeaver Portal. Your application should look similar tothe 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 seeView source code.

099.book Seite 191 Montag, 9. Oktober 2006 2:45 14

Page 25: SAP NetWeaver Visual Composer - Amazon S3...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

192

Building Applications6

You have now built your first simple application. We’ll now haveyou tackle more challenging applications in order to give you a betterunderstanding 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, yourproject lead is convinced that you can build applications in a veryshort time frame.

First, the bad news. He asks you to build an application that shows allsales orders for the customer from the first example. The ordersshould 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, thelist should be sorted. Now, for the good news. This time, you’ll havean entire day to build the application.

One Input Formfor Two BAPIs

In the next example, you will extend the application that you built inthe first application. You will reuse the information from the createdinput form (Enter Customer) as input for another BAPI: BAPI_SALESORDER_GETLIST. Then, you will modify the output of thisBAPI by sorting it before displaying it in a Table View. Next, you willadd a new column to the Table View, accessing data from anotherfield and using this data to determine the color of the table cells. Youwill also invoke a second BAPI: BAPI_SALESORDER_GETSTATUS.For the Table View that displays the data from this BAPI, you willadd a new column based on dynamic expressions.

Note

By default, Visual Composer will use Adobe Flash runtime to build anapplication. As mentioned before, you can choose another runtime, thatis, Web Dynpro. For more information, see the explanation of Optionsfrom the Tools menu in Section 5.1.1.

099.book Seite 192 Montag, 9. Oktober 2006 2:45 14

Page 26: SAP NetWeaver Visual Composer - Amazon S3...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

193

Transactional Applications—Accessing ERP from Visual Composer 6.2

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 itcan be connected to the already existing input form Enter Cus-tomer. You just drag out from the Input port and release themouse button after moving it to the out port of Enter Customer. Ared line will mark the connection that will be created beforereleasing the mouse button.

3. By testing BAPI_SALESORDER_GETLIST with your first applica-tion, you ensure that the BAPI provides the functionality that youwant. At the same time, you notice that the required fields areCustomer Number and Sales Organization. This means that yourinput form already has the correct input fields to fetch the datafor the required fields.

Field Mapping

If you remember your first application, you’ll recall that the fieldsrequired by BAPI_CUSTOMER_GETDETAIL were named differently.So there is no way yet for BAPI_SALESORDER_GETLIST to know

099.book Seite 193 Montag, 9. Oktober 2006 2:45 14

Page 27: SAP NetWeaver Visual Composer - Amazon S3...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

194

Building Applications6

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 inthe task panel. On the lower part of the task panel, you can assignvalues to the input fields. In this example, the value @CUSTOMERNO isassigned to the input field CUSTOMER_NUMBER and @PI_SALESORG isassigned to SALES_ORGANIZATION. The data service is now importedcorrectly into the model.

2. According to the settings for Automatically create data mappingwhen source and target from the Composing tab of Options fromthe Tools menu (see Section 5.1.1), Visual Composer will try to doan automatic data mapping. Depending on this setting and thedata, 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 SalesOrders port. When you release the button, a context menu willopen, from which you can again choose Add Table View. VisualComposer realizes that there are too many fields and asks you toselect the ones that you want to use in the Table View. Youchoose DOC_DATE, DOC_STATUS, MATERIAL, NAME, and SD_DOC fromthe list of available fields.

You have now created your first Table View. The model should looksimilar 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 TableView according to how it looks in Figure 6.19, using the same meth-

099.book Seite 194 Montag, 9. Oktober 2006 2:45 14

Page 28: SAP NetWeaver Visual Composer - Amazon S3...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

195

Transactional Applications—Accessing ERP from Visual Composer 6.2

ods for resizing and renaming elements as you did in the first appli-cation. The only difference here is that instead of marking inputfields, 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 outputof BAPI_SALESORDER_GETLIST. A look at Figure 6.20 reveals thatafter entering test values and submitting them, the resulting table inyour application is not yet sorted. To sort the list of sales orders, youhave 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 theOperators group. In a first step, drag this operator into yourmodel.

3. In the next step, you must remove the connection between BAPI_SALESORDER_GETLIST and the Sales Orders Table View.

099.book Seite 195 Montag, 9. Oktober 2006 2:45 14

Page 29: SAP NetWeaver Visual Composer - Amazon S3...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

196

Building Applications6

Figure 6.20 Application with an Unsorted List of Sales Orders

4. Drag the Sort operator (Sort1) to a convenient position in yourmodel and connect its Input port to the Sales Orders port ofBAPI_SALESORDER_GETLIST. To complete the connection, youthen connect the out port of the operator to the in port of theSales Orders Table View. Your model should resemble the oneshown 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 configurethe data, first, double-click on the operator. The Configure Ele-ment dialog will be opened in the task panel. In this example, you

099.book Seite 196 Montag, 9. Oktober 2006 2:45 14

Page 30: SAP NetWeaver Visual Composer - Amazon S3...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

197

Transactional Applications—Accessing ERP from Visual Composer 6.2

want to sort the data (Sort by) by DOC_STATUS and the Direction isdown. By setting the direction to down, you will sort the list in away 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 everythinglooks okay, you can deploy your application to your first applica-tion.

After running the application in SAP NetWeaver Portal, it shouldlook like the one shown in Figure 6.22. The list of sales orders is nowsorted.

Figure 6.22 Application with a Sorted List of Sales Orders

According to the project plan, there is still something missing. Yourproject lead would like to have the sales orders marked with differ-ent colors to indicate their status. This would make it easier for anend user to identify the relevant rows in the list. More specifically,you want open sales orders to be marked with a red flag, sales ordersthat are not yet delivered to be marked with a yellow flag, and com-pleted sales orders to be marked with a green flag.

099.book Seite 197 Montag, 9. Oktober 2006 2:45 14

Page 31: SAP NetWeaver Visual Composer - Amazon S3...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

198

Building Applications6

Customizing

If you open the Layout tab, you see that there is one column thatprovides the data on the status of the sales order: Document Status.From this column, you can derive the necessary information on thestatuses of the different sales orders. Now all you have to do is usethis information to mark orders with the right colors.

Creating aCustom Field

1. First, you have to configure the Sales Orders Table View. You canopen Configure Element by clicking on Configure in the task paneltoolbar, 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 ofavailable UI controls.

3. Choose Expression Box from the list. The data type is by defaultText, which is fine for this example, but the Field name should bechanged. Because you eventually want to replace the existing fieldDocument 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 TableView Sales Orders. Rename the column to Document Status. Yourlayout 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

099.book Seite 198 Montag, 9. Oktober 2006 2:45 14

Page 32: SAP NetWeaver Visual Composer - Amazon S3...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

199

Transactional Applications—Accessing ERP from Visual Composer 6.2

Expression Editor5. The Control Properties dialog box opens. Your first goal is to displaythe 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 isthe dialog box in which you can use the Expression Editor.3 Onthe right side of the dialog box is a structure that you can browseas 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 datatype. 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 ofthe dialog box.

8. When you click on the Check button in the Computed Values dia-log, Visual Composer informs you that the entered formula isvalid. After closing the dialog box, you’ll see that @DOC_STATUS isnow the value of the Expression field on the General tab in theControl Properties dialog (see Figure 6.25).

As an optional step, you could deploy the application to ensure thatthe two columns always contain the same value. So far, there is nocoloring involved, but that will change right now.

Adding Style—Visual Composer Styles

1. If you switch from the General tab of the Control Properties dialogbox to the Styles tab, you can now define different styles, includ-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.

099.book Seite 199 Montag, 9. Oktober 2006 2:45 14

Page 33: SAP NetWeaver Visual Composer - Amazon S3...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

200

Building Applications6

Figure 6.25 Expression Box—General Tab

2. By clicking on the Plus symbol (see Figure 6.26), you can create anew entry in the list of Style-Condition pairs. You can use booleanoperators within the conditions. The Styles tab should look likethe one in Figure 6.26. Table 6.1 lists the Style-Condition pairsaccordingly.

Note that you can define the colors using hexadeximal notation (asyou would do in HTML), or by choosing from a palette that can beopened by clicking on the icon next to the fields Foreground andBackground.

Figure 6.26 Expression Box—Styles Tab

099.book Seite 200 Montag, 9. Oktober 2006 2:45 14

Page 34: SAP NetWeaver Visual Composer - Amazon S3...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

201

Transactional Applications—Accessing ERP from Visual Composer 6.2

You can now deploy your application. It should look like the one inFigure 6.27. The only thing left for you to do now is to remove theoriginal Document Status column from the table. Note that in yourmodel 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

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 foregroundcolor (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 conditionsis important. When you use a set of conditions whereby more than onecondition might apply, the style that is connected to the first condition isapplied.

099.book Seite 201 Montag, 9. Oktober 2006 2:45 14

Page 35: SAP NetWeaver Visual Composer - Amazon S3...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

202

Building Applications6

ConnectingTwo BAPIs

After having created a sorted list of all sales orders for your cus-tomer, you will now make additional information available on thestatus of the sales orders.

1. To make this information available, you will have to invokeanother BAPI: BAPI_SALESORDER_GETSTATUS. This BAPI willprovide you with detailed information on the sales orders.

2. To use BAPI_SALESORDER_GETSTATUS, you must connect it tothe out port of the Sales Orders Table View. Then, double-click onthe connection and Configure Element will open in the task panel.On the lower part of the task panel, you have to assign @SD_DOC tothe input field SALESDOCUMENT.

3. You can now drag out from the Statusinfo port and release themouse button. Select Add Table View to create an additional TableView. In the Layout tab, modify your layout and then deploy theapplication. Figure 6.28 shows what the application looks likeafter deployment.

DynamicExpressions

For the output of BAPI_SALESORDER_GETSTATUS, you want tomark the sales orders according to their size. Sales orders with avalue smaller than 100,000 € (or 128,000 USD) should be marked inred with “Small” in the Order Size column. All other sales ordersshould be marked in green and have the value of the order.

1. If you recall in the first example on creating custom fields, you firstswitched to the Layout tab. The field NET_VALUE would provide uswith the information that we were looking for; however, in thisexample, you will compute the value of the order instead of read-ing it from a field. To do so, open Configure Element for SalesOrder Status.

2. By clicking on the Plus symbol on the lower part of the task panelyou open the New UI Control dialog. As in the last example, youchoose Expression Box from the list UI controls. Use the Text datatype again. Change the Field name to order_size.

3. After clicking on OK you’ll see an additional column in the SalesOrder Status Table View. You can now rename the column toOrder Size. When you double-click on the column, the ControlProperties dialog opens.

099.book Seite 202 Montag, 9. Oktober 2006 2:45 14

Page 36: SAP NetWeaver Visual Composer - Amazon S3...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

203

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.28 Application Showing Status Information from BAPI_SALESORDER_GETSTATUS

Calculating in Visual Composer

Your first objective here is to compute and display the net value ofthe order. You also want the value to be replaced by the text ‘Small’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 ConditionalFunctions, you can expand this node.

2. A list of conditional functions is displayed. From the list, choosethe IF function. In the text field on the right-hand side, modify theIF 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 thequantity 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 secondexpression ('Small') is used.

099.book Seite 203 Montag, 9. Oktober 2006 2:45 14

Page 37: SAP NetWeaver Visual Composer - Amazon S3...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

204

Building Applications6

3. Click on Check to determine whether the formula is valid (i.e.,Visual Composer will notify you). If the formula is valid, you canclose the dialog. The formula is now the value of the Expressionfield.

4. To bring some more color to your application, open the Styles taband define two Style-Condition pairs in accordance with yourobjective of marking small orders in red and all orders with avalue higher than 100,000 € in green (see Table 6.2).

That’s it! After deploying your application, it should look like the oneshown in Figure 6.29.

Figure 6.29 Application After Adding Another Custom Column to Sales Order Status

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

099.book Seite 204 Montag, 9. Oktober 2006 2:45 14

Page 38: SAP NetWeaver Visual Composer - Amazon S3...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

205

Transactional Applications—Accessing ERP from Visual Composer 6.2

6.2.3 Adding Toolbars, Popups, and Charts

Free Exercises—Improving the Application

Well … now your project lead is convinced that you are some kind ofmagician when it comes to building applications quickly. He likes theapplication, 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 tochoose from a list of sales organizations. Furthermore, it would bemuch 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 applicationwith some additional colors. More specifically, he wants you to finda way to make some of the data available in a chart. This becomeseven more critical because your project lead has to provide a statusreport and would like to add some nice screenshots to it.

Although you don’t know how you will implement all of theserequirements, you feel confident that you can do this using VisualComposer.

Adding a Toolbar

In the next steps, you will extend the application that you built in thelast example. First, you will create a toolbar for the Enter Customerinput form. From this toolbar, it will be possible to open a popupwindow in which the end user can choose the sales organization of acustomer using BAPI_CUSTOMER_GETSALESAREAS. In addition,you will create a chart that displays the size of the different orders ina column chart sorted by the date of the order.

Creating a Toolbar

In Visual Composer, you can create a toolbar for every view—such asform, 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 willopen up in which you can choose Create Toolbar (see Figure 6.30).

099.book Seite 205 Montag, 9. Oktober 2006 2:45 14

Page 39: SAP NetWeaver Visual Composer - Amazon S3...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

206

Building Applications6

Figure 6.30 Context Menu of a View

2. In this example, you will create a toolbar for the input form EnterCustomer. After choosing Create Toolbar from the context menu,the Create Toolbar Buttons dialog opens (see Figure 6.31). To adda button to the toolbar, click on the Plus symbol on the lower leftside of the dialog box. A button labeled Button will be created.Rename the button to Choose Sales Org. You can also define anaction on the button. Here, define a custom action with the nameCHOOSE_SALES_ORG.

Figure 6.31 Create Toolbar Buttons Dialog

You have now created your first toolbar. Figure 6.32 shows the inputform with the newly created toolbar.

099.book Seite 206 Montag, 9. Oktober 2006 2:45 14

Page 40: SAP NetWeaver Visual Composer - Amazon S3...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

207

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.32 Input Form with a Toolbar

Popup iView

After creating the toolbar with the Choose Sales Org button, younow have a trigger to raise an event to open a help dialog for theEnter Customer input form. There are different ways in Visual Com-poser to create a help dialog. In this example, you’ll use a popupiView (see the sections on Value Help in Chapter 7 for an alternativeto 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 PopupiView. The Select Popup iView dialog opens (see Figure 6.33).

2. In the Select Popup iView dialog, select Create new iView andchange the name to Choose Sales Org. After clicking on OK, youhave created your first popup iView, but it still doesn’t contain anyfunctionality nor can it be invoked.

Tip

If you click on OK before creating a button for a toolbar, you won’t see atoolbar in the specific view. This is due to the fact that in theory everyview already has a toolbar and, by default, this toolbar is hidden. Addinga button automatically sets the visibility flag of the toolbar to Show. Ifyou don’t add a button, the status of the toolbar won’t change and it willstill 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 thedrop-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 thetoolbar. On the other hand, if you want to remove the toolbar completelyand don’t intend on using it again, we recommend that you remove allbuttons from the toolbar before hiding it. This will eliminate unnecessarydata from your model description.

099.book Seite 207 Montag, 9. Oktober 2006 2:45 14

Page 41: SAP NetWeaver Visual Composer - Amazon S3...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

208

Building Applications6

Figure 6.33 Select Popup iView Dialog

3. You can configure the event that will later bring up the popupiView by double-clicking on the connection between the out portand the popup element. Moreover, by changing the value ofEvent 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 andevent names.

Figure 6.34 Configure Element for the Popup Invocation

You can now open a popup iView. Next, you will add functionality tothis iView.

AddingFunctionality to a

Popup iView

1. To add functionality to the popup iView, you have to drill down tothe popup iView. This opens the popup iView. You can do this byright-clicking on the popup icon and choosing Drill Down fromthe context menu. Figure 6.35 shows the icon with an opened con-text menu.

099.book Seite 208 Montag, 9. Oktober 2006 2:45 14

Page 42: SAP NetWeaver Visual Composer - Amazon S3...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

209

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.35 Popup Element Context Menu

2. In your popup iView, the end user should be able to choose froma list of sales areas that are available for a specific customer. TheBAPI 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 inthe Enter Customer input form, it is already available. Unfortu-nately, this information is available only in the calling iView, andnot 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 asyou have done before. This time you choose Start Point from thelist (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 selectCUSTOMERNO 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 leastthe customer number (CUSTOMER) and the sales organization(SALESORG).

099.book Seite 209 Montag, 9. Oktober 2006 2:45 14

Page 43: SAP NetWeaver Visual Composer - Amazon S3...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

210

Building Applications6

Adding a Button toa Popup iView

To preview the layout of the popup iView, select the Layout tab.Because you are dealing with a popup iView here, you sense that thereis 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 adda button called Close. In addition, you define a custom actionnamed CLOSE on this button. Figure 6.37 shows an example for aTable View for BAPI_CUSTOMER_GETSALESAREAS.

2. Next, drag out from the out port of the Table View and create anEnd Point in the same way that you created the Start Point before.By double-clicking on the connection between out port and theEnd 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 fromthe 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 iViewby clicking on the back arrow from the navigation bar.

5. Then double-click on the choose_sales_org connection to open alist of input and output ports. Assign the input and output fields ofthe popup iView according to the way they appear in Figure 6.38.

After deploying your application, it should look like the one shownin Figure 6.39. You can see the newly created popup iView openedand showing only the available sales organizations for customer0000001000—the customer number that was already entered in theEnter Customer input form.

099.book Seite 210 Montag, 9. Oktober 2006 2:45 14

Page 44: SAP NetWeaver Visual Composer - Amazon S3...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

211

Transactional Applications—Accessing ERP from Visual Composer 6.2

Figure 6.38 Assigning Popup Input and Output to the BAPI and the Input Form Fields

Figure 6.39 Application with Popup iView Opened

099.book Seite 211 Montag, 9. Oktober 2006 2:45 14

Page 45: SAP NetWeaver Visual Composer - Amazon S3...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

515

Index

A

ABAP List Viewer (ALV) 358ABAP stack 27, 28ABAP Workbench 31, 391ActionScript 72, 78, 85Activation 425Additional operators 139Administrator Workbench 424Adobe Flash 43, 72

Client 78File 85Player 52, 91UI 40

Adobe Flash Runtime 85Deploying applications using 192

Adobe Flex Server 78, 85, 419Adobe SVG Viewer 52, 71, 91Alert Data Service 104, 347, 406Alert Framework 347Alert Monitor 357Alias Manager 403Analysis Process Designer 462Analytic applications 40, 46APD 462Application consultant 33Application platform layer 27Application service 61, 88ARIS 87, 89Authentication 184Authorization 184, 317

B

Backend elements 74Balanced Scorecard 428BAPI 435

Accessing 184BAPI_CUSTOMER_GETDETAIL

184, 216CITY 187COUNTRY 187Customerno 186NAME 187Pe Address 187Pi Salesorg 186

STREET 187BAPI_CUSTOMER_GETSALESAREA

S 205, 209CUSTOMER 209CUSTOMERNO 209SALESORG 209

BAPI_FLBOOKING_CREATEFROMDATA 246, 247, 248BOOKING_DATA 246CLASS 248INPUT 246OUTPUT 246RESERVER_ONLY 247RETURN 246TEST_RUN 247TICKET_PRICE 246

BAPI_FLIGHT_CHECKAVAILABILITY 238AIRLINEID 238CONNECTIONID 238FLIGHTDATE 238

BAPI_FLIGHT_GETLIST 230, 238, 253AIRLINE 245AIRPORTFR 245AIRPORTID 252AIRPORTTO 245ARRDATE 245ARRTIME 245CITY 252CONNECTID 238COUNTRY 252COUNTRY_ISO 252CURR 245DATE_RANGE 230, 231, 232DEPTIME 245FLIGHTDATE 245MAX_ROWS 231PRICE 245

BAPI_SALESORDER_GETLIST 192, 193, 213CUSTOMER_NUMBER 194DOC_DATE 194DOC_STATUS 194MATERIAL 194NAME 194

099.book Seite 515 Montag, 9. Oktober 2006 2:45 14

Page 46: SAP NetWeaver Visual Composer - Amazon S3...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

516

Index

SALES_ORGANIZATION 194SD_DOC 194

BAPI_SALESORDER_GETSTATUS 192, 202SALESDOCUMENT 202

BAPI_SALESORDERS_GETLIST 216BEx 378BEx Analyzer 90BEx Query Designer 90, 305BEx Report Designer 90BEx Suite 31, 41, 47, 87, 90, 378BEx Web Application Designer 47,

90BEx workbook 389BI 281BI Consumer Services 281BI Document Repository Manager

389BI extension Kit for Visual Composer

47, 70, 75, 279BI Integration Wizard 112, 286,

292, 313BI JDBC Connector

MaxDB 317Microsoft SQL Server 316Oracle 317Setup 316

BI UDI 419Board Toolbox 122

Design Board 122Layout Board 123Source Board 123

Bulleted List → UI ControlsBusines Process Modeling 87Business analyst 32, 47Business application 39Business content 60, 424Business expert 32Business Intelligence 27, 46, 59,

182Accessing 182

Business package 38, 85, 180Business Process Expert 32, 33, 47,

64Business Process Expert Network

64Business Process Management 27Business Process Modeling 89Business Server Pages (BSP) 391

C

Calendar → UI ControlsChange Management Service 86Characteristics 297, 321Chart 212

Column Chart 212Chart Type 221Chart View → Model ComponentsCheckbox → UI ControlsClock → UI ControlsClose Model → ModelCollaboration 42com.sap.vc 253

epcm 253Combine operator 248

Creating 248Combo Box → UI ControlsCommand URL 295Compiler 70, 72Component Build Service (CBS) 86Compose → Task Panel ToolbarCompose Model 195

Additional operators 195Connectors 195Operators 195

Composer Model 222Components 195

Composite Applications 41, 436Analytic Composites 41

Conditional Functions → Expression Editor

Conditions 199Configure → Task Panel ToolbarConfigure Element → ModelConnector Framework 182Connectors

Multidimensional 280Relational 280

Control Properties → UI ControlsControl Properties Dialog → UI Con-

trolsCost awareness 29Count 321, 323Creating views 186CSV 393Cumulative Total 321, 326Currency 300Custom Field

099.book Seite 516 Montag, 9. Oktober 2006 2:45 14

Page 47: SAP NetWeaver Visual Composer - Amazon S3...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

517

Index

Creating 198Customer Relationship Manage-

ment 182Accessing 182

D

Data Definition Language 426Data fields 199Data services 184

Accessing 183Required input fields 186

Data Store → Model ConnectorsData Type 142, 198, 199Data Warehousing Workbench 424Date Functions → Expression EditorDate Picker → UI ControlsDate/time 321Date/Time Formats → Expression

EditorDate/Time Formatting Mask →

Expression EditorDate/Time Parts → Expression EditorDate/Time Units → Expression Edi-

torDDL 426DefaultFlexFrameStyle 446Delta link 400, 401Deploy → Task Panel ToolbarDeploy to Portal 190Design Board 93

Design tab 93Design Time Repository (DTR) 68,

86, 408Development class 425Development server 77Dimension table 308Distinct → Model OperatorsDocument classes 389Document Object Model (DOM) 74Document Repository Manager 389Document store 378Documentation Wizard 99Down port 403Drag-and-drop 184Drop-Down List → UI ControlsDynamic columns 298, 300, 372Dynamic Expressions → Expression

Editor

Dynamic Expressions Editor → Expression Editor

Dynamic Expressions Operators → Expression Editor

Dynamic List → List

E

EclipseEclipse SDK 86

ElementConfigure 188, 189Deleting 188Marking 188Renaming 189

End Point → Model ConnectorsEnteprise services 437Enterprise portal 28Enterprise Portal Client Manager

(EPCM) 133, 253, 257Enterprise Service Repository (ESR)

437Enterprise Services Architecture

(ESA) 436Enterprise SOA 39, 435, 436Entity service 61Entry List Manager 99EP Usage Type 42, 81EPCM Event → EventingERP

Accessing 181Event

Name 208Raising 208

Eventing 251, 378Event 133Signal in 133Signal out 133

Excel 393Exceptions 300, 346Executable GUI language 63Exporting to

CSV 397Excel 394PDF 397

Expression Box → UI ControlsExpression Editor 129, 166, 199

Categories 167Conditional Functions 172, 203

099.book Seite 517 Montag, 9. Oktober 2006 2:45 14

Page 48: SAP NetWeaver Visual Composer - Amazon S3...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

518

Index

Date Functions 171Date/Time Formats 177Date/Time Formatting Mask 175Date/Time Parts 176Date/Time Units 176Dynamic Expressions 192, 202Number Formatting Mask 174Numeric Functions 169Operators 173Scientific Functions 172Text Functions 167Time Functions 171

External key 297, 305External services 61

F

F4-help 306Field mapping 193Field name 198Fields 184Filter → Model OperatorsFiltering 136Filters

Key-figures 371Financial Instrument Controlling

431Find Data → Task Panel ToolbarFlash debugging console 421Flexibility 29Floor Plan

Guided Activity 40Forecasts 329Form View → Model ComponentsFormatted value 300Formulas 419Free form 323Freestyle 35Freestyle Kit for Visual Composer

70, 75

G

Gauge -> s. UI ControlsGeneralized Modeling Language

(GML) 62, 72, 73, 85, 400Generalized Modeling Language

Document Object Model (GML DOM) 70

Generalized Modeling Language Plus (GML+) 63

Grand Totals 321, 322Graphic engine 70, 71GUI Machine 74GUI Machine Language 74Guided Procedures 42, 87, 89, 131,

438

H

Hierarchy 297, 323HTML 69, 71HTML components 71HTML Text → UI ControlsHTML View → Model ComponentsHTMLB 407HTTP sniffing 317, 338HTTP(S) 69HttpWatch 318, 423

I

IF function 203Image → UI ControlsImage Manager 101Images 154Inbound service template 379InfoObject 301InfoProvider Data 390Information Integration Layer 27Inheritance of attributes 407Innovation 29Input Field → UI ControlsInput Form

Add 186Input Port 186, 193, 295, 304Inspect → Task Panel ToolbarIntegration broker 27Interaction problem 40Internet Graphics Server (IGS) 315INVALID_VARIABLE_VALUES 450IT architecture 436IT specialist 34iView 28, 38, 179

099.book Seite 518 Montag, 9. Oktober 2006 2:45 14

Page 49: SAP NetWeaver Visual Composer - Amazon S3...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

519

Index

J

J2EE Connector Architecture (JCA) 182, 280

J2EE EngineGUI Config Tool 399

J2EE Log Configurator 420Java API 69Java Connector (JCo) 182, 442Java Database Connectivity (JDBC)

283Java Dictionary 86Java Server Pages (JSP) 78Java stack 27, 28, 67

Database 68JavaScript 71

K

Key figures 300, 371Knowledge Management 27, 42,

378, 389

L

Language settings 451Layer → Model ComponentsLayers

Adding 215Creating 216Navigation 218, 242Wizard 227

Layout Board → Layout tabLayout Manager 70, 71Layout tab 93, 186Level 323List

Dynamic List 101Static List 101Value Help List 101

List Box → UI ControlsLocalization 409Log Viewer 420Logging 419Logon ticket 184Lower → Model Operators

M

Macromedia Flex Markup Langu-age 64

Main Menu 94BI 112Edit 96Help 114Model 94Search 96Tools 98, 192Window 114

Main Toolbar 116Master Data 390Master Data Management 27MDX 338

Multidimensional expressions 286MDX Editor 112, 286, 338, 343MDX injection 338Measures 321Member 322Menu BI → Main MenuMenu Edit → Main MenuMenu Help → Main MenuMenu Model → Main MenuMenu Search → Main MenuMenu Tools → Main MenuMenu Window → Main MenuMetadata 56, 184, 390MetaObject facility 57Microsoft Internet Explorer 52, 91Microsoft Internet Information Ser-

ver 51, 67Microsoft SQL Server 51, 67Microsoft Windows 51Microsoft XML 4.0 73, 91Microsoft XML Parser 52Mobile device 39Model

Basic Model 179Browse 96, 117Close 94Compile 98Components 126Compose 118, 125Configure Element 118Deploy 99Export 95Export To File 95

099.book Seite 519 Montag, 9. Oktober 2006 2:45 14

Page 50: SAP NetWeaver Visual Composer - Amazon S3...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

520

Index

Import 95Import From File 95Inspect 120Manage 95New 94Open 94Print 95Save 95Search 98

Model Browser 95Model Components

Chart View 128, 212, 221Form View 126, 187, 222HTML View 129iView 179Layer 131Nested iView 130Package 180Page 180Table View 127

Model Connectors 132Data Store 134, 167, 221, 223,

244, 248, 406End Point 132, 210Popup Signal 135Signal In 133Signal Out 133Start Point 132, 209Timer 135User Data 134, 167

Model Operators 136Combine 141Distinct 139Filter 136Group 141Intersect 140Lower 138Sigma 137Sort 137Subtract 140Union 139Upper 138

Model persistence 67Model-driven architecture 57Model-driven development 35

Directness 37Exploratory 35Expressiveness 37Extensibility 37Principles 35

Reusability 36Simplicity 36

Model-driven tools 35Model-to-code approach 39Model-View-Controller (MVC) 78

Architecture 78MOF 57Moving average 321, 328Multi Channel Access 28Multidimensional connectors 280MXML 72, 78, 85

N

Naming rules 94Nested iView → Model ComponentsNumber Formatting Mask → Expres-

sion EditorNumbered List → UI ControlsNumeric Functions → Expression

Editor

O

Object Management Group 57OLAP 285OLE DB for OLAP (ODBO) 286Open Model → ModelOptions 192Outbound service template 379

P

Package 425PAR file 78, 401PDF 393People Integration Layer 27Percentage Growth 321, 334Percentage Share 321, 325Perforce 408Permissions 92, 184Personalization 134, 167, 408Perspective 86Pivot control 377Plain Text → UI ControlsPlanned vs. Actual 321, 335Planning functionality 392Popup iView 135, 207

Adding functionality 208, 210

099.book Seite 520 Montag, 9. Oktober 2006 2:45 14

Page 51: SAP NetWeaver Visual Composer - Amazon S3...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

521

Index

Creating 207Open 207Select 207

Popup Signal → Model ConnectorsPort

Flipping 230Portal archive 401Portal Connector 80, 83, 419Portal Connector Framework 80,

83, 85Portal Content Catalog 81, 110, 257Portal Content Directory (PCD) 78,

81, 82, 92Portal deployment 419Portal eventing 421Portal page 180Portlet 28Ports 184Process chain 462Process Integration Layer 27Progress Bar 240Progress Bar → UI ControlsPushbutton → UI Controls

Q

Query 435Query Designer 305

R

Radio Group → UI ControlsRank Change 321, 330Relational connectors 280Remote Function Call (RFC) 435Return on investment (ROI) 29RFC 391

Accessing 184RFC library 182Rich client 39Rich Internet Applications 72Roles 184RSRT2 371

S

SAP Composite Application Frame-work 31, 41, 49, 59, 61, 87, 88, 438

SAP List Viewer (ALV) 377SAP NetWeaver 26, 43SAP NetWeaver Application Server

27Java stack 43

SAP NetWeaver Business Intelli-gence 27, 281

SAP NetWeaver Developer Studio 31, 41, 48, 78

SAP NetWeaver Development Infra-structure 68, 86

SAP NetWeaver Master Data Management 27

SAP NetWeaver Portal 27, 28, 43, 68, 80, 85Connector Framework 38Content Catalog 38System Landscape 38

SAP NetWeaver Portal Content Stu-dio 30

SAP NetWeaver Visual Composer 31Add-Ons 52, 80, 81Architecture 68Client 69Components 68Configuration 105, 106, 107, 109Console 124Convergence 63Core 70Customizing 104Deploy applications 190Kits 70, 75Logging off 95Logging on 92Navigation 98Navigation back 98Navigation Bar 123Navigation forward 98Prerequisites 91Repository 77Roadmap 42Server 68, 75, 85, 419Storyboard 68, 69, 85, 93Storyboard components 70

SAP NetWeaver Visual Composer for NetWeaver 2004s 42, 43Supported platforms 44, 51Supported UI technologies 44, 51

SAP Query 282

099.book Seite 521 Montag, 9. Oktober 2006 2:45 14

Page 52: SAP NetWeaver Visual Composer - Amazon S3...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

522

Index

SAP Query application 282SAP system adapter 182SAP Visual Administrator 316SAP Visual Composer 6.0 42SAP xApp Analytics 43, 46, 427SAP_JDBC 406Scalable Vector Graphics (SVG) 70,

71Scientific Functions → Expression

EditorScorecarding 427

Best Practices 427SE80 391SEM 427Serialization error 456Service 435Service consumer 435Service provider 435Service Repository 435Service request 435Service-Oriented Architecture (SOA)

435Severity 420Sigma → Model OperatorsSignal In → Model ConnectorsSignal Out → Model ConnectorsSingle Sign-On (SSO) 92, 442SOAP 285Sort → Model OperatorsSort Operator 195

Add 195Configure 196Direction 197

Sorting 137, 195, 370Source Board → Source TabSource tab 93Special characters 407Spinner → UI ControlsSQL editor 112, 285, 338SQL field 285SQL injection 317, 338Standardized UI 40Start Point → Model ConnectorsStatic List → ListStore 391Stored procedure 435Storing global data 134Strategic Enterprise Management

427Styles 199

Suppress sum 303SWF → see Adobe Flash fileSystem alias 92, 441System Alias Manager 102System landscape 82, 85, 184System types 184

T

Table View 192, 194Add 194Table Columns 195

Table View → Model ComponentsTask panel 117, 183Task Panel Toolbar 117, 183

Browse 117Compose 118Configure 118Deploy 120Find Data 120Inspect 120

Test Data Service 185Text editor 162Text Functions → Expression EditorTicker → UI ControlsTile View 407Time Functions → Expression EditorTimer → Model ConnectorsToggle Button → UI ControlsToolbar 205

Adding a button 206Creating 205Removing 207

Tools Menu → Main MenuTop N 321, 331, 336Total cost of ownership (TCO) 29,

40Transactional applications 181Translation

Formula 419Text string 418Worklists 409

Translation → LocalizationTranslation files 409Translation information 85Transport 399, 425Transport Package Tool 400Treasury and Financial Investment

Controlling 430

099.book Seite 522 Montag, 9. Oktober 2006 2:45 14

Page 53: SAP NetWeaver Visual Composer - Amazon S3...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

523

Index

Treasury and Risk Management (TRM) 430

Trend over time 321, 332

U

UI Building Blocks → Web Dynpro 40

UI Controls 142Bulleted List 143Calendar 144, 234Checkbox 145Clock 146Combo Box 147Control Properties 189Control Properties Dialog 189Date Picker 148, 321Drop-Down List 149, 222, 243,

244, 458Expression Box 150Gauge 151HTML Text 153Image 154Input Field 155List Box 156New 198Numbered List 157Plain Text 157Progress Bar 158Pushbutton 159, 223Radio Group 160Spinner 161Text Editor 162Ticker 163, 239Toggle Button 164VSlider 165

UI strategy 38UIDPW 442UI-driven elements 74Unformatted value 300Unit 300Universal Data Integration (UDI)

280, 283Universal Modeling Language (UML)

57Universal Worklist (UWL) 104, 347Upgrading models 407Upper → Model OperatorsUser Data → Model Connectors

User Management Engine (UME) 67, 69, 79, 85, 92

User mapping 92, 184User Task 40User-friendly UI 30

V

Validation scope 406Value Help 306

Add 307Value Help Configuration Wizard

307Value Help List → ListVariables 297, 304

Mandatory 459Versioning 407Views

Layout 188Visibility 221

Visibility Condition 224Visual Composition Language (VCL)

63VSlider → UI Controls

W

WAD 379Web 39Web API 281Web Application Designer 31, 379Web browser 84Web Dynpro 39, 43, 59, 60, 438

Component 40Foundation 40Freestyle 61Patterns 61UI Building Blocks 40, 438Web Dynpro UI 39

Web Dynpro for Visual Composer 40

Web Dynpro Runtime 69, 78, 85Deploying applications 192

Web service 102, 435Authentication 104

Web Service Connector 83Web service system 259

Creating 259Defining 102

099.book Seite 523 Montag, 9. Oktober 2006 2:45 14

Page 54: SAP NetWeaver Visual Composer - Amazon S3...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

524

Index

Web services 43, 83, 406Systems 43

Web UI 39WEBAPI 295Wizard → LayersWizards 131Work Center 438Workbook 389Workspace environment 70World Wide Web Consortium (W3C)

74Write back 460WSDL 43, 102, 259

X

xApps 87XGraph language (XGL) 37, 72, 85XMI 58XML 69XML for Analysis (XMLA) 285

Y

Year-to-date 326YTD 326

Z

Zero Activity 321, 336Z-order 221

099.book Seite 524 Montag, 9. Oktober 2006 2:45 14