Creating my first Form

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Process wizard > Define Forms >

Creating my first Form

Overview

Forms are built using the Data Model defined in the previous step, Data Modeling,of the Process Wizard.

The context entity of the Process is the starting point to access the data model, and therefore to each attribute that will constitute your Form.

 

Go to the third step of the Process Wizard and click on Define Forms to display the workflow of the Process.

All human tasks that require a Form will be enabled. All other elements in the Process will be disabled as they do not receive any user input.

All activities that still need a Form associated will be highlighted with an exclamation mark as shown in the image below.

 

CreatingForms4

 

Example

Imagine a Purchase Request where your employees request goods and services. The Process model is displayed in the image above.

The first activity of the Process is where the Requester enters all the required request information. To create this first From we need to list what data must be display for this user interaction.

Request information containing: the request date, the name of the requester and a purchase justification

The items requested: table with the goods or services requested

Delivery information: a delivery address, a delivery date and a delivery city.

 

Our Forms will be built based on the following data model.

 

CreatingForms2

 

 

1. Go to the third step of the Process Wizard. When the process model displays, click the Task to create or edit its Form.

The Forms Designer will display. If there is no From previously built the Forms Designer will show a blank display area.

 

 

CreatingForms3

 

 

2. We will arrange the data in three containers onto the Form. Go to the Controls tab on the left pane, select the Group Control in Containers and drag and drop three Groups.

 

Notice that when you drag an item from the left pane, the DROP HERE section will highlight as you hover the mouse cursor over the display area.  This helps to show where the current Control will be included.

 

You can also double-click on the items to automatically included them on the bottom of the Form.,

 

CreatingForms5

 

3. Double-click on each group control to name it.  Name the groups Request information, Products requested and Delivery information respectively.

 

CreatingForms6

 

 

4. Return to the Data tab.

To include attributes from the data model just drag and drop them to the desired position.

As soon as an attribute is added to the Form it is interpreted by Bizagi and becomes a Control. Each Control has a data type: text, Date, Combo (drop-down list), Yes/No, Number, etc, based on the attribute type.

 

For the first Group drag and drop the attributes: Request date, Requested by and Purchase justification.

Make sure the attributes you include are located in the first Group. Drop them when the DROP HERE section of the first group is highlighted.

 

Notice that Request date is included as a Date Control, Requested by is included as a Combo Control (or drop-down list) and Purchase justification is included as a Text Box Control. Bizagi automatically assigns the data type to the Control associated with the selected attribute.  

 

 

CreatingForms7

 

5.  Drag and drop the Products Requested collection onto the second group.

 

A collection will be displayed as a Table Control. Each column (field) to be displayed in the Table must be defined.

 

CreatingForms8

 

6. Click on Edit Columns in the Table Control to drag and drop the columns you want to display.

 

You can also double-click the attributes to automatically include the associated Control in the Columns editor. Click OK when done.

 

CreatingForms9

 

7. Drag and drop the Controls for the last Group: Delivery address, Delivery city and Delivery Date.

 

CreatingForms10

 

8. The first two Controls (Request date and Requested by) should be read-only. These Controls will be populated using an Expression, the data will be pre-filled when the user enters the activity in the Work Portal.

 

Click on any Control. Its properties will be displayed on the left panel. You can also access the Control's properties by clicking the Gear icon alongside, at the top right corner of the Control.

 

CreatingForms12

 

9. Change the value of the Editable property. To make the Control read-only (not editable) select the Cross icon (X ).

 

Notice the appearance of the Control changes, it is no longer highlighted as mandatory (indicated by the red vertical bar) and has no editable area (the red bar is removed).

 

Repeat the procedure for the Requested by Control.

 

CreatingForms11

 

10. When your form is complete, click Save.