Summary

SmartLayouts provide users with professional-looking, high productivity forms.

If your application includes many harness rules, section rules, or flow action rules, you can gradually convert some to the SmartLayout approach following the tactics described in this article.

Suggested Approach

Using SmartLayout tables on a flow action form or work object form ensures uniform vertical and horizontal alignment of fields and labels.

SmartLayouts are easiest to include when creating a new harness, section, or flow action rule, See How to create attractive flow action using SmartLayouts for an example.

However, your application may include many section, harness, and flow action forms that do not use SmartLayouts. Although no automated conversion is possible, following these tactics helps ensure a consistent approach and can reduce the effort involved.

The New harness for the ZetaCo Subscription application requires only 4 input fields, but alignment — for both labels and input fields — is problematic. As the red vertical markers suggest, little attention has been paid to convey the structure of the data through form layout.

Upon inspection, the harness rule NewSample contains three sections: NewHeaderSample, BodySample, and (within BodySample) StatusSample.

Tactic 1: Work with a copy

To avoid any risk of disrupting forms in use by others — even in a development system — copy a rule to be converted into a higher RuleSet version, or save them under a new name.

1. Plan. Determine the mix and sequence of Single, Double and Triple templates you will need for the SmartLayout.
2. Select the Layout control. Add one or more SmartLayouts below all existing layouts.
3. Select a cell in the original (non-SmartLayout) layout. Copy.
4. Place the mouse pointer in the destination SmartLayout cell. Paste.
5. When all cell contents are pasted, select and delete the original layout,.
6. Repeat until all layouts are converted.

Tactic 2: Work "bottom-up" by converting sections first

Section rules are the building blocks of harness rules and flow action forms.

Follow a "bottom-up" approach:

1. Identify the "base" section rules — those that do not contain other section rules — that are embedded in others.
2. Converting the (non-SmartLayout) section rules that are embedded in multiple other harness, section, or flow action rules first.
3. Updating flow actions

Tactic 3: Identify exceptions

Your application's forms may include entire sections in layout cells.

Other cells may DataGrid controls, Work Area controls, List-to-List-controls, or other large elements that cannot easily be made to conform to the width or height restrictions of a SmartLayout.

Keep a list of the exceptions. Often a form that contains one wide control can still look attractive in a "down-graded" Single SmartLayout, where the width of the leftmost Label column is unchanged, but the Field column is as wide as needed.

To achieve this downgrade:

1. Open the Layout panel.
2. Click the Allow Changes to the Template panel. (Note the warning that this change is not reversible.)
3. Open the Column Properties panel for the right column. Change the Column Type to None.
4. Select and drag the right column to the desired runtime width.

Tactic 4: Convert, don't attempt to "upgrade"

While you can "impose" SmartLayout structures on an existing layout, the result is not a true SmartLayout. Working with a copy of the original rule:

1. Place the new SmartLayouts below the current layouts.
2. Adjust the number of rows as needed.
3. Select a cell in the original layout. Right-click, and choose Copy from the context menu.
4. Select a corresponding cell in the new Smart Layout. Right-click and choose Paste from the context menu,
5. Repeat steps 3 and 4 until each cell is copied.
6. Delete the original layouts.

The example below shows the results of steps 3 and 4 for the StatusSampleR section, a replacement for the StatusSample section. The SmartLayout appears at the bottom, below the original layout.

Tactic 5: Use the No Format setting for Format

The default setting for the Format field on the Layout Property Panel is No Format.

Accept this default format in most cases when the layout is embedded within higher-level structures (such as a section that is within another section, or a section that is within a cell in harness). In many cases, you can change the Format value for existing layouts to No Format.

Generally, the value No Format means that the margins, padding, and other spacing of this layout are the same as those of the parent layout.

Tactic 6: Use a separate layout for each row type

For example, if a form contains two input fields in one row, but the next row contains only a single field, and the next row contains three fields:

• Select and drag three separate SmartLayouts to the form.
• Make the first one a Double template, the second a Single, and the third a Triple.

This approach produces a more attractive result than starting with a Triple template and merging cells.

Testing the results

The replacement harness rule NewSampleR includes replacement section rules NewHeaderSampleR, BodySampleR, and (within BodySampleR) StatusSampleR.

To test, first update the Design tab of the starter flow rule to reference the replacement harness rule.

Then start the flow rule to view and interact with the Smart-Layout replacement harness. Alignment is much improved.

Related Topics

How to create attractive flow actions using SmartLayouts

When not to use SmartLayouts