The first control add to the Purchase Order form is a container called an UltraGroupBox. This control is useful because it allows you to group a set of related controls. As you move the group box, all the controls within the group box move with it. In addition, you can make style choices in an UltraGroupBox that are inherited by the controls that it contains.

To add an UltraGroupBox to the Purchase Order form:

  1. With purchaseOrderForm.cls open in Visual Designer, expand OpenEdge Ultra Controls in the OpenEdge Toolbox.
  2. Select UltraGroupBox, then drag and drop it on the form.

    The UltraGroupBox control, like the Panel control, is a container that you use to group controls. It has additional features, including headers, caption alignment, and a variety of view styles.

  3. Use the shape handles to resize the UltraGroupBox, and the control to center it near the top of the form:


    Notice the alignment lines (circled in red) that can help you position the control. Look at the other positioning and alignment options available from the Design menu on the main menu. Also, check the layout preferences available from Window > Preferences > Progress OpenEdge > Visual Designer.

  4. Click the Smart Tag arrow on the UltraGroupBox control. The Smart Tag panel appears:


  5. Type Details in the Text in Header field.
  6. Change Header Position to TopInsideBorder. (This is an arbitrary change, included simply to illustrate the options for placing the header. If you prefer, you can leave Header Position set to Default, which places the header on the border at the top right.)
  7. Dismiss the Smart Tag panel by clicking outside of it.

    The form should now look something like the following:



After you add some controls to the Details group box (see Adding editors), you can experiment with style inheritance. In the Smart Tag panel of the UltraGroupBox, you can change the values of the View Style property.