Understanding Page Controls

You use three categories of controls for page design and development. You determine which types of controls you want to add to your page definition by considering how you want to organize information on a page, as well as how your users will enter data.

This section discusses:

  • Aesthetic controls.

  • Data entry controls.

  • Function and data processing controls.

Use aesthetic controls to help organize, display, or emphasize information on a page. Usually, aesthetic controls are not associated with a particular record field that is defined in a record definition and maintained in a database. With the exception of the image control, these controls never update data in the database. Aesthetic controls include:

Field or Control

Definition

Chart

Draws a frame that serves as a placeholder for a chart that you construct using the GetChart field type in PeopleCode. Using the chart control, you draw a box in which the chart appears to the user at runtime. Associate the chart control with a record field in a record definition.

Frame

Draws a display-only box of variable size to visually group a set of controls on a page. You can draw a frame around almost any control. You can isolate controls, such as HTML areas, from other controls on a page and then hide the frame. Frames generate HTML tables for viewing in a browser.

Group Box

Draws a display-only box of variable size with a text label to visually group and identify related controls, such as radio buttons. Like a frame, you can resize a group box to any length or width. However, with a group box you can assign a visible label. Like frames, group boxes generate HTML tables for viewing in a browser.

Horizontal Rule

Draws a horizontal line to separate parts of a page. Use a horizontal rule control as a visual break between controls.

Image

Draws a frame that you can associate with a variable image from a record field in a database. The record field stores a graphic, such as a scanned image of an employee or a picture of an asset, in the format that you defined in the record definition. Because an image can change at runtime and is associated with a record and field definition, it is considered a data entry control and an aesthetic control.

The field that you associate with your image can be either a standard Image type field or an ImageReference type field, where images might be associated with it depending on user input. The ImageReference field type is a pointer to an image definition, which enables you to display images dynamically. An example of this is referencing a red, yellow, or green light image definition on a page, depending on the context when the page runs.

See Specifying Image Field Attributes.

See Specifying ImageReference Field Attributes.

Static Image

Draws a frame that you can associate with an image definition. It can help organize or identify information that appears on a page. A static image is different from an image because it does not change at runtime, and it is not associated with a record field but instead with a predefined image definition.

For example, you might select a static image, such as the yellow Clear button, from the image catalog and place it on top of a push button control so that the user knows to click that button to clear the contents of the page.

See Understanding Image Definitions.

Static Text

Adds a static text item, a display-only alphanumeric field with a maximum length of 60 characters, to describe a page, control, or group of controls.

You might use static text for a static note, an extension of a control label, and occasionally a control label itself. You should avoid using text items because they make it more difficult to translate pages to other languages. Instead, you should reference message catalog text to facilitate translation and other maintenance issues. Other methods of displaying text on a page are display-only edit boxes, field labels, and display-only long edit boxes.

The system disables the static text button when you

Use data entry controls to offer different ways to enter and maintain information. These types of controls are always associated with a record field that is defined in a record definition and maintained in a database.

Note: PeopleSoft Application Designer allows you add up to 405 fields on a page. When you reach this limit, typical system behavior includes being unable to select, move, or edit the page fields with an order number exceeding the 405-field limit. While this limit has no effect on the page at runtime, it has the potential to disrupt productivity during design time. If you find a page nearing the 405-field limit, you should use subpages to decrease the number of fields on a single page.

See Using Subpages.

Field or Control

Definition

Check Box

Adds a small square box that operates as a toggle switch—on and off—for data controls that can have one of two values (yes or no, 1 or 0).

During data entry, when the page is saved, the enabled or disabled value (whichever represents the current state of the check box) is written to the database. If values are specified in the page definition, the fields are left blank in the database, but you can still select or deselect the check box on the page. You will not know that the database fields are blank until you run a query or report on the field.

Drop-Down List Box

Adds a drop-down list box from which you select a single value from a list of valid values. Use drop-down list boxes to enable data selection from a list of three or more possible choices. In its closed state, the control displays the current value for the control. The user opens the list to change the value.

Drop-down list boxes are a good design choice when presenting users with a small number of selections from which they must select one value. However, when designing for grids and scroll areas, prompts give you better performance.

Edit Box

Adds an edit box, which you use for data entry. You also use edit boxes for displaying fields and translatable text. Use an edit box for text data entry, for example, for a record field that is defined as character, number, signed number, or date.

Long Edit Box

Adds a long edit box, which is a variable-length, alphanumeric control used for entering long, textual items, such as comments. The length of the control is determined by its content rather than the physical size of the box on the page.

Use long edit boxes to display long, translatable text. Each long edit box has a built-in scroll bar that enables users to enter and display more data than can be shown at one time on a page. The scroll bar on the long edit box is used only to scroll through the text in the long edit box.

Unlike edit boxes, which are limited to the field size that is defined in your record definition, long edit boxes can contain a relatively unlimited number of characters, up to a theoretical maximum of 64KB. This space, however, is shared by a number of other programming elements, so the true size might be closer to 15 to 25KB, depending on the location of the field in your application and the state of the application.

Typically, you use long edit boxes for comments or descriptions, or you configure the long edit box as a rich text editor.

See Setting Options Properties.

Radio Button

Adds a small, round button that represents one value for a control with multiple defined values. Add radio buttons in groups. A user can select only one radio button in a group at one time, like station buttons on a radio—hence the name. Use radio buttons to enable selection of one out of two possible choices. If you have three or more choices, use a drop-down list box.

Subpage

Adds a predefined, presized group of controls, such as address controls, that are defined in a separate subpage definition. During design time, you add only the subpage control to represent all of the controls in the subpage. You maintain those controls in only one place, the subpage definition. At runtime, you see all of the controls that are defined in the subpage on the page.

Use function and data processing controls to provide a mechanism for running commands and to maintain levels of information on a page.

Field or Control

Definition

HTML Area

Adds an area where you can write your own HTML. With other controls, the PeopleSoft system automatically generates the HTML code and then inserts the HTML code into the dynamically generated code at runtime.

See Using HTML Areas.

Tree

The dynamic tree control is a deprecated feature. Use PeopleCode with the HTML area to create a hierarchical tree.

Push Button/Hyperlink

Adds a push button or link that represents an internal or external link, PeopleCode command, process through PeopleSoft Process Scheduler, prompt action, scroll action, secondary page, or toolbar action. You can specify whether the control appears as a traditional push button or as a link (highlighted, underlined text).

Secondary Page

Adds an invisible control that associates a secondary page with the primary page. You then associate the secondary page with a command push button, link, or a pop-up menu. Secondary pages gather or display supplemental information that is related to the data in a primary page but less frequently referenced or updated. Secondary pages are displayed using the DoModal and DoModalComponent PeopleCode functions.

See Using Secondary Pages.

See DoModal.

Scroll Area

Provides an easy way for you to group or repeat multiple fields of data in a defined area. Like a grid, users can easily navigate through the rows using links and buttons in a navigation bar, and they can add or delete rows using push buttons. These features are automatically placed in the navigation bar. The navigation bar also provides several other settings, such as a Find feature that enables the user to search all fields and rows for specific data and a View All option so that the user can see all rows of data at once.

You can place the fields in the scroll area randomly, one on top of the other, or side by side. Unlike a grid, you are not limited to the type of controls that you can place in a scroll area. You can even place a grid inside a scroll area.

Scroll Bar

Like the scroll area, scroll bars contain push buttons and links for navigation, but not in the form of navigation bars. Developers must manually position all navigation items.

Like grids and scroll areas, the actual scroll control that you see in PeopleSoft Application Designer when working with scroll bars in page definitions does not appear at runtime. Instead, the scroll bar control has scroll action buttons to replace the visual rendering of the scroll bar as push buttons and links on the web.

Grid

Adds a grid, which looks and behaves like a spreadsheet that is embedded in a page. It has column headings and cells and uses push buttons, links, and tabs to navigate through the data. It is similar to a scroll area on a page. Each row in the grid corresponds to a set of controls in a scroll occurrence. Navigation links and push buttons replace the actual visual scroll bar, and add and delete push buttons enable a user to insert and delete rows. Use instead of a single-level scroll area or scroll bar to manage multi-row sets of data.