Follow Our Example User Story

David starts with designing a form to collect the order data. He needs the following data items:

vendor ID
vendor name
item
quantity
price

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.

Design a Form to Enter the Order Details

In folder Forms, create a new form Form_EnterWebOrder.

If you want to create new items in the Service Panel just hover over a folder (or its contents) and use the icons in the pop-up menu. To open the context menu of an item, right-click it in the tree.

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.

Create a Rough Sketch

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. So before starting to design the actual form, change the layout of the form. Choose icon Column Layout from the toolbar of the form editor.
	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) two text boxes () a select field () two text boxes again () a button () Click on the image to run through the animated version once. Click again to repeat.

Specify the Details of the Form Elements

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.

It is important to add meaningful names, because you will need to refer to these names later when implementing the process.

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.

Designer panels can be moved and hidden.

If you do not see the Attributes panel, click on the user icon in the top right corner, open the User Preferences and select Reset Panels.

The icons of hidden panels are also displayed in the top right corner of the editor. You can also click the attributes panel icon here, to display the panel again.

Double-click the highlighted attributes and enter the following:

Name: vendorID
Label: Vendor ID
Mandatory: True
Placeholder: Enter the vendor ID

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:

Form Element Name	Attributes Content
vendorID	See above.
vendorName	Name: vendorName Label: Vendor Name Placeholder: Enter the name of the vendor
item	Name: item Label: Item Placeholder: There is no placeholder for select fields.
quantity	Name: quantity Label: Quantity Placeholder: Enter the order quantity
price	Name: price Label: Price Placeholder: Enter the order price
buttonOK	Name: buttonOK Label: OK Primary: Enable to highlight the button.

Add Validation to Some 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:

Form Element Name	Attributes Content
vendorID	Regular Expression: [0-9]* Validation Note: Your input is invalid, please enter a number.
quantity	Regular Expression: [0-9]* Validation Note: Your input is invalid, please enter a number.
price	Regular Expression: *([0-9][.])?[0-9]+ Validation Note: Your input is invalid, please enter a decimal number.**

Refer to Validating Form Fields in the Designer guide for more detailed information about form field validation.

Populate the Items List

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:

Value	Label
PEN-1	Pencil
PEN-2	Marker pen
PENX-1	Pencil sharpener
TON-1	Toner
BAL-1	Ballpen

Design "Form_CheckOrder" for the Supervisor

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):

one label element ()
two text boxes ()
another label element ()
a grouping element () with attribute Number of Colums: Two
two buttons () within the grouping element

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:

Form Element	Attributes Content
labelHeading	Name: labelHeading Label: Check Order Style: Format: Header 1 Font Family: Default Font Size: Default Align: Align Center

To change the color of an element, click the colored square, and select a color or enter a color code.

For the two text boxes, enter content in the attributes Name, Label, and set Read-only:

Form Element	Attributes Content
orderedItem	Name: orderedItem Label: Ordered Item Read-only: True
orderedValue	Name: orderValue Label: Order Value Read-only: True

Adjust the second label element as follows:

Form Element	Attributes Content
labelMessage	Name: labelMessage Label: The order value exceeds the limit. Do you still want to approve the order? Style: Format: Default Font Family: Default Font Size: Default Align: Align Center

Format the grouping element and its content as follows:

Form Element	Attributes Content
groupingElementButtons	Name: groupingElementButtons Header: Header Show Header: False Number of Columns: Two
buttonApprove	Name: buttonApprove Label: Approve
buttonReject	Name: buttonReject Label: Reject

Design the Message Forms

To show the outcome of the validation, go to the service panel and create two additional forms:

Form_EndApproved
Form_EndRejected

Form_EndApproved

Open Form_EndApproved.

Choose a three-column layout, and add

a label ()
a button ()

Apply the following to the form elements in the Attributes panel:

Form Element	Attributes Content
labelApproved	Name: labelApproved Label: The order has been approved and filed to the ERP system.
buttonOK	Name: buttonApprovedOK Label: OK Primary: Enable to highlight the button.

Select the label. Then, click on the link icon in the Attributes panel to open the styling dialog. Apply the following styling:

Form Element	Attributes Content
labelApproved	Style Font Size: 22px Font: Bold Format: Align Center Color: #10a223

Form_EndRejected

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.