SAP NetWeaver Visual Composer

What mainstream UI tools does SAP offer to create applications on top of its business process platform?

SAP NetWeaver offers two major development toolsets for creating Web-based business application UIs on top of the business platform: Web Dynpro and Visual Composer.

These tools provide both the design time infrastructure and flexibility to facilitate the application development processes and execute such applications within a single runtime environment – Web Dynpro.

In the past there have been other tools for delivering web-based access to business applications such as: BSP (Business Server Pages), PDK (Portal Development Kit), ITS (Internet Transaction Server), and HTMLB.

What is Web Dynpro?

Web Dynpro is a development toolset and a runtime environment for creating business applications that have web-based user interfaces.

Web Dynpro applications can be developed using either Java or ABAP. In Web Dynpro for Java (WDJ), applications are developed within the SAP NetWeaver Developer Studio using SAP’s implementation of the Model-View-Controller design pattern. It allows the programmer to design and build reusable units of code known as components that can be extended with Java coding.

Additional information about Web Dynpro Java can be found here .

Web Dynpro for ABAP (WDA) applications are developed within the SAP system using the ABAP Workbench (SE80). Business applications based on WDA are more suitable applications that derive their data entirely from R/3 data sources.

Additional information about Web Dynpro ABAP can be found here .

Note that for the rest of the document, when mentioning “Web Dynpro”, we are referring to Web Dynpro for Java.

What is Visual Composer?

Visual Composer is a graphical modeling environment designed for the rapid creation of web-based user interface applications.

Visual Composer has been designed to enable people without traditional programming skills to create enterprise application UIs using standardized components that meet SAP standards and quality criteria.

The latest version of Visual Composer (Visual Composer for CE) also introduces new tools for creating portal content (worksets, roles, pages, and iViews), embedding BI data and creating Voice applications from the Visual Composer modeling environment.

Additional information about Visual Composer can be found here .

What are the complementary capabilities of these tools?

Visual Composer and Web Dynpro have many complementary design time capabilities for creating application UIs with the same professional SAP look and feel. You can find out more about the relationships of these tools in the below diagram:

What are the key considerations before deciding which tool to use?

To determine what tool you should use, your key considerations should include:

What are your business application requirements?
Do you need standard table and form layouts? Or do you need special controls (e.g. calendars, tree browsers) or islands of high interactivity?

 

From where are you getting your business data?
Are you extracting information from different backend systems?
Do you need to consume data from a variety of complicated services that will require additional manipulation and adaptation?

What type of skills and experience are available for the application development?
Will your application be created by people with traditional programming skills, or do you want a non-programmer to build the application?

Does the backend system supply the business functionality you require?
Can you simply connect to the backend through standard enterprise / web services or RFC? Or do you need additional service façades and / or legacy connectivity?

What are SAP’s guidelines for creating custom application UIs using these two tools?

Step 1 - Create a prototype and simulation of the application using Visual Composer

A non-programmer should start by creating a prototype of the application UI using the Visual Composer elements. The main purposes of creating a user-interface prototype are to:

Validation for the application modeler: enable the application builder to instantly see how the end result will look and behave as he is building it up, validating his work and detecting potential design flaws before the real design and development starts.

End user validation: enable bringing in end user feedback early in the development process

Stakeholder buy in: use prototypes to get a buy in for relevant stakeholders, helping to trigger the actual development project

Developer handover: use the prototype as an additional communication tool for development requirements.

The advantages of using Visual Composer for prototyping are:

Using Visual Composer requires significantly less learning than using Web Dynpro, while having enough capabilities to support meaningful functionality. (Same look and feel, relative layout support, etc.)

No need to understand the backend layer – A non-programmer can simulate the application and define the data flow between the views (forms, tables, etc.) by using simulated (dummy) services.

Note that Visual Composer is not a limited to prototyping, but starting the development project with Visual Composer gives a sense of which part of the application is feasible to implement with Visual Composer and which part requires Web Dynpro.

Should the decision be taken to create the application from scratch with Web Dynpro, then there is no means of converting the Visual Composer models to Web Dynpro code. Nevertheless, the prototype step is crucial since it enables the collaborative work of the non-programmer and programmer and facilitates the definition of the application requirements.

Step 2 - Identify what are the application requirements by using the following questions:
Service layer

What services are the required?

Which action do you want to perform?

Display the output of a service in a single screen?

Join the data from two or more services onto a single screen?

Map the data coming from one service to another?

Manipulate the returned data?

UI layer

Does your Visual Composer prototype contain all the necessary UI elements/views?

Tools integration
What kind of integration with other tools is needed?

How to use these tools to create business processes?

For a composite application implementing a process for one user or one role from the organization you can use both Visual Composer and Web Dynpro.

For a process that involves more than one role or user from the organization you should use a process engine – guided procedures for CE7.1 and SAP NetWeaver BPM for future versions.
The workflow tool determines the process flow between the different roles (and users), while the user interfaces developed in Web Dynpro and Visual Composer are used (and can be reused) for each process step that requires human interaction.

Since Visual Composer CE executed within Web Dynpro runtime, it is very much possible to model some of the application’s UIs using Visual Composer while other using Web Dynpro. From the UI developer’s point of view this means that both screens will have the same look and feel.

How will these tools work together in the future to bring more value and benefits to the customer?

While CE 7.1 is a first step towards providing a cohesive environment for creating composite applications, in CE7.1.1 both the UI and process tools will reside in the NetWeaver Developer Studio (NWDS) and will display much tighter integration.

In CE7.1.1 there will be an additional entry-point to access the Visual Composer models – the Visual Composer will be integrated within the Eclipse and will enable access to the models from the NWDS.

This new entry-point will support integration between Visual Composer and Web Dynpro by providing the option to start working in Visual Composer and, if you reach a point where Visual Composer is unable to provide certain functionality (such as missing views, service adaptation or data transformation), it can be created in Web Dynpro and incorporated as a WD component into to your Visual Composer model. Double-clicking on the WD component from the Visual Composer model, will open the Web Dynpro perspective allowing you to code the needed functionality. Once the coding is done, closing and saving the component will enable the programmer to return to the VC model and combine the Web Dynpro component with the other parts of the Visual Composer model.

To conclude, when all the necessary services for working with back-end data and the views for displaying the data are available in Visual Composer, the task of creating a Web-based front-end can be performed by non-programmers using Visual Composer.
If back-end services or required functionality do not exist, or the business requirements demand that a more complex UI is built, then Web Dynpro should be the technology of choice because it provides the flexibility to accomplish all these goals. However, this also means that developers with Web Dynpro development experience must be available.
With CE7.1.1, the use of custom developed Web Dynpro components within Visual Composer provides additional choices to include areas of high interactivity or more sophisticated controls/ data manipulation into the UI design.

Appendix

The details below refer to the provided support for both Visual Composer and Web Dynpro for CE7.1 and CE7.1.1.

Service Layer

What are the required services?

Which action do you want to perform?

* The definition of Flat and Complex services is as follow:

Flat services – The data structure of the service input/output parameters is composed of fields having a primitive data type (byte, short, int, long, float, double, char, boolean). These fields may be joined together to form a scalar structure known as a record.

Complex services - The data structure of the service input/output parameters is composed of multiple instances of such records structured as tables. Tables may be nested within tables to form what is known as “deep structures”.

** CE7.1.1 will support a break out from the Visual Composer model scenario. This means that if a complex service adaptation or data transformation is needed, the programmer will be able to break out from the Visual Composer model, open the Java EE layer, code the complex functionality and add it to the Visual Composer model as an EJB component.

UI layer

Does your Visual Composer prototype contain all the needed UI elements/views?

*** CE7.1.1 will support integration of Web Dynpro components in the Visual Composer model. This means that if certain functionality or a UI element is needed, the programmer will be able to open Web Dynpro, code the missing functionality and add it to the Visual Composer model as a black box component.

What kind of integration with other tools is needed?