Create the form

Our exercise makes use of a single form that will be presented to users when performing business process tasks. Let’s design it!

1. Click the Expense Management folder entry on Emakin’s sidebar and the folder is displayed;

2. Click the rightmost Menu button on Emakin’s top bar to open the business processes sidebar;

3. Click the Expense Submission process entry in the processes sidebar and the process is displayed;

4. Click the Edit button on the Expense Submission process to open the Process Designer;

5. Click the Pool pool in the Pools section and the pool is displayed in the Process Designer.

The objective is to design a form similar to the one depicted below. Usually, it involves dealing with a variety of nested form controls and connecting some of them to elements of the data model.

Open

The Process Designer automatically creates one default form, named Form, and that’s good enough for this exercise.

1. Click the Form form in the Forms section and the form is displayed in the Process Designer;

2. Click anywhere inside the form area to select it (looks just like a big empty box at this time).

Expense Report

We want to create a main heading to clearly identify what this form is all about.

1. Click the Add New button on the overlayed menu of the selected form;

2. Click Layout Controls > Row Content to display the Row Content creation dialog;

3. Select the Create new section here option;

4. Enter ExpenseReport, two words concatenated without space, as the Section Name;

5. Click the Ok button on the dialog and the Row Content is created, displayed, and selected;

6. Enter Expense Report as the Label on the Row Content properties sidebar.

Origin

This section identifies the origin of the expense, namely: employee, department, and submission date.

1. Select the Column layout control already present inside the Expense Report;

2. Click the Add New button on the overlayed menu of the selected Column;

3. Click Layout Controls > Row Content to display the Row Content creation dialog;

4. Select the Create new section here option;

5. Enter Origin as the Section Name;

6. Click the Ok button on the dialog and the Row Content is created, displayed, and selected;

7. Click the Columns button on the overlayed menu;

8. Select the three equals spaced columns option from the columns layout pop-up.

Employee

1. Select the left Column layout control now present inside the Origin;

2. Click the Add New button on the overlayed menu;

3. Click Layout Controls > Row Content to display the Row Content creation dialog;

4. Select the Use current section option;

5. Click the Ok button on the dialog and the Row Content is created, and displayed;

6. Select the Column layout control inside the newly created Row Content;

7. Click the Add New button on the overlayed menu;

8. Click Input Controls > Identity Picker to display the Identity Picker creation dialog;

9. Enter Employee as the Field Name;

10. Click the Ok button on the dialog and the Identity Picker is created, and displayed.

Department

1. Select the middle Column layout control now present inside the Origin;

2. Click the Add New button on the overlayed menu;

3. Click Layout Controls > Row Content to display the Row Content creation dialog;

4. Select the Use current section option;

5. Click the Ok button on the dialog and the Row Content is created, and displayed;

6. Select the Column layout control inside the newly created Row Content;

7. Click the Add New button on the overlayed menu;

8. Click Input Controls > Text to display the Text creation dialog;

9. Enter Department as the Field Name;

10. Click the Ok button on the dialog and the Text is created, and displayed.

Date

1. Select the right Column layout control now present inside the Origin;

2. Click the Add New button on the overlayed menu;

3. Click Layout Controls > Row Content to display the Row Content creation dialog;

4. Select the Use current section option;

5. Click the Ok button on the dialog and the Row Content is created, and displayed;

6. Select the Column layout control inside the newly created Row Content;

7. Click the Add New button on the overlayed menu;

8. Click Input Controls > Date and Time to display the Date and Time creation dialog;

9. Select the No, use single date option;

10. Enter Date as the Field Name;

11. Select the Date option as the Field Type;

12. Click the Ok button on the dialog and the Date and Time is created, and displayed.

Details

This section comprises a few details of each expense.

1. Select the Expense Report Row Content layout control;

2. Click the Add New button on the overlayed menu;

3. Select the newly created Column layout control inside the Expense Report;

4. Click the Add New button on the overlayed menu of the selected Column;

5. Click Layout Controls > Row Content to display the Row Content creation dialog;

6. Select the Create new section here option;

7. Enter Details as the Section Name;

8. Click the Ok button on the dialog and the Row Content is created, and displayed.

Expenses

1. Select the Column layout control inside the newly created Details;

2. Click Layout Controls > Row Content to display the Row Content creation dialog;

3. Select the Use current section option;

4. Click the Ok button on the dialog and the Row Content is created, and displayed;

5. Select the Column layout control inside the newly created Row Content;

6. Click the Add New button on the overlayed menu of the selected Column;

7. Click List Controls > Table Content to display the Table Content creation dialog;

8. Enter Expenses as the Table Name;

9. Enter Expense as the Table Row Name;

Description

1. Enter Description as both the Column Name and Column Label;

2. Select the String option as the Column Type;

Amount

1. Click the Add New button on the dialog to create a new Table Column;

2. Enter Amount as both the Column Name and Column Label;

3. Select the Number option as the Column Type;

Currency

1. Click the Add New button on the dialog to create a new Table Column;

2. Enter Currency as both the Column Name and Column Label;

3. Select the Choice List option as the Column Type;

4. Click the Ok button on the dialog and the Table Content is created, and displayed;

5. Select the Currency drop down control;

6. Click Data Sources on the overlayed menu;

7. Click Static List Items on the pop-up menu;

8. Click the Add New button on the creation dialog;

9. Enter Euros (EU) as the Text;

10. Enter EUR as the Value;

11. Click the Add New button on the creation dialog;

12. Enter Dollars (US) as the Text;

13. Enter USD as the Value;

14. Click the Ok button to dismiss the creation dialog.

Next: Review the data model

Previous: Create the process diagram