Summary

Use SmartLayouts, not freeform layouts, to help assure that work object forms and flow action forms are attractive and easy to navigate.

Users can interpret form layouts more easily and may be more productive when input fields are uniformly aligned.

Suggested Approach

Benefits

Introduced in V5.5, SmartLayouts assign an application-wide uniform width and height, and uniform styles and "roles" to columns in a table. SmartLayouts are designed to help developers build attractive forms faster and without tinkering with CSS styles.

SmartLayouts can assure that field labels are vertically aligned, input fields are vertically aligned, and users can easily detect which field has focus. Uniformity in navigation and appearance:

• provides a professional impression to users
• makes forms easier to "scan" for specific fields
• promotes user productivity and accuracy
• reduces training time

When to use

While recommended for new section and harness rules where they make sense, SmartLayouts are not appropriate for every field on every form. Some well designed, attractive forms can't fit within the SmartLayout restrictions.

SmartLayouts are easiest to introduce when creating a new section rule or flow action rule from scratch. A separate knowledgebase article describes tactics you can use to convert an existing section or flow action rule into SmartLayouts: see Tips and tactics for converting to SmartLayouts.

Procedure

Business setting

As inputs, the Emerald application needs information about the volume of a room, and other facts that affect heating or air conditioning requirements. To collect this information, the Enter Room Details flow action is to capture nine input properties:

The measurements (in feet and inches) are of type Integer. Walls is a Text property, and Windows is an integer. The pyNote property is to appear as a multiline TextArea.

Step 1: Create a Section rule

To create a flow action using SmartLayouts:

Create a section rule. Columns in a SmartLayout have one of three types: Label, Field, or Spacer.

• Label columns have a style that expects the cells in the column to contain labels for fields.
• Field columns have a style that expects the cells in the column to contain input fields or read-only field values.
• Spacer columns are empty.

When you create a new section or flow action rule from scratch, it contains a starter SmartLayout containing two rows in the Double template. This has two Label-Field column pairs separated by one Space column.

Each row and each column has an associated panel that allows you to add in-line styles for that column or row. In keeping with the goals of SmartLayout, no other changes are allowed at the row are column level.

As with freeform layouts (also called Custom), you can drag a control or property into a cell (other than a cell in the Spacer column) and define the Cell Properties. However for SmartLayouts, by design, you can't change — on this rule form — the width or height of any cell.

(These width and height restrictions are not always enforced at runtime, as the browser controls the final column and row sizes and may expand them in an attempt to fit data values. The results are often not attractive and cell sizes vary with data content.)

Step 2: Add two SmartLayouts

1. Select the Layout icon from the Layout group on the Form tab of the Flow Action form or the Layout tab of the Section form.
2. Select the Template radio button and the Single, Double or Triple template. Click OK.

In this example, the section contains three SmartLayout controls:

• a Double layout with Bar header to capture the six measurements
• a Double layout with Bar header for the Walls and Windows properties
• a Single layout with No Format for the TextArea.

The No Format option for the Format property of the bottom layout ensures that the padding, margins, and other CSS style attributes of that layout are the same as those of the second layout.

Step 3: Create a Flow Action rule

Create the flow action rule.

Add a 1-cell Freeform layout— not a SmartLayout — below the default 2 x 2 SmartLayout.

Select and delete the SmartLayout.

Step 4: Prepare a single cell to hold the section

Select the Column Properties for the single remaining cell.

Clear the unlabelled check box to allow the width of the column to adjust as required at runtime.

Similarly, open the Row Properties panel and clear the Use at run-time check box.

Step 5: Embed the section

Select a section control from the Layout group. Drop it into the single remaining cell.

Open the Cell Properties panel and identify the section. The Width and Height properties adjust automatically.

Click OK to apple the Cell Properties. Save the flow action.

Step 6: Test

Update a flow rule to allow the flow action.

Advance a work object to an assignment that allows the flow action.

Test the flow action to confirm the runtime appearance and behavior.

Notes

While this example is for a flow action form, you can use a similar approach for harness rules.

Using SmartLayouts —when practical — in section rules that are the building blocks of harness rules and flow actions reduces the number of distinct rules that developers must create and maintain.

Users benefit even when their applications present a mixture of SmartLayouts in many situations and freeform layouts in other situations.