12    Combining SAP BPM and UI Technologies

It’s not a faith in technology. It’s faith in people.
                                                                                                            —Steve Jobs

For every human activity flow object represented in a Business Process Model and Notation (BPMN) model, you can generate a user interface (UI) for the purpose of enabling a human being to interact with the SAP Business Process Management (SAP BPM) process. In the process flow, when the process context arrives at the human activity step, a task is triggered, and the UI allows the user to access the task and execute it.

Different types of UI technologies can be used in combination with SAP BPM. Web Dynpro Java/ABAP, Adobe Offline forms, Visual Composer and SAPUI5 are among the types of UIs that can be generated within the process context. As of SAP NetWeaver Developer Studio 7.3 EHP 1 SP 13, you can also generate an SAPUI5 UI. Given the multitude of choices of UI technologies that can be used, we’ve chosen to focus on the generation of UIs using Web Dynpro Java and SAPUI5 from the process context in the SAP BPM process flow in this chapter. These two technologies can be generated based on the SAP NetWeaver Developer Studio development that you’ve become accustomed to in past chapters. In addition, these technologies can be directly deployed to your SAP Process Orchestration (SAP PO) server without the need to add an additional server. In real life, however, you might decide to run the supporting UI screen in another server (non-SAP PO), based on your requirements in terms of performance, load on the server, and various other reasons.

12.1    Web Dynpro Java User Interface Technology

The Java Web Dynpro technology is a toolset for building server-side business applications, and it provides the powerful feature of defining UIs in a declarative manner. Depending on the approach, platform, and types of functionalities to be supported, SAP provides two flavors of Web Dynpro: Web Dynpro for ABAP and Web Dynpro for Java.

Web Dynpro for ABAP supports the design of business applications and screens within SAP backend systems. Such applications designed with Web Dynpro for ABAP run on the SAP NetWeaver Application Server for (SAP NetWeaver AS ABAP).

Web Dynpro for Java supports the design of business applications within an SAP NetWeaver Application Server for Java (SAP NetWeaver AS Java) engine. As a result, it can be deployed on SAP PO, which also runs on SAP NetWeaver AS Java. Web Dynpro for Java applications can be designed from scratch in SAP NetWeaver Development Studio and later linked to SAP Business Rules Management (SAP BPM). Alternatively, the Web Dynpro for Java application can be directly generated from within an SAP BPM process. The generated Web Dynpro for Java application can then later be modified to cater to additional functionalities. To generate a Web Dynpro for Java application within an SAP BPM process, a number of steps need to be performed. In the next section, building a sample SAP BPM process will be briefly discussed, including the human activity step in which the UI will be generated.

Overview of SAP BPM Process for Generating the Web Dynpro UI

Figure 12.1    Overview of SAP BPM Process for Generating the Web Dynpro UI

For the purposes of outlining the essential steps involved in generating a Web Dynpro UI from the process context, the simple process shown in Figure 12.1 has been modeled. It consists of four modeled steps: the start step, two human activities, and an end step. The process will be triggered by a web service client tool (SoapUI). Subsequently, the data passed into the process context will be received by the Web Dynpro UI, which can be accessed in the universal work list (UWL) or via the SAP BPM Inbox.

12.1.1    Generating a Web Dynpro User Interface

A Web Dynpro UI will need to be generated to enable a user to interact with the human task in the process. The generation of a Web Dynpro UI from the process context requires a data object. The structure of the data object is used as a basis to create corresponding text fields, checkboxes, or dropdowns in the UI screen. In our sample process, a data object named DO_PurchaseOrder is used to support the UI generation. An illustrative structure of the data object is shown in Figure 12.2.

Definition Structure of the Data Object to be Used to Generate a Web Dynpro UI

Figure 12.2    Definition Structure of the Data Object to be Used to Generate a Web Dynpro UI

To generate a Web Dynpro UI from the process context, follow these steps:

  1. Select the human activity step from the process pane. The Property view appears at the bottom of the screen.
  2. From the Property view, select the Task tab (Figure 12.3). From the dropdown, select the New option.
  3. A wizard will appear. Provide a name for the Web Dynpro UI that will be generated, and check the Generate UI Component checkbox as shown in Figure 12.4.
    Creating a New Web Dynpro UI for the Human Task

    Figure 12.3    Creating a New Web Dynpro UI for the Human Task

    Details of the Web Dynpro Task to be Created

    Figure 12.4    Details of the Web Dynpro Task to be Created

  4. Click on the Next button.
  5. On the next page, select the Web Dynpro value from the UI Technology dropdown field (see Figure 12.5).
    Selecting the Web Dynpro UI Technology with a New Development Component

    Figure 12.5    Selecting the Web Dynpro UI Technology with a New Development Component

  6. A new development component (DC) needs to be created to host the Web Dynpro developments. To create a new DC, click on the New button to the right of the Development Component dropdown (Figure 12.5). This action will launch a new wizard.
  7. In the wizard, select the same software component (SC) for which the SAP BPM process was created (see Figure 12.6). Note that you can create the Web Dynpro DC in another SC, but then you’ll need to create dependencies between the different SCs.
    Selecting the Software Component for the New Development Component

    Figure 12.6    Selecting the Software Component for the New Development Component

  8. Follow the wizard by clicking on the Next button. The pop-up that appears requires some details to be filled in to create the Web Dynpro component. Fill in the name and description information, as shown in Figure 12.7. Leave the default settings for the other fields.
  9. Follow the wizard, and click on the Finish button in the last step to conclude the creation of the new Web Dynpro DC. Now, you can carry on with the generation of a UI for the process.
  10. Follow the wizard, and the Web Dynpro component details are prefilled automatically. You have the option to modify the values if necessary, but, in this case, there’s no need to change anything from the default values (see Figure 12.8).
    Details of the New Web Dynpro DC

    Figure 12.7    Details of the New Web Dynpro DC

    Component Details for the Web Dynpro UI

    Figure 12.8    Component Details for the Web Dynpro UI

  11. Click on the Next button to proceed to the next step. In this step, you need to bind data objects from the process context to the Web Dynpro component that you’re about to generate.
  12. You don’t have to select all the fields of the data object. In the example presented in Figure 12.9, however, all the fields have been selected.
    Process Context for the Web Dynpro UI Generation

    Figure 12.9    Process Context for the Web Dynpro UI Generation

  13. Click on the Finish button to complete the task of generating the Web Dynpro UI from the process context.
  14. Verify that the newly generated Web Dynpro UI was selected by choosing the human activity from the SAP BPM process flow. You’ll then see the Property tab displayed at the bottom of the screen. Click on the Task tab, and check that the newly generated Web Dynpro UI is assigned to the Task field (Figure 12.10).

The generation of the Web Dynpro UI from the process context is now completed. However, a number of post-configurations still need to be performed, which we’ll discuss in the next section.

Created and Assigned Web Dynpro UI to Task

Figure 12.10    Created and Assigned Web Dynpro UI to Task

12.1.2    Post-Configuration Steps

We completed the process of generating a Web Dynpro UI from the process context, and now the graphical view of the Web Dynpro UI can be reviewed and modified. Thereafter, we can proceed with performing post-configuration steps for the UI as follows:

  1. Switch to the Web Dynpro perspective of SAP NetWeaver Developer Studio.
  2. Navigate through the DC you created earlier, and follow the path [LocalDevelopment] hradmin • Components • OrderDetailsComponentView (see Figure 12.11).
  3. Double-click on OrderDetailsComponentView to view the UI screen that was generated based on the process data object, as shown in Figure 12.12.
Web Dynpro UI Components and Views

Figure 12.11    Web Dynpro UI Components and Views

Web Dynpro UI Component View Details

Figure 12.12    Web Dynpro UI Component View Details

Now that the Web Dynpro UI has been created, it’s time to assign principals to its task. Assigning a principal to the UI task specifies which principals (user, group, or role) are allowed to take action on the task, including claiming and completing the task. Follow these steps to assign principals to the human task:

  1. Switch back to the Process Development perspective, navigate through the Process Modeling object, and expand the Task folder, as shown in Figure 12.13.
    Task Folder Displaying the Web Dynpro UI for Task Execution

    Figure 12.13    Task Folder Displaying the Web Dynpro UI for Task Execution

  2. Double-click on the WebDynpro UI component. From the screen that opens, select the roles as shown in Figure 12.14. From the first box, Potential Owners, select the Choose one or more UME principals radio button, and click on the Choose button.
    Assigning Users for Web Dynpro UI Task Execution

    Figure 12.14    Assigning Users for Web Dynpro UI Task Execution

  3. A new pop-up screen appears. From the new screen, select the User option from the Principal Name dropdown, and enter the user name that you want to act as a potential owner for the human task.
  4. Click on the Search button to find the user in the user management engine (UME). After finding the user, click on the Add --> button (see Figure 12.15).
  5. Click on the OK button.
    Searching for Users from the UME to Assign to the Task

    Figure 12.15    Searching for Users from the UME to Assign to the Task

  6. Now that the user has been added as a potential owner of the process, when the processing of an SAP BPM process reaches the human activity, it creates a task that can be seen by all potential users. The user can access this via the UWL of SAP Enterprise Portal or the SAP BPM Inbox.
  7. To complete the process of generating a Web Dynpro UI, you need to perform mappings of data flows between the Web Dynpro component and the process data object. Select the human task, and in the Property view, choose the Inbound Mapping subtab (Figure 12.16).
  8. Map the fields from the data object to the UI request context of the Web Dynpro UI (Figure 12.16).
Mapping for Data Input and Output from and to the Web Dynpro UI

Figure 12.16    Mapping for Data Input and Output from and to the Web Dynpro UI

Depending on your requirements, you might also need to perform mappings in the Outbound Mapping subtab to move the details captured by the user (in the UI) back to the process context.

After these steps are completed, the SAP BPM process can be built and deployed to the server.

Note

As the SAP BPM process is deployed to the server, the generated Web Dynpro UI DC is also automatically selected for deployment. This is because SAP NetWeaver Developer Studio detects a link or dependency between SAP BPM and Web Dynpro DCs.