Now well prepared: Using preview for faster roundtrips when developing BPM tasks UI

[Former Member]

Motivation

In SAP BPM process modeling, you use tasks and assign them to the human activities in your process. The task is executed by a human. The UI component assigned to a task allows the user to access and provide data and to complete that task.

With the UI Task Generation, you can generate tasks and their UI components spending less time and effort compared to implementing the UI application from scratch. Tasks and UI components are generated using the process context that includes the data objects in the process and their data types. Task input and output fields correspond to the selected process context attributes.

The UI Task Generation is able to use SAPUI5 as a technology for the generated UIs. In some cases, generated UIs should be customized and developed further. To support such kind of development, SAPUI5 provides a local preview functionality within the SAP NetWeaver Developer Studio (NWDS). During the development of an SAPUI5 application, this avoids the roundtrip that is usually needed, of redeploying the UI application to the BPM Process Server just for verifying the resulting UI.

Starting with SAP BPM 7.50 SP02, SAPUI5 Task Generation now generates all needed artifacts for using the SAPUI5 preview (previously you could create files manually as described in the post Using preview for faster roundtrips when developing BPM tasks UI).

This blog post provides a description of how to run an SAPUI5 preview on generated BPM task UIs.

Preparation

Plugin Installation

Firstly, additional software – UI Development Toolkit for HTML5 – should be installed. For this purpose, open NWDS, go to Help > Install New Software… and enter the update site https://tools.hana.ondemand.com/mars/. You should see UI Development Toolkit for HTML5 in the list. Select this option and proceed with the plugin installation following the wizard steps. Restart your NWDS.

Test Process

Secondly, we need a process definition. In this document, the simple process definition containing single human activity is used. You should create a new task and generate the UI for this task. Use SAPUI5 technology and create a new Web DC when creating the task.

No deployment for process and Web DC is needed.

For more information about how to generate UI for the task, please check the next blog post: Creating OData-based SAPUI5 UIs for BPM tasks – complex is now easy as well….

Enabling new project facet

Then, you need to enable a specific project facet on the Web DC that you used as a target for the UI generation. For this, find the Web DC in the list of your projects, right-click on it and select Properties. Once you see the properties for your project, you should select Project Facets and check the SAPUI5 Application option. Accept the change by choosing OK.

Running Preview

Once all preparation steps are completed, you can use the preview functionality. Go to your Web DC used for UI generation, open the WebContent folder. Then, go to the component folder, open test folder and right-click on testIndex.html. Select Run As > Web App Preview. Wait until the embedded browser appears.

The embedded browser will show a URL like

http://localhost:<port>/<Web DC>/<Component Name>/test/testIndex.html.

If the UI is not rendered and you see a blank page, choose the External Browser button on the right of the URL to open the UI in your default system browser.

You should see the UI with the random values in the input fields and no pop-ups with error messages. Please keep in mind that the values are generated randomly each time you refresh the page. For the collections, one hundred entries are generated.

You can do further updates to the UI (for example, edit message bundles or add new inputs to the view) and refresh the page opened in your browser to see the changes. This saves time as no deployment of Web DC or Process DC is needed to see the changes done with the UI implementation.