Summary

During the Elaboration stage of application development, prototypes of user forms (such as work object forms and flow action forms) help business users and the team to understand requirements, use cases, and processing steps. Producing such prototypes is sometimes called "user interface modeling."

You can rapidly mock up harness rules, section rules, and flow action rules using standard "placeholder" properties before the real application properties are defined. You can save these rules (as they are valid), reference them in flow models, and execute the flow models. Of course, these runtime forms are only prototypes and cannot perform any useful processing.

This article describes V5.5SP1 facilities. Similar capabilities are available in V6.1. See How to model the user interface of your application before all properties are defined.

Suggested Approach

To add placeholders for not-yet-defined properties to a flow action, complete the following steps:

1. Select Edit > Preferences and update your preferences to set your User Preference to use the skin for your application, if it exists, or the standard CompositeBrand skin. The preference setting causes the Developer portal presentation of harness, section, and flow action to reflect the Application Skin.
2. Open a Flow Action from your flow. This example uses the Flow Action Save from a Purchase Order application.
3. Navigate to the HTML tab, and under HTML Generation, select Reference Section. Referencing the Section here (rather than defining the flow action appearance on the Form tab) is a best practice to promote reuse.
   
4. Under Section Reference, select the section you are modifying.
5. Open the section. In this case, the section named "Save" already includes several Layouts with functional properties, but additional properties are needed to prototype the flow action's appearance, though the property rules do not yet exist..
   
6. Add a new SmartLayout to the section.
   
7. To maintain uniformity with the previously used Layouts in this section, add a Double Template. Click OK.
   
8. The new Layout appears as below.
   
9. You can add any number of placeholder properties as needed. To do so, click the Basic toolbar or Advanced toolbar and select a control.
   • A Calendar feature is added to the section. Click the Calendar option from the Basic toolbar and drag into a Field in your new Layout.
     
10. Add properties as desired. As seen below, Text area and Input boxes are added. The Input Boxes are renamed to Name and Address, respectively, but do not reference properties in your application. The Cell Properties dialogue indicates that the property is the standard .pyTemplateInputBox.
    
11. Click Save. Notice that you can save the section rule because it references only existing properties, though some are merely placeholders that are not part of your application.
12. When running the Purchase Order flow, at the Save screen notice that even though the true application properties are not defined, the appearance of the flow action reflects the new properties and controls.
    This quick and easy method of adding properties to sections aids in prototyping, creating sample flows, and other Elaboration phase development activities.