Develop User Interfaces for the BPM Layer

Questions Answered

Which UI technologies can I use to develop UIs for the BPM layer?
On which technical level do I establish the link between a process and a UI component?
What special requirements must I meet in order to be able to provide UI components for process integration?
How does service consumption work in Web Dynpro for Java?
How do I integrate enterprise services?

Introduction

Note Note

Since only Web Dynpro for Java can currently be used for integration in the Business Process Management layer, we will concentrate on this UI technology here. We also include Interactive Forms by Adobe for online solutions because, from an implementation viewpoint, they build on Web Dynpro.

End of the note.

Web Dynpro includes a runtime environment and a design time environment for the Java-based development of Web UIs.

The important features include:

the MVC-based (Model-View-Controller) programming model
the model-driven and declarative development style for the reduction of programming effort required
widely supported by automatically generated coding
client independence when using an extensive library of screen elements
a component model for modulizing applications

Web Dynpro is mainly used in the development of fully-fledged and complex UIs for business applications on SAP NetWeaver.

Process Layer Integration with Web Dynpro for Java

UIs come into play when an interactive step (user interaction) is planned in a business process. A direct user interaction is represented in process modeling using a flow object called Human Activity (See also: Model Business Processes). A human activity is in turn assigned to a task so that it can be executed. In addition, a human activity must be capable of receiving input and output data from the process context and transforming it. UI integration with the process layer takes place on this level. A Web Dynpro component is assigned to a task as a UI element here. The communication between the Web Dynpro component and human activity is based on events that directly control the execution of a task. At least one Web Dynpro event, which signals the completion of the task, is necessary. A further event should be defined as an exception or error event, which is always triggered as soon an error or exception situation occurs in the task execution. This also gives a rough answer to the question of which special requirements arise for the Web Dynpro developer when executing this integration.

First of all, a few technical details:

A Web Dynpro component contains different controller entities for the implementation of the navigation and application logic on the one hand and visual entities that represent the UI parts on the other. In addition, a Web Dynpro component implements further interfaces for external clients. This allows, for example, the implementation of data exchange out with the limits of the Web Dynpro component using the interface controller. This is possible because the interface controller permits the integration of an external component with the embedded component at the controller level. The local occurrence of this interface, the local component interface, plays the deciding roll in event-based communication with a human activity: It is not detached but instead defined in the implementing component and can be understood as its self-defined interface for external users. For the Web Dynpro developer this means that in the Component Controller (inner part) and the Interface Controller (external API) the corresponding context elements and the events for the process communication must be defined and the respective handler methods implemented in the Component Controller.

Service Consumption in Web Dynpro for Java

In Web Dynpro for Java, the model layer represents all the data that the user interface is working on and manages connectivity to the relevant backend systems. Wizards allow you to integrate several kinds of backend systems easily and manage the automatic generation of all representations of the data and functionality in the model. Web Dynpro for Java provides a wide variety of options for consuming services, wherever they come from and however they are implemented, such as from an ABAP system or in the form of Web services, EJBs, or even as JavaBeans. However, consuming enterprise services is of particular importance for composite applications (See also: Find and Validate Enterprise Services for Reuse). In this context, you will make use of the adaptive Web service model importer in Web Dynpro to access a WSDL document located in the Services Registry. To create a model in Web Dynpro, the model importer first establishes a connection to the Services Registry, and then takes care of the download for service definition and finally for the generation of corresponding model classes in the Web Dynpro project.

Activities

The following sequence illustrates typical activities when developing Web Dynpro applications, as well as taking account of integration into the process layer.

1. Setup the Web Dynpro project.

Depending on the approach you use (top-down or bottom-up), you have the option of creating a Web Dynpro project as part of a product or explicitly creating a separate development component. See also: Set Up Your Development Project for the Composite Application

Create a new product in the Composite Designer.
More information: Creating Composite Applications

or
Create a Web Dynpro development component.
More information: Creating a Web Dynpro DC

2. Create a Web Dynpro component.

More information: Creating Components

3. Integrate enterprise services with Web Dynpro.

Note Note

When you use the product-oriented top-down approach, you can take advantage of the relation capabilities in the Composite Designer. The Create Relation function automatically triggers the creation of a model, as well as further integration steps.

End of the note.

Create the relationship between the enterprise service and the Web Dynpro component in the Composite Designer.
More information:Managing Relations

or
Import the adaptive Web service model from within the Web Dynpro project. More information: Importing Adaptive Web Service Models

4. Specify the dataflow between the Web Dynpro model and the user interface.

The data transport between the model and a component controller is referred to as model binding, a step that is carried out by declaration. The only thing the developer must do is to define the relationship between the different controllers using the context mapping mechanism. Based on the model binding and context mapping, the model data held in the component controller’s context is also available to the view. The view in turn makes data available to the various UI controls.

Bind the component controller context to the model.
More information: Binding Context to the Model
Define the context mapping.
More information: Defining Controller Relations

5. Integrate Web Dynpro into the process layer.

To establish communication between the Web Dynpro component and a human activity, you must first provide the process events required for task execution in the process layer. For this purpose, you will create at least one event and implement the handler methods to signal the completion of the task. The creation of an error event that signals an error during the component’s life cycle is optional.

Create process events Complete and Error
- in the Web Dynpro component controller

and

- in the interface controller of the component.
Create the event handler methods complete and error in the component controller and interface controller.

Implement the event handler methods in the component controller.

- Add the following line of code to fire the event Complete:

Syntax Syntax

  public void complete(... wdEvent )
  {
    //@@begin complete(ServerEvent)
	  wdThis.wdFireEventComplete(); 
    //@@end
  }

End of the code.

- Add the following line of code to fire the event Error:

Syntax Syntax

  public void error(... wdEvent )
  {
    //@@begin error(ServerEvent)
	  wdThis.wdFireEventError(); 
    //@@end
  }

End of the code.

Create the context according to the data you want to pass to or retrieve from the process
- in the component controller

and

- in the interface controller.
Design the view layout and define the user interaction according to the requirements of the task execution in the process layer.
- Add UI elements to the view and define their properties.

- Define the context mapping between the component controller and the view controller.

- Create appropriate actions in the view controller.

- Implement the corresponding event handler methods. Especially, invoke the complete method in the component controller.
Syntax
1. ```
public void onActionSubmit(... )
  {
//@@begin onActionSubmit
 ...// some lines of code
	wdThis.wdGet[MyController]().complete();

//@@end
```
End of the code.
Define the relationship between a human activity within the process layer and a Web Dynpro component.

Note
You can take advantage of the relation capabilities in the Composite Designer when using the Create Relation function. Alternatively, you can assign the Web Dynpro component to a task in the Process Composer manually.

End of the note.
- Create the relationship between Web Dynpro and the process in the Composite Designer.
  More information: Managing Relations
  
  or
- Assign a Web Dynpro component to a task manually.
  - Add the Web Dynpro component to the public part.
  
  - Add the Web Dynpro component to the dependency list of the process development component.
  
  - Assign the Web Dynpro component to a task in the Process Composer.
  
  More information: Assigning a User Interface to a Task

6. Run and test the Web Dynpro application.

More information: Running Web Dynpro Applications

Next Steps

Integrate Online Interactive Forms by Adobe (Optional)

Adapt, Simplify and Join Existing Services using CAF