Expand +



Create Web Applications - No Programming Required

August 11, 2009

No matter how far up the management ladder you are, you can use SAP NetWeaver Visual Composer.

Exposing content to users as a Web interface is a terrific idea, and with the advent of SAP NetWeaver Portal (formerly called SAP Enterprise Portal), SAP is doing more and more of it. The question is, who do you have to be to create portal Web applications (iViews)? The answer: You can be anyone. You create iViews graphically from function modules with SAP NetWeaver Visual Composer.

The strength of SAP NetWeaver Visual Composer is that it can produce Web front-ends (iView screens) without the need for programming. With it business users such as managers can create portal iViews with very little technical knowledge; all you need to produce an SAP NetWeaver Visual Composer application is a knowledge of what using the SAP function module will do and the data expected by the input and output parameters. For example, a customer-support manager may want to develop a custom search screen. In the past, the manager would ask a programmer to do it and then have to work through many iterations with the programmer to get to the final desired screen. Now, using SAP NetWeaver Visual Composer, the manager can ask the programmer for the name of the function module that searches for customers and what inputs and outputs (for example, customer name, address, and phone number) the module expects. The manager uses SAP NetWeaver Visual Composer to select the function module, arrange the input and output fields on the screen with their associated field labels (descriptions), and generate and deploy the screen as an iView on a portal page — without recourse to either programming or a programmer. This puts application-development power in the hands of the user, who, after all, is the person who understands and needs the application.

This example is a brief overview of how SAP NetWeaver Visual Composer is used. The rest of this article will go into each stage of development in more detail.

What Is SAP NetWeaver Visual Composer?

This WYSIWYG development environment (workbench) enables you to create a portal iView for SAP elements, such as BAPIs, RFCs, and SAP Business Information Warehouse (SAP BW) reports, without any programming. (Too many acronyms? See the glossary on page 38.) SAP NetWeaver Visual Composer’s workbench is very intuitive and completely Web-based, which means that you access it through an Internet browser and you don’t need any of its components installed locally on your PC. SAP NetWeaver Visual Composer is, however, a small enough application to run locally on a laptop, which sometimes has advantages in terms of hardware cost (no central server needed) and network connections (no traffic to a central server).

SAP NetWeaver Visual Composer is primarily aimed at the expert business user who understands the business purpose of the underlying function module or SAP BW report but who has no programming experience. It is also a useful tool for the functional-module creator (usually an ABAP programmer) who has no Web programming knowledge and wants to create a Web front-end screen.

Creating an iView

To show the power of SAP NetWeaver Visual Composer, let’s create an iView that displays a list of banks. This utilizes the BAPI BAPI_BANK_GETLIST command. If you didn’t use SAP NetWeaver Visual Composer, you would have to write the code to:

1. Connect to the BAPI.

2. Get and send the data.

3. Present the data to the users.

Also, you wouldn’t know if the code had worked until it was deployed to the portal server.

With SAP NetWeaver Visual Composer, however, the process is almost foolproof, with no coding, built-in testing, and automatic deployment. Let’s look in detail at the steps that create an iView using SAP NetWeaver Visual Composer.

Choosing the Right Tools

Originally, SAP NetWeaver Visual Composer generated iViews and pages for RFCs and BAPIs. Now, it comes with the SAP NetWeaver Business Intelligence (SAP NetWeaver BI) Kit, which allows you to generate a customized presentation layer for SAP NetWeaver BI reports. The next release of SAP NetWeaver Visual Composer will provide further kits to generate presentation layers for other systems.

SAP NetWeaver Visual Composer is an iView development tool for nonprogrammers or programmers who don’t know Web languages, such as Java. The table on page 42 provides a comparison between the tools used to create iViews. Select the one most appropriate to your needs — both in terms of the skills you have available and the complexity of the iView.

Other Goodies

For me the best part of SAP NetWeaver Visual Composer is that deployed changes are immediately reflected in the portal iView, so if I make a spelling mistake in a field descriptor — as I often do — I can modify and deploy the correction to the portal within a few seconds. If I had to make these changes with programming, it would take much longer. I would have to type all the necessary syntax and manually save, compile, and copy the code to the portal server.

One question I am asked continually is, “Do I need to install SAP NetWeaver Visual Composer in all my portal environments for the generated iView to work?” The answer is, “no.” The code deployed is self-contained and can be moved between portal platforms by a simple export package, which is a .zip file containing all the iView code.

I am describing Release 1.0 of SAP NetWeaver Visual Composer, which is a very interesting product. But like any early release, it has limitations, such as not allowing alerts or drop-down menus. Many of these limitations are lifted in the next release of SAP NetWeaver Visual Composer (scheduled for Fall 2005).

Lights … Camera … Action!

SAP NetWeaver Visual Composer is a great tool that enables non-programmers and programmers without Web-development skills to develop iViews without writing any code. You can make changes to a presentation, such as using different field names and positions, much more quickly with SAP NetWeaver Visual Composer than with traditional coding methods. This lets you concentrate more on what the application does than on how it presents its data.

You can also use SAP NetWeaver Visual Composer as an intermediate step in moving ABAP developers into the world of Web programming. It enables them to create Web front-ends to their back-end programs. Once programmers understand the iView, page, and deployment concepts of SAP NetWeaver Visual Composer, they can progress to SAP NetWeaver Developer Studio to create Web Dynpros for more complex front-ends. The future integration of Macromedia’s Flex with SAP NetWeaver Visual Composer will also satisfy those current portal users who complain that portal iViews are not a very interesting way of presenting data.

SAP NetWeaver Visual Composer is a Windows-based Web application. It runs on Microsoft Internet Information Services (IIS), which is on a Web server, and uses Microsoft SQL Server as a database. SAP NetWeaver Visual Composer uses the connection from a portal server to get the BAPIs or SAP BW reports for which it creates iViews. This means that to develop an iView, the SAP system must be accessible to SAP NetWeaver Visual Composer through the portal; in other words:


SAP NetWeaver Visual Composer is easy to install. Simply download the .zip file from the SAP Service Marketplace, unzip it, and run the install executable. This deploys the application to the Web server and creates the database needed to store an SAP NetWeaver Visual Composer project, which saves the iViews and pages for the user.

SAP NetWeaver Visual Composer “storyboard” or desktop
click here for a larger version of this image

Open SAP NetWeaver Visual Composer.
Once installation is complete, SAP NetWeaver Visual Composer is started by calling the URL: http:<myWebserver>/VisualComposerServer. This opens the workbench for either creating a new project or opening an existing one. The most recent project access opens automatically.


Module and associated components

click here for a larger version of this image
2. Create a project.
You can think of an SAP NetWeaver Visual Composer project as a folder that contains the portal pages and iViews that have been created within SAP NetWeaver Visual Composer. The first stage of creating a new iView is to create and name a new project. A project can contain modules, pages, and iViews. The hierarchy for a project is:
     I. Project
        A. Module
             1. Page
                 a. iView


iView container

click here for a larger version of this image


Create an iView.
Then, you create modules, pages, and iViews by dragging the relevant object from the Add Elements box on the right-hand side of the page. This development hierarchy is flexible and aids the developer by arranging objects in logic groups (determining which iViews go on a page). However, a project can contain only iViews — no pages or modules.


Connection to portal server

click here for a larger version of this image
4. Connect to the portal server.
At this point the iView (created above) is empty and contains no presentation elements. To create the presentation layer, you must associate a BAPI (function module) or SAP BW report with the iView. First, you log on to the portal through SAP NetWeaver Visual Composer, and select the connector to be used by the portal to link to the SAP system that contains the BAPI or SAP BW report.


Function module selection

click here for a larger version of this image
5. Select the function module or SAP BW report.
You drag the BAPI or report from the displayed list with the mouse and drop it onto the iView palette. This gives the developer access to all the inputs and outputs of the function module that needs them.


Field arrangement

click here for a larger version of this image
click here for a larger version of this image
6. Format the layout.
On the Layout format screen, you use the Design tab to select how to display input and output — tables, forms, single rows, and so on — and the fields to include on the screen on the left. Be very careful with mandatory fields, because if they are not included, the function module won’t work. Then, on the Field arrangement screen on the right, you adjust the position of the included fields with the Layout tab.


Preview and deploy iView

click here for a larger version of this image
click here for a larger version of this image
7. Generate the iView.
The Preview tab on the left enables you to see how the iView functions. When the preview “works correctly,” the iView is ready to be deployed. Deployment creates the iView code and copies it to the portal server. To deploy an iView, on the right, click the Deployer icon on the far right and then click the Deploy button. The portal server has all SAP NetWeaver Visual Composer-deployed iViews and pages under Content Administration in the folder. If a page is deployed, all the iViews on the page are also deployed.


iView in a portal page

click here for a larger version of this image
8. See the final result.
Once deployed, the iView is independent of SAP NetWeaver Visual Composer. You can run it on your portal page or even migrate it to another portal that has no connection to SAP NetWeaver Visual Composer.


Debugging tool

click here for a larger version of this image
9. Debug and create any URL iViews.
SAP NetWeaver Visual Composer also contains a debugging tool to show the flow of events while the program is running. This debugging tool allows you to examine data values at key stages in the process. (Additional features let you use HTML pages to create URL iViews directly in SAP NetWeaver Visual Composer, instead of using the portal URL iView template.)
Glossary of Terms
Term Definition
ABAP Advanced Business Application Programming, an SAP proprietary programming language.
BAPI The SAP business objects held in the Business Object Repository (BOR) encapsulate their data and processes. External access to the data and processes is only possible by means of specific methods — BAPIs (Business Application Programming Interfaces). A BAPI is defined as a method of an SAP business object. For example, the functionality that is implemented with the SAP business object type “Material” includes a check for the material’s availability. Thus, the business object type “Material” has a BAPI called “Material Check/Availability.”
Function modules Self-contained ABAP code that has a specific purpose (e.g., data validation, customer search, and so on).
IIS (Internet Information Services) Microsoft’s Web server.
iView Self-contained Web documents that are provided via a URL managed by the SAP NetWeaver Portal framework. The resource itself can be anywhere on the Web.
RFC Request for comments.
SAP Business Information Warehouse (SAP BW) Used for storage and retrieval of large amounts of data.
WYSIWYG What-you-see-is-what-you-get.
Tool Used By Advantages Disadvantages
SAP NetWeaver Visual Composer Business developers

• No programming

•  Rapid deployment

• Complex items such as drop-down menus not currently available
NetWeaver Developer Studio (Web Dynpro) Developer with some Java knowledge

•  Limited programming

•  Can produce complex presentation interface

• Cannot be used by nonprogrammer
Pure programming (ABAP, Java, .NET) Programmer proficient in specified language

•  Ultimate flexibility

•  Uses existing skills

• Must be used by skilled programmer

• Coding errors possible

The Future Flex

One of the most exciting capabilities of the next release of SAP NetWeaver Visual Composer is the integration of Macromedia’s Flex, a presentation-tier framework and server that enables the development and deployment of rich Internet applications. These applications bring the richness and responsiveness of desktop applications within the broad reach of Web applications. Flex overcomes the traditional limitations of HTML-based user interfaces. Its applications support rich user-interface components and direct object manipulation such as drag-and-drop. Flex provides visual cues and transitions to help users make sense of state and data changes in the application. Flex applications can also support real-time data push and rich media-streaming.

Currently, clever programmers can incorporate Flex into SAP interfaces, but it’s not easy. The Fall 2005 version of SAP NetWeaver Visual Composer will let you use the capabilities of Flex to create dramatic presentation effects, such as fade-in and fade-out screens, without programming.

A word of warning: The next version of SAP NetWeaver Visual Composer is not backward-compatible, even though the workbenches are very similar. My advice is to use SAP NetWeaver Visual Composer Release 1.0 to become familiar with the product and how it works by creating “proof-of-concept” iViews and pages. Then use the new release to produce your production iViews.


Patrick Dixon is a manager with Deloitte specializing in SAP NetWeaver Portal and SAP interface design and implementation. He has more than five years of experience Web-enabling and integrating SAP systems with SAP NetWeaver Portal, SAP Internet Transaction Server (ITS), SAP NetWeaver Exchange Infrastructure (SAP NetWeaver XI), and SAP NetWeaver. Dixon has been a key speaker on portal implementation and content integration at the SAP BW and Portals 2005 Conference and other portal events.

An email has been sent to:

More from SAPinsider


Please log in to post a comment.

No comments have been submitted on this article. Be the first to comment!