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 connected. Usually, you design the web interface first. For planning the design of screens and rule settings, however, it is required that you have a clear understanding of how the process to be connected to the web interface will look like.
Designing a Web Interface
To create a web interface, proceed as follows:
- Open the project for which you want to create the web interface. It is recommended that you create one web interface per process.
- Create the web interface, and name it.
- Build the initial launch screen with all widgets required for the process. This screen triggers the process. The launch screen must have a button that starts the process.
- 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.
- Set the rules on the initial and new widgets for each screen in the widget properties. Rules define which design elements are available (also in the background), visible, or active (can be edited).
For details about the WebModeler, refer to:
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
- Radio 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.
The web interface for the sample application contains the following elements:
- Header displaying the application name, the connected user and a menu bar
- Progress bar displaying the steps
- Information section including the details of the expense request
- Evidence section including the possibility to attach files and add notes
- History section to track the actions of the request and add notes in a comment
- Submit and Save buttons
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.
- Manager Validation screen: On this screen, the manager can view the entered expense request data and either reject or approve the request.
- Expense Payment screen: On this screen, the member of the administration team confirms the payment.
This image shows the web interface of the sample as exposed to users:
The following image shows the Launch screen of the web interface in the WebModeler:
To create the web interface, proceed as follows:
- Open the Sample Expense Request project.
- Create a web interface named Expense Request.
- Build the initial Launch screen with all widgets required for the process.
- Create and configure the additional screens for the Manager Validation and Expense Payment steps.
- Add the buttons for rejection and approval to the Manager Validation and Expense Payment screens.
- Set the rules on the initial and new widgets for each screen as outlined in the figure below.