Summary

Note: This article describes the steps available in Process Commander versions prior to Version 6.1. For the appropriate Version 6.1 information, see How to preview the effect of style changes on work object forms (V6).

Through a Developer portal 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.

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.

But by setting a Developer portal preference, you can see a highly faithful preview of the form's runtime appearance directly in the Developer portal, while viewing the Layout tab (or the Form tab, for flow action rules).

For example, this Harness form shows the default presentation of a harness rule MyCo-Emerald.NewSample when the preference is not set:

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 Emerald, produced and maintained by the Application Skin 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 Edit > Preferences and navigate to the General group of preferences. Set the Run process in field to View. Select the skin in the Skin field. Click Save.

(Later — to test using the application user portal, update the preferences again. Set the Run Process in field to Portal and identify a portal.)

When the same Harness rule form is opened — still in the Developer 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 just cosmetic, evident by comparing this close-up image to the one above:

Although this section is not affected by the colors and fonts in the skin rule styles, the width and of the SmartLayout columns is different, and the height of rows is different.

In this example, the differences are due to settings in Step 4a of the Application Skin wizard. By default, SmartLayout rows are 25 pixels tall, and label columns are 100 pixels wide.

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

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

Related topics

How to create attractive work object forms using SmartLayouts