Exercise: Create User Interface

Scenario
Employees submit expense vouchers for any number of expense types. The voucher looks as
follows:

An Employee Contact Information (EmpContInfo) property record has been created for this case
type. Utilize it to create a UI for the first part of this form.

For this exercise, you will be performing the role of System Architect using the account generated by
the New Application Wizard (App Express).

User Name: Developer01

Password: password

Approach
In this exercise, you will:

Name the Flow Action for the Complete Expenses step to CompleteExpenses.

Use the Add Fields link below the CompleteExpenses flow action name to open the Edit
Fields screen.

Add a page mode Employee Information field described by the ContactInfo data object type.

Save the Edit Fields updates and then Run the case type to create an instance of
ExpenseVoucher.

Use the UI Inspector to change the layout format to Inline grid double.

Save changes to the case type and then Run the process to create an instance of
ExpenseVoucher to you can view the new User Interface.

Hints
When creating a new case, note some of the following.
1. You can return to any step to change values before clicking Create to create the application.
2. Data objects can be created now, or while editing the case type.

Procedure
Part 1 Begin creating the Expense Voucher case types user interface.
3. Open the Expense Voucher case in the Case Designer and then click Configure Process
detail to open the process outline for the Submit Expenses stage.

4. Select the Complete Expenses step. If you previously visited this step using the form
builder, you will see an Open section link below the action name and may already have fields
in the Form Configuration dialog. Click Configure form to configure fields for this form,
using the data object that was created.


5. If you already added fields to this step, they will appear in the on the Form Configuration
dialog. Add the Employee Contact Information (EmpContInfo) property that was created
using the data object type ContactInfo. If a match is found, the property will be set to Object
and the Data Type will be set to ContactInfo. If an Employee Name field was added
previously, click the X to the right to delete this field. Add an Expense Purpose text field.
The fields for employee contact information should appear, automatically, after youve
entered Employee Contact Info. Ensure that your Form Configuration dialog matches the
screen below before clicking Save.

6. Save changes to the case type and then Run the process to test flow in an Expenses Voucher
case.

Part 2 Edit the Section

7. Return to the process view and click Open Section (under the Action name) to open the UI
section that was created by the form builder.

8. Click in the dynamic layout action area that contains the employee contact information and
then click the View Properties icon.

9. Change the layout format to Inline grid double and then click OK to save this change.


10. Notice that the layout properties change to display a two-column grid format. Click Save to
save changes to the case type. Then, select the First Name field and drag it to the left
position in the top row. Select the Last Name field and drag it to the right in the top row.

11. Adjust any other Employee Contact Information fields to display in your preferred location
within the layout. Then, click the anchor of the Employee Contact Information section and
drag it to the top of the layout (above expense purpose and total expense).

12. Save changes to the layout and then Close the rule form.

Part 3 Change a cell display format using the UI Inspector

13. Create an Expense Voucher case and stop at the first screen.

14. Click the UI Inspector icon n the Developer Toolbar to toggle the UI Inspector on. Move
the cursor until the Total Expense cell is in the red UI wireframe.

15. When the information dialog opens, click the section name.

Note: This provides an alternate way to access sections and properties

while running a case instance. You can also open the section from the
process view and then open the property within the section.

16. View properties for the Total Expense cell.

17. Change the property control to Currency.

18. Using the Presentation tab, you can optionally change the alignment to left-aligned. Save
changes and then create a new Expense Voucher case to see changes to the Total Expense
cell.