Back Forward Harness, Section, and Flow Action forms
Placing a text label in a layout cell or header

About Harness rules

 zzz Show all 

A cell on the layout can present formatted text, which may include the results of JSP tags or directives. Follow these instructions to control the presentation of the label. Labels can also appear in headers.

 zzz 1. Drag and drop the Label control

Labels may appear in any cell. Labels are not associated with fields (properties) except by visual placement.

Click the down arrow (Menu) in the Basic control group (Basics) and select the Label control (Button). Drag the Label control to the cell that is to contain the text. When the pointer changes shape to indicate that a single cell is selected, release the mouse button to drop the control.

If the destination cell is not empty, the dropped label replaces the current contents of the cell.

To speed development, you can drag and drop a Single Value property from the Application Explorer into the right cell of a pair of adjacent cells. The system drops a label control into the left cell (if it is empty).

NoteIn a Smart Layout, some columns are labeled Label or Field. This designation only determines the (default) styles applied to values in the column; it does not restrict which controls can be placed in cells of the column. For example, you can drop a Label control into a Field column.

 zzz2. Complete the Cell Properties panel — Top fields

zzzClick the magnifying glass icon (Magnifying glass) to open the Cell Properties panel. Complete the panel to define the label appearance and behavior.

Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting preferences. If the panel is pinned(pin), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(pin), click Apply to apply your inputs.

Field

Description

Value

Type the text that forms the label. If the text is wider than the panel, click the magnifying glass icon (magnifying glass) to access a larger window that allows you to edit the longer text.

NoteWhen you plan to localize the application using this rule, so the application can support users in various languages or locales, choose the text carefully and limit text length to 64 characters. When practical, choose a caption already included in a language pack, to simplify later localization.

AdvancedOptionally, if this label is within a cell of a section that includes parameter declarations on the Parameters tab, you can enter the notation param.NAME here, to use a parameter value for the label text, where NAME identifies a string parameter. Make sure that the NAME parameter is declared on the Parameters tab, and that your application provides a non-blank value for the parameter value in all possible situations where the section appears. See Section rules — Completing the Parameter tab.

TipIf you need a text label that is longer than 64 characters and do not plan to localize this application, consider a paragraph rule rather than a label. See Adding paragraphs to place rich text in a cell or header.

If the Localization? check box (on the HTML tab of the rule form) is selected, you can click the pencil icon (Pencil) to review or create a field value rule supporting localization. . See About the Localization wizard.
Label for

SmartPromptOptional. If building an accessible application, select here the property name that this label identifies. In other cases, you can leave this field blank.

If you leave this blank, the generated HTML from this form assumes that this label identifies the cell (if any) immediately to the right of the current cell.

If this field is not blank, the generated HTML from this form at runtime allows:

  • A user to click this label to move focus to the cell containing the property
  • Screen reader software (such as the JAWS for Windows®) to identify to the cell containing the property.
  • The Required box on the related property to cause display of an orange asterisk next to the label.

NoteYou can't reference a field value rule here.

TipDuring design of a harness, section, or flow action form, complete this field to support simpler drag-and-drop operations. When completed, both the label and the associated field move together.

 zzz3. Complete the General tab

Field

Description

Visible

Select to determine when the label appears. (If this setting is not applicable, the cell contents are blank.) Select

  • Always — to have the label appear or be hidden based on the visibility of the enclosing section or flow action when the form is first presented or is refreshed. The system checks this condition only once.
  • Other Condition — to make the visibility depend on a when condition rule, a Boolean expression evaluated only once, or a test evaluated repeatedly upon JavaScript events.
Condition

SmartPrompt If you selected Other Condition for the Visible field, complete this field. Enter an expression involving another property, or identify the When Name key part of a when condition rule. Specify one of three outcomes:

  • When condition rule evaluated once — Enter the When Name key part of a when condition rule that determines the visibility of this label at runtime. The system uses the Applies To key part of the current rule in rule resolution to locate the when condition rule. Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.
  • Simple Java expression evaluated upon JavaScript events — To dynamically control the visibility of this label with a JavaScript event, enter a simple comparison involving a target property and select the Run on Client? check box. The result at runtime determines whether the content of this cell appears in read-only mode or in the mode of the enclosing layout.
    For example, enter .Color =="Blue" in this field to make this label visible when the property Color has the value Blue, and invisible otherwise. Depending on the state of the Run on Client? check box, the comparison executes only once as the form is initially displayed, or dynamically. See Implementing dynamic form actions and the Client Event Editor.
Run on Client?

This field appears only if you select Other Condition for the Visible field.

Select to indicate that the Condition field contains a simple property comparison test that will be evaluated on the user workstation in response to a client event. See Implementing dynamic form actions and the Client Event Editor.

Clear to indicate that the Condition field contains a when condition rule name or an expression to be evaluated once upon initial display of the form.

Required

This box is meaningful only for flow action rules or sections that are included in flow action rules.

Select to cause a yellow asterisk (zzz) to appear next to the label when this flow action rule is presented in read-write mode. By convention, this can indicate that a field with this label is required to be non-blank.

NoteHowever, checking Required for a Label cell does not affect the processing or validation of user input. To mark a field as required to be non-blank, check the Required box in the field Cell panel. To cause both validation of the value and the asterisk to appear, check the Required box for both the Label and Field panels.

Wrap Text

Select if the text in the cell is to be presented as multiple lines when the text is longer than the cell width. If not selected, the text in the cell may appear truncated at runtime.

Read Only

NoteLeave cleared in most cases. Labels are always presented in read-only mode, so this setting affects only styles. Select to cause the label to be presented with read-only styles always, or based on a when condition rule, even when the enclosing layout is in read-write mode. Complete the next field to modify the effect of this check box.

Condition

SmartPromptOptional. Enter an expression involving another property, or identify the When Name key part of a when condition rule. Specify one of three outcomes:

  • Leave blank to present the label in read-only styles always, regardless of the mode of the enclosing layout.
  • When condition rule — Enter the When Name key part of a when condition rule that determines the style of this label at runtime. The system uses the Applies To key part of the current rule in rule resolution to locate the when condition rule, and executes the when condition rule once as it renders the form. Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.

This field appears only when you select the Read Only? check box.

 zzz4. Complete the Advanced tab

Complete the Advanced tab.

Field

Description

Width

TipAs a best practice, use Smart Layouts to achieve uniform width of cells throughout your application's forms. You can set the width of Smart Layout templates using the Application Skin wizard.

Optional. Enter a positive number for the width in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed width.)

This field appears only when the Width field in the Layout panel or Repeat panel (for the layout containing this cell) is set to px fixed and the cell is not controlled by Smart Layout restrictions. In that case, you can also adjust the width of columns directly:

  1. Click a vertical wireframe cell border.
  2. Wait until the pointer shape changes (drag), then drag the border.
Height

TipAs a best practice, use Smart Layouts to achieve uniform height of cells throughout your application's forms. You can set the width of Smart Layout templates using the Application Skin wizard.

Optional. Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.)

This field appears only when all columns in the Layout are not controlled by Smart Layout column restrictions (that is, all columns have the None template). In that case, you can also adjust the height of a row directly:

  1. Click a horizontal wireframe cell border.
  2. Wait until the pointer shape changes (drag), then drag the border.
Read-Write Style

SmartPromptOptional. By default, when the work object form or flow action form appears in read-only mode, the CSS style named DataValueRead or DataValueRead RV2 applies. If this cell is not controlled by Smart Layout restrictions, you can enter another style name or select from those listed.

The SmartPrompt list shows all styles that start with the word Data. You are not limited to these styles.

Click the pencil icon (Pencil) to preview the field as it appears with the style applied.

Read-Only Style

SmartPromptOptional. By default, when the work object form or flow action form appears in read-only mode, the CSS style named DataValueRead or DataValueRead RV2 applies. If this cell is not controlled by Smart Layout restrictions, you can enter another style name or select from those listed.

The SmartPrompt list shows all styles that start with the word Data. You are not limited to these styles.

Click the pencil icon (Pencil) to preview the field as it appears with the style applied

Inline Style

To apply inline styling to this cell only, type a CSS style definition in this field, or click the magnifying glass to access a Style Editor window. Styles you enter in this field supplement and override style elements defined in style sheets, according to normal CSS rules.

Inline styles are recorded in the generated HTML for the form; they do not alter the CSS definitions.

Using the Style Editor

You can select the font, color, font size, borders, margins, and other attributes of this cell using selection lists. The Style Editor maintains a preview of the resulting presentation. If you alter the style definition directly, click  Apply   to update the preview.

Click  OK   to record the style defined with the Style Editor in the panel.

Use Heading Styles

Select to change the cell HTML element from <TD> to <TH>, with a resulting style change.

 zzz Tips

TipUse these Windows operations to speed development:

zzz About Flow Action rules

zzz About Harness rules

zzz About Section rules