David starts with designing a form to collect the order data. He needs the following data items:
He also designs a form for the supervisor who can still release the order if the order limit is exceeded and a message for each result of the order check: approval or rejection. |
In folder Forms, create a new form Form_EnterWebOrder. |
The newly created form opens in a separate form editor tab.
For more information on the form editor in general, e.g. an explanation of all window elements and features, refer to Working with the Form Editor in the Designer guide.
You are going to design a form like this one:
Find a detailed description of all available form elements on Supported Form Elements in the Designer guide.
It looks nicer if all elements are placed in the center of the form with spacing left and right. | |
Select a three-column layout. | |
Now, start dragging form elements from the sidebar of the form editor to the center column of your layout. You need (from top to bottom)
|
In a second step, you need to rework the form elements: Give them meaningful names and labels, fill in some data for the select field, check some field values.
Select the topmost text box and have a look at the Attributes panel. You can find it in the bottom left of the form editor.
| |||||||||||||||
Double-click the highlighted attributes and enter the following:
The Name of the text box will be used in the BPMN process later on to access the data of that text box. The Label and the Placeholder text will be displayed on the form to guide the user as to what he should enter when filling in the form. | |||||||||||||||
Enter Name, Label, and Placeholder for all form elements:
|
Besides that they are mandatory, some fields need additional validation: The vendorID needs to be a number as well as the input of quantity and price. The price also may contain decimal places.
The input data of text boxes can be validated using a Regular Expression. You can also enter a Validation Note to inform the user about the valid entries. Enter regular expressions and corresponding validation notes to the text boxes as listed below:
Refer to Validating Form Fields in the Designer guide for more detailed information about form field validation. |
Finally, you are going to provide some order items to select from.
Select form element Item and switch to the Attributes panel. Attribute Options defines available options. Initially there are none. Click the link icon to edit the options. | |||||||||||||
Enter some item data like listed below:
|
To give the supervisor the opportunity to manually review and - if necessary - to approve an order that exceeds the limit, go to the Service Panel and create the additional form Form_CheckOrder. Switch to a three-column layout again and start dragging form elements to the center column of your layout.
You need (from top to bottom):
| |||||||||
Use the first label element as header for your form. You can apply styling to a label via attribute Style: Select the label and click icon in the Attributes panel to open the styling dialog. Apply the following styles:
| |||||||||
For the two text boxes, enter content in the attributes Name, Label, and set Read-only:
| |||||||||
Adjust the second label element as follows:
| |||||||||
Format the grouping element and its content as follows:
|
To show the outcome of the validation, go to the service panel and create two additional forms:
Open Form_EndApproved.
Choose a three-column layout, and add
| |||||||
Apply the following to the form elements in the Attributes panel:
| |||||||
Select the label. Then, click on the link icon in the Attributes panel to open the styling dialog. Apply the following styling:
|
Switch to the form you created for the rejection message, and define the form as shown below:
You have now drawn the business process as a BPMN and created forms to enter the necessary process data. In the next step, you must assign the forms to their respective process steps.