Skip to main content
Skip table of contents

Step 2: Designing the Forms

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:

empty_form.png

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:

form_overview.png

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:

tutorial_form_columns.png

Select a three-column layout:

tutorial_form_three_columns.png

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. In the user preferences, select Reset Panels.

tutorial_unhide_panel.png

The icons of hidden panels are 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.

Now enter Name, Label, and Placeholder for all other form elements:

Form Element Name

Attributes Content

buttonOK

  • Name: buttonOK

  • Label: OK

  • Primary: Enable to highlight the button.

item

  • Name: item

  • Label: Item

  • Placeholder: There is no placeholder for select fields.

price

  • Name: price

  • Label: Price

  • Placeholder: Enter the order price

quantity

  • Name: quantity

  • Label: Quantity

  • Placeholder: Enter the order quantity

vendorID

See above.

vendorName

  • Name: vendorName

  • Label: Vendor Name

  • Placeholder: Enter the name of the vendor

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:

regular_expression.png

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. Open the select field configuration to edit the options:

open_select_configuration.png

Enter some item data like listed below:

options_select_field.png

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 go to the Attributes panel. Open the styling dialog with a click on option Open the label style dialog of attibute Style:

form_styling_dialog_original.png

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_styling_dialog_2.png

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_styling_dialog_1.png

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_checkorder_grouping.png

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_approval.png

Form Element

Attributes Content

labelApproved

  • Name: labelApproved

  • Label: The order has been approved and filed to the ERP system.

buttonApprovedOK

  • Name: buttonApprovedOK

  • Label: OK

  • Primary: Enable to highlight the button.

Select the label and open its styling dialog. Apply the following styling:

form_styling_dialog.png

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 in the same way:

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.