Summary

Through a Designer Studio preference, you can preview the effects of an application skin's styles when viewing or updating a harness, section, or flow action rule.

This feature is helpful in most situations, as styles affect not only colors and fonts, but other presentation features such as padding (indenting of headings and subheadings).

Using this feature is especially important when your forms include SmartLayouts, since the dimensions of cells are determined by the skin.

For configuration steps in releases before V6.1, see How to preview the effect of style changes on work object forms (V5).

Suggested Approach

After you've developed and saved a harness, section, or flow action rule, you can preview it with the Preview toolbar button, or test it more thoroughly in the application's portal and flow.

However, by setting a Designer Studio preference, you can see a highly faithful preview of the form's runtime appearance directly in the Designer Studio portal, while viewing the Layout tab of those rule forms.

For example, this Harness form shows the default presentation of a harness rule AlphaCorp-OrderEntrySystem-PurchaseOrder.NewOrder when the preference is set to the default setting:

The form includes SmartLayouts to provide uniform alignment of labels and fields, as evident in this close-up:

The application uses a skin rule named CoolLavender, produced and maintained by the Branding wizard, to present work object forms (including flow actions), user portals, and reports.

Setting the preference

To preview harness, section, and flow action rules more accurately while in design mode, select Preferences from the Profile menu — the menu accessed by the down arrow to the right of your operator name:

Navigate to the General group of preferences. In the Run process in section, select View and select a skin in the Skin field. Click Save.

(To later test using the application user portal, update the preferences again. In the Run Process in section, select New Portal and select a portal.)

When the same Harness rule form is opened — still in the Designer Studio portal — the Layout tab presentation reflects the colors and fonts defined in the skin:

SmartLayouts affected by skin

In this example, the differences are not only cosmetic, evident by comparing this close-up image to the one above:

The width of the SmartLayout columns is different, and the height of rows is different.

In this example, the differences are due to settings in the Smart Layouts step of the Branding wizard. By default, SmartLayout rows are 25 pixels tall, and label columns are 100 pixels wide.

For the CoolLavender skin, a designer chose different heights and widths. (These values are chosen to demonstrate the preview feature, not to suggest good design practice.)

By setting the preference, the designer, while working on the Layout tab in the rule forms, sees a close approximation of the resulting work object form: