Web Interface Design

In this section, you will learn how to design the web interface for your application.

The web interface and the process reflecting the business logic of your application are closely related. Usually, you design the web interface first. For planning the design of screens and rule settings, it is required that you have a clear understanding of the process and what the web interface to be connected to it is to look like.

Table of Contents

• Web Interface Design
  • Designing a Web Interface
    • Using Widgets
  • Sample Application
    • Screens

Designing a Web Interface

To create a web interface, proceed as follows:

1. Open the project for which you want to create the web interface. It is recommended that you create one web interface per process.

2. Select the type of web interface you want to create, and define a name for it.

   

3. Build the initial launch screen with all widgets required for the process. This screen triggers the process. It must have a button to start the process. For details, refer to the sample application.

4. Create and configure the additional screens required for the workflow steps of your application. By using screens, you can design different forms for the same web interface. For details, refer to the sample application.

5. Under Visibility in the widget properties, set the visibility rules for the initial and new widgets of each screen. The rules define which design elements are available (also in the background), visible, or active (can be edited), for example:

   

For further details about web interfaces, refer to:

• Web Interfaces Concepts
• Using the WebModeler

Using Widgets

The main components of a web interface are widgets of the following types:

• Text, number, date, email, URL input fields
• History & comments
• Sections & tabs
• Static texts
• Lists
• Checkboxes
• Radio buttons
• Arrays
• Buttons
• HTML blocks
• File upload widgets
• Progress bars

The following image illustrates the usage and configuration of widgets in the WebModeler:

For details, refer to Widget Types.

Sample Application

The image below shows the web interface of the sample application as exposed to users. It contains the following elements:

Number	Description
	Header displaying the application name, the connected user, and a menu bar.
	Progress bar displaying the main process steps.
	Information section providing the details of the expense request.
	History section to track the actions for the request and add notes in a comment.
	Evidence section including the possibility to attach files and add notes.
	Submit and Save buttons.

To create the web interface of the sample application, proceed as follows:

1. Open the Sample Expense Request project.
2. Create a web interface named Sample – Expense Request.
3. Build the initial Launch screen with all widgets required for the process. For details, refer to Screens.
4. Create and configure the additional screens for the Validate Request and Confirm Payment steps. For details, refer to Screens.
5. Add the buttons for rejection and approval to the Validate Request and Confirm Payment screens. For details, refer to Screens.
6. Set the rules on the initial and new widgets for each screen as outlined in the figure below.

For general information about screens, refer to the description of the screen concepts.

Screens

The web interface consists of three screens reflecting the process steps and tasks of the different users involved in the process:

• Launch screen: On this screen, the employee will enter the data for the expense request. It contains all elements described above.

  

Number	Widgets
	Custom widget which builds the header and the menu bar. This custom widget contains the menu bar definition in JavaScript. For details, refer to Menu bar in the Developer Guide for the Advanced IDE.
	Progress bar widget to indicate the current process step.
	Information section including the following widgets: User selector to specify the expense requestor. Date input field to automatically fill in the current date. Text input fields that automatically provide the request number as defined in the start event of the process, and the status of the request returned by the corresponding process step. Static list widget including a list box for selecting the currency from a custom list. The custom list used here is defined in the sample project. It offers Euro, US Dollar, and Australian Dollar for currency selection. Text input widget to provide the currency exchange rate based on Euro. The value is calculated by a composite API, which is connected to the web interface and retrieves the daily exchange rate from the European Central Bank via a connector. Array widget: The array_expenses variable defined in the array widget collects the data which are defined in the columns. The JavaScript calculates the total amount in Euro. Application history widget showing the actions performed by the involved users.
	Evidence section including the following widgets: Upload widget to upload files related to the expense request. Text input widget to enter the reason for the action performed by the current user. This text field is available on each screen.
	Save as draft and Submit button widgets for the Launch screen.
	Submit button widgets for the Validate Request screen.
	Submit button widgets for the Confirm Payment screen.

For details about widgets, refer to Widget Types.

• Validate Request screen: On this screen, the manager can view the entered expense request data and either reject or approve the request. The input elements are deactivated except for the Reason text input field.

  

• Confirm Payment screen: On this screen, a member of the administration team confirms the payment. The input elements are deactivated except for the Reason text input field.